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 ...

Answer 1

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>