React native video reset on open a modal

Question

const videoPlayer = () => {
  return (
    <View>
      <Video
        source={{ uri: "background" }} // Can be a URL or a local file.
        ref={(ref) => {
          this.player = ref;
        }} // Store reference
        onBuffer={this.onBuffer} // Callback when remote video is buffering
        onError={this.videoError} // Callback when video cannot be loaded
        style={styles.backgroundVideo}
      />
      <ModalView modalVisible={setmodalVisible} />
    </View>
  );
}

I am using this code and player is working as i want. But the problem is i have a model in this screen and i want to open it on a click when i open it. Video started from from 0 duration not able to get why is this happening. Can anyone know why is this happens on modal open.

please provide proper details of the code and what you want to achieve? — Nooruddin Lakhani, Feb 04 '22 at 10:36
Modal most time causes component re-render which causes Media Player to rerender and restart from the beginning. Try to investigate if that unnecessary rerendering not happening. — Fiston Emmanuel, Feb 04 '22 at 10:59
Can you try to keep track of current video player second and after open modal video should start from that second — Fiston Emmanuel, Feb 04 '22 at 11:13
I found the reason as if i am embedding in another component then it rerender if i call it directly then it works fine. So i want to know why it happens — Rambler, Feb 04 '22 at 11:44
This depends on your app components tree and how changing state in parent affects rerender of the child component. For complex app, Try to teleport components like modal outside the main app render tree. There's solution available like https://github.com/jeremybarbet/react-native-portalize — Fiston Emmanuel, Feb 04 '22 at 11:52
@BYIRINGIROEmmanuel is this a wrapper as i can wrap anything in a view. — Rambler, Feb 04 '22 at 11:56
It is a wrapper but it teleports a wrapped component to its one rendering tree so its rendering has no effect on the main app component tree. Use this when you have tangible reason to do so. — Fiston Emmanuel, Feb 04 '22 at 11:59
ok @BYIRINGIROEmmanuel i will try it thanks. also do upvote if can — Rambler, Feb 04 '22 at 12:36
@BYIRINGIROEmmanuel i am making new apps for own business let me know if interested to connect also — Rambler, Feb 04 '22 at 12:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241722/discussion-between-byiringiro-emmanuel-and-rambler). — Fiston Emmanuel, Feb 04 '22 at 12:39

score 1 · Accepted Answer · answered Mar 28 '22 at 08:38

1

You should put the video into the modal, when open to modal you can find the video there.

<Modal>
 <View>
   ...
    <Video />
 </View>
</Modal>

Like that you can use the modal with video.

More information with Modal in react native modal.

answered Mar 28 '22 at 08:38

Zighed Mohammed Al-amine

26
4

React native video reset on open a modal

1 Answers1