How to continue a video between Screens with StackNavigation in React Native? - reactjs

Question

Hey Everyone I'm trying to use a video as a Background for several screens but the problem is when I'm trying to re use the BackgroundVideo.js in an another screen, the video would stop and replay at the begin when i'm switching between Screen (Lauchscreen to the SignInScreen).
I want to make this continue and not that the video replay.
An idea please ?
Thank you
BackgroundVideo.js :
import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';
const { width, height } = Dimensions.get("window");
export default class BackgroundVideo extends Component {
render() {
return (
<Video
source={require("/Users/joshuabonifond/DoneWithIt/assets/BackgroundVideo.mp4")}
rate={1.0}
isMuted={true}
resizeMode="cover"
shouldPlay
isLooping style={styles.backgroundVideoStyle}
/>
);
}
}
const styles = StyleSheet.create({
backgroundVideoStyle: {
flex : 1,
height: height,
position: "absolute",
top: 0,
left: 0,
alignItems: "stretch",
bottom: 0,
right: 0,
}
});
Launchscreen.js
import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';
import BackgroundVideo from './BackgroundVideo.js';
const { width, height } = Dimensions.get("window");
export default class Launchscreen extends Component {
render() {
return (
<View style = {styles.container}>
<BackgroundVideo/>
<Text style = {styles.TextTitle}>
First app !
{'\n'} {'\n'}
Hello There
</Text>
Navigation.js
import { getActiveChildNavigationOptions } from 'react-navigation';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Launchscreen from '../Components/Launchscreen';
import SignInScreen from '../Components/SignInScreen';
const HomeScreenStackNavigator = createStackNavigator({
LaunchscreenView:{
screen: Launchscreen,
navigationOptions:{
headerShown: false,
}
},
SignInScreenView: {
screen: SignInScreen,
navigationOptions:{
headerShown: false,
}
},
})
App.js
import StatusBar from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Launchscreen from './Components/Launchscreen';
import NavigationHomeScreen from './Navigation/NavigationHomeScreen';
export default class App extends React.Component {
render(){
return (
<NavigationHomeScreen/>
);
}
}

Answer 1

Resolved !
Like #beingbalder said, I put my Launchscreen and my SignInView in a common Screen and then, I used this method (https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react)to return the state from the Child ("Launchscreen") to my Parent Component ("CommonViewLaunch") and change the state of the variable "isLaunch" when I press on a touchableOpacity button in the Launchscreen.
Thank you so much !

Answer 2

You can't do that in this way.
First of all make a common screen for Launchscreen and SignInScreen and use both of these screens as component.
inside you CommonScreen.js
<View>
<BackgroundVideo/>
{isLaunch ? <Launchscreen/>:<SignInScreenView/>}
</View>
change your isLaunch variable when you are moving from launch screen to sign in screen
Note - Make sure to add proper styling so you video appear below screen components, also remove video from both screen components.

Answer 3

The best answer would be https://stackoverflow.com/a/69676488/10665516.
But you can also just pass the current position of the video to the next screen videoRef.getStatusAsync(). And set the starting position of the video on the next screen using videoRef.setPositionAsync(millis)