[react native, scrollview] How to use scrollview container in react native

How to use scrollview in react native

井民全, Jing, mqjing@gmail.com

[hybrid, cross] Ionic, React Native, Cordova, Electron

This document shows how to use scrollview container using videos as an example.

GitHub: Source

Fig. Show videos in a scrollview container on my iPhone.

1. Key

import { StyleSheet, Text, ScrollView } from 'react-native'; export default function App() {   const refScrollView = useRef(null)      return (        <ScrollView       scrollEnabled={true}       ref={refScrollView}       style={styles.container}       contentContainerStyle={styles.contentContainer}        >              <YOUR_COMPONENT> </YOUR_COMPONENT>              <YOUR_COMPONENT> </YOUR_COMPONENT>              <YOUR_COMPONENT> </YOUR_COMPONENT>              <YOUR_COMPONENT> </YOUR_COMPONENT>              <YOUR_COMPONENT> </YOUR_COMPONENT>              <YOUR_COMPONENT> </YOUR_COMPONENT>        </ScrollView>   ); // end of return } // end of App function

2. Detail

2.1. Setup

expo init VideoPlayer   # create a new project cd VideoPlayer expo install expo-av @react-native-community/slider    # install dependencies expo install expo-video-player    # install dependencies

2.2. Code

File: App.tsx

import { StatusBar } from 'expo-status-bar'; import React, { useRef, useState } from 'react' import { StyleSheet, Text, ScrollView } from 'react-native'; import { Video } from 'expo-av' import VideoPlayer from 'expo-video-player' export default function App() {   const refScrollView = useRef(null)      return (        <ScrollView       scrollEnabled={true}       ref={refScrollView}       style={styles.container}       contentContainerStyle={styles.contentContainer}        >               {/* Component 1 */}               <Text style={[styles.text, { fontWeight: 'bold', textTransform: 'uppercase' }]}>         Examples 1       </Text>       <VideoPlayer         style={{ height: 400 }}         slider={{           visible: true,         }}         timeVisible={true}         videoProps={{           shouldPlay: true,           resizeMode: Video.RESIZE_MODE_CONTAIN,           // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props           source: {             uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',           },         }}       />              {/* Component 2 */}               <Text style={[styles.text, { fontWeight: 'bold', textTransform: 'uppercase' }]}>         Examples 2       </Text>       <VideoPlayer         style={{ height: 400 }}         slider={{           visible: true,         }}         timeVisible={true}         videoProps={{           shouldPlay: true,           resizeMode: Video.RESIZE_MODE_CONTAIN,           // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props           source: {             uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',           },         }}       />               {/* Component 3 */}               <Text style={[styles.text, { fontWeight: 'bold', textTransform: 'uppercase' }]}>         Examples 3       </Text>       <VideoPlayer         style={{ height: 400 }}         slider={{           visible: true,         }}         timeVisible={true}         videoProps={{           shouldPlay: true,           resizeMode: Video.RESIZE_MODE_CONTAIN,           // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props           source: {             uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',           },         }}       />              {/* Component 4 */}               <Text style={[styles.text, { fontWeight: 'bold', textTransform: 'uppercase' }]}>         Examples 1       </Text>       <VideoPlayer         style={{ height: 400 }}         slider={{           visible: true,         }}         timeVisible={true}         videoProps={{           shouldPlay: true,           resizeMode: Video.RESIZE_MODE_CONTAIN,           // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props           source: {             uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',           },         }}       />        </ScrollView>   ); // end of return } // end of App function const styles = StyleSheet.create({   container: {     backgroundColor: '#FFF',     flex: 1,   },   contentContainer: {     alignItems: 'center',     justifyContent: 'center',     paddingTop: 40,   },   text: {     marginTop: 36,     marginBottom: 12,   }, })

2.3. Run

expo start

Result

Fig. The result.

3. References

1. https://docs.google.com/document/d/1ox_r9icu-HqLqA1aUjbk1YH17Io6U8SHGnWc8BFa5Ik/edit?usp=sharing

2. https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx

3. https://www.npmjs.com/package/expo-video-player