Destroy React Native Component On Blur

user_396476 0
Viewed 583

I have following navigation structure

const AppNavigator = createStackNavigator({
    AppSplashScreen: AppSplashScreen,
    WalkthroughScreen: WalkthroughScreen,
    LoginScreen: LoginScreen,
    BottomTabNavigator: BottomTabNavigator
}, {
    headerMode: 'none',
    cardStyle: { backgroundColor: '#000000' },
});

And here is my first screen. I am using a video to display splash screen animation

export default class AppSplashScreen extends Component {

    state = {
        displayVideoPlayer: true,
        firstLaunch: false
    }

    componentDidMount() {
        SplashScreen.hide();
    }

    componentWillUnmount() {
        this.setState({
            displayVideoPlayer: false
        });
    }

    isFirstLaunch() {
        let firstLaunch = true;
        if (true === storage.get('APP_ALREADY_LAUNCHED')) {
            firstLaunch = false;
        } else {
            storage.set('APP_ALREADY_LAUNCHED', true);
            firstLaunch = true;
        }
        return firstLaunch;
    }

    didCompleteVideoPlayback() {
        if (true === this.state.displayVideoPlayer) {
            this.setState({
                displayVideoPlayer: false
            });
        }
        const currentRouteName = this.props.navigation.state.routeName;
        if ('AppSplashScreen' !== currentRouteName) {
            return false;
        }
        if (true === global.SKIP_SPLASH_SCREEN_REDIRECT) {
            return false;
        }
        if (this.isFirstLaunch()) {
            this.props.navigation.navigate('LanguageScreen');
            return false;
        }
        this.props.navigation.navigate('HomeScreen');
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center'}}>
                {true === this.state.displayVideoPlayer &&
                    <Video
                        source={VIDEO_SPLASH_2}
                        muted={true}
                        repeat={false}
                        playInBackground={false}
                        resizeMode="contain"
                        onEnd={() => this.didCompleteVideoPlayback()}
                        style={{height: '100%', width: '100%', backgroundColor: '#000000'}}
                    />
                }
            </View>
        );
    }
}

My issue is, whenever I open the application it triggers didCompleteVideoPlayback and try and execute the redirect which conflicts with other app level redirect such as, redirect on click of push notification, or navigation state persistence etc.

How do I make sure that if AppSplashScreen is not in focus, it must not display the video and not trigger didCompleteVideoPlayback

PS: componentWillUnmount is not destroying Video component from the memory, I want to make sure that

Any pointer in here is appreciated.

Thank you.

react-navigation react-native
1 Answers

It seems to be working with navigation listener, here is what I did

componentDidMount() {
    SplashScreen.hide();
    this.focusListener = this.props.navigation.addListener('didFocus', () => {
        this.setState({
            isFocussed: true
        })
    });
    this.blurListener = this.props.navigation.addListener('didBlur', () => {
        this.setState({
            isFocussed: false
        })
    });
    setTimeout(() => {
        this.unsubscribeListeners();
    }, 100);
}

render() {
    return (
        <View style={{flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center'}}>
            {true === this.state.isFocussed &&
                <Video
                    source={VIDEO_SPLASH_2}
                    muted={true}
                    repeat={false}
                    playInBackground={false}
                    resizeMode="contain"
                    onEnd={() => this.didCompleteVideoPlayback()}
                    style={{height: '100%', width: '100%', backgroundColor: '#000000'}}
                />
            }
        </View>
    );
}

I am not sure if this is the good way of dealing with this stuff or if there is a better way to do this.

user_3964760
Related