RCTVideo.xcodeproj | ||
.gitignore | ||
package.json | ||
RCTVideo.h | ||
RCTVideo.m | ||
RCTVideoManager.h | ||
RCTVideoManager.m | ||
README.md | ||
Video.android.js | ||
Video.ios.js | ||
VideoResizeMode.js | ||
VideoStylePropTypes.js |
react-native-video
A
Add it to your project
- Run
npm install react-native-video --save
- Open your project in XCode, right click on
Libraries
and click `Add Files to "Your Project Name" (Screenshot). - Add
libRTCVideo.a
toBuild Phases -> Link Binary With Libraries
(Screenshot). - Click on
RCTVideo.xcodeproj
inLibraries
and go theBuild Phases
tab. Double click the text to the right ofHeader Search Paths
and verify that it has$(SRCROOT)../react-native/React
- if it isn't, then add it. This is so XCode is able to find the headers that theRCTVideo
source files are referring to by pointing to the header files installed within thereact-native
node_modules
directory. (Screenshot). - Whenever you want to use it within React code now you can:
var Video = require('react-native-video');
Example
// Within your render function, assuming you have a file called
// "background.mp4" in your project
<Video source={"background"} style={styles.backgroundVideo} />
// Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
resizeMode: 'cover', // stretch and contain also supported
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
Example code here.
TODOS
- Support
require('video!...')
- Support other extensions than mp4?
- Add prop to set repeat (none or forever)
- Add support for other props (not sure which yet)