Change videosource in React Native

Question

Im using react-native-video in my react-native application. I want to be able to dynamically change videosource but found out it wasnt that easy. My approach is simply by changing the clip name with a hook, changing video1 to video2. But I was not able to update the videoinstance:

I did try something like this:

const [clipSelected, setClipSelected] = useState('video1');

const onButton = (name) => {
  console.log("videoname", name)
  setClipSelected(name);
}

return (
  <Fragment>
    <View style={styles.container}>
        <Video
          source={require('./' + clipSelected + '.mp4')}
          ref={(ref) => {
            bgVideo = ref
          }}
          onBuffer={this.onBuffer}
          onError={this.videoError}
          rate={1}
          repeat={true}
        />

       <Button onPress={(e) => onButton('video2')}></Button>
    </View>
  </Fragment >
);

Are there any other library, approach or method anyone are aware of where I can solve this? Basically a way to update the source instance of the video. Im going to run this on an Android TV ...

No it says "TransformerError App.js: App.js Invalid call at line 111: require(''./' + clipSelected + '.mp4') something like that. — acroscene, Aug 27 '19 at 18:14
Basically what I think I need to do is to reset the instance of the video and load a new file ... But not sure how to do that ... — acroscene, Aug 27 '19 at 18:29
I think you don't need `require`, directly put your file path. — ravibagul91, Aug 28 '19 at 01:04

score 0 · Accepted Answer · answered Aug 28 '19 at 02:39

Use the status values to make changes.

const [clipSelected, setClipSelected] = useState(false);

const onButton = () => {
  setClipSelected(true);
}
...
        <Video
          source={clipSelected === false ? require('./video1.mp4') : require('./video2.mp4')}
...
<Button onPress={(e) => onButton()}></Button>

Change videosource in React Native

1 Answers1