A video player built with react-native
This assumes you have already installed node.js and react-native
- npm install
- react-native link
- react-native run-ios
In order to try it in the ios simulator, drag a video to the simulator to be able to access it in the simulator gallery.
- Load video from gallery
- Play/Pause the video
- Mute video
- Display/Change progress of video
- The entry point for the application is index.[android/ios].js and they both just register the same component as the root application.
src/index.js
contains the root compponent, which is the stack navigator that's used in the app.components
folder contains the components of our app.screens
folder contains the screens (which are also components) used in navigation.utils
folder contains utility functions and constants used trough out the application
- Every folder contains a
package.json
file containing a name, which is used from any location in the project to reference the given folder location. This is a convinience used to avoidimport sthg from '../../../fol/app.js
which is error prone and makes changing the folder structure a nightmare. - An
index.js
file at the root of every folder is used to have a common interface for importing files in the project :import { ControlBar, NavBar, Card } from '...'
and avoid making an import for each one.
- react-navigation is used for navigation.
- react-native-video is used to play videos.
- react-native-image-picker is used to load assets from the phone gallery.
- react-native-vector-icons is used for icons.