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

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/> 
    );
  }
}

CodePudding user response：

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.

CodePudding user response：

The best way is the 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)