A customisable React Native video player for Android and IOS

react-native-af-video-player

A customisable React Native video player for Android and IOS

Features

• Fullscreen support for Android and iOS!
• Works with react-navigation
• Optional action button for custom use
• Add your own logo and/or placeholder

Install

npm i -s react-native-af-video-player

Then link

react-native link react-native-video
react-native link react-native-keep-awake
react-native link react-native-vector-icons
react-native link react-native-orientation
react-native link react-native-linear-gradient

Simple Usage

import React from 'react'
import { AppRegistry, StyleSheet, View } from 'react-native'
import Video from 'react-native-af-video-player'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

const url = 'https://your-url.com/video.mp4'

class VideoExample extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Video url={url} />
      </View>
    )
  }
}

AppRegistry.registerComponent('VideoExample', () => VideoExample)

Props

Referencing

To toggle play/pause manually, you can do it like so:

  class MyComponent extends Component {

    play() {
      this.video.play()
    }

    pause() {
      this.video.pause()
    }

    render() {
      return (
        <View>
          <Video
            url={url}
            ref={(ref) => { this.video = ref }}
          />
          <Button onPress={() => this.play()}>Play</Button>
          <Button onPress={() => this.pause()}>Pause</Button>
        </View>
      )
    }
  }

Issues

Container

Avoid adding alignItems: 'center' to the container, it can cause fullscreen mode to disappear :D

React Navigation

If you’re using react-navigation you need to manually hide the headers / tab bars to take advantage of fullscreen videos.

Example

import React, { Component } from 'react'
import { StyleSheet, View, ScrollView, Alert, Text } from 'react-native'

import Video from 'react-native-af-video-player'

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

class ReactNavigationExample extends Component {

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation
    // Setup the header and tabBarVisible status
    const header = state.params && (state.params.fullscreen ? undefined : null)
    const tabBarVisible = state.params ? state.params.fullscreen : true
    return {
      // If you're using stack navigators, you can hide the header bar like so
      header,
      // If you're using the tab navigators, you can hide the tab bar like so
      tabBarVisible,
    }
  }

  onFullScreen(status) {
    // Set the params to pass in the fullscreen status to navigationOptions
    this.props.navigation.setParams({
      fullscreen: !status
    })
  }

  onMorePress() {
    Alert.alert(
      'Boom',
      'This is an action call!',
      [{ text: 'Aw yeah!' }]
    )
  }

  render() {

    const url = 'https://your-url.com/video.mp4'
    const logo = 'https://your-url.com/logo.png'
    const placeholder = 'https://your-url.com/placeholder.png'
    const title = 'My video title'

    return (
      <View style={styles.container}>
        <Video
          autoPlay
          url={url}
          title={title}
          logo={logo}
          placeholder={placeholder}
          onMorePress={() => this.onMorePress()}
          onFullScreen={status => this.onFullScreen(status)}
          fullScreenOnly
        />
        <ScrollView>
          <Text>Some content here...</Text>
        </ScrollView>
      </View>
    )
  }
}

export default ReactNavigationExample

http vs https

For your sanity you should use https especially if you’re planning to use this for iOS. Using http will not work due to App Transport Security Settings will result in AppStore rejection.

Fullscreen videos inside a ScrollView

If you need the video inside a ScrollView, use our own ScrollView instead:
The reason for this is because we need to hide all of it's content due to ScrollView styling challenges when enabling fullscreen mode. We wouldn't want you deal with that headache, instead let this component handle it :)
You can also apply styles to the video by wrapping our Container around it. Note: wrapping the video with your own element can cause fullscreen defects.

Example

  import Video, { ScrollView, Container } from 'react-native-af-video-player'

  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    videoContainer: {
      margin: 10
    }
  })

  class VideoInScrollView extends React.Component {

    render() {
      return (
        <ScrollView style={styles.container}>

          <Text>Some content above</Text>

          <Container style={styles.videoContainer}>
            <Video
              autoPlay
              url={url}
              title={title}
              logo={logo}
              placeholder={logo}
              rotateToFullScreen
            />
          </Container>

          {/* Or use without the Container */}
          <Video
            autoPlay
            url={url}
            title={title}
            logo={logo}
            placeholder={logo}
            rotateToFullScreen
          />

          <Text>Some content below</Text>

        </ScrollView>
      )
    }
  }

To Do

[ ] Improve scrubber controls for iOS
[ ] Customise specific components for better theming
[ ] Option to use custom icons
[ ] Support Immersive mode for Android
[x] Provide fullscreen support within a ScrollView

GitHub