Home How do I automatically redirect(after a 2 second delay) from a splash page to a registration page using React Native?
Reply: 1

How do I automatically redirect(after a 2 second delay) from a splash page to a registration page using React Native?

VK1
1#
VK1 Published in 2018-01-12 04:56:43Z

I have my StackNavigator set up like this:

const Navigation = StackNavigator({
  Splash:{screen: Splash},
  Registration:{screen:Registration},
  HomeScreen:{screen: HomeScreen},
  Login:{screen: Login},
  Lobby:{screen: Lobby},
  Wifi:{screen: Wifi},
  Mobile:{screen:Mobile},

}, {
  mode: 'modal',
  headerMode: 'none'
});

I'd like to redirect the user from the Splash page(which only contains a logo) to the Registration page after 2 seconds. I want to avoid using buttons(hence the automatic redirect) so that the user gets a brief look at the logo.

My Splash page:

import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, DrawerNavigator } from 'react-navigation';


export default class Splash extends Component{
    render(){
        const logo = config.images.logo;
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.mainContainer}>
                <Image
                    source={logo}
                    style={styles.logo}
                />
            </View>
        );
    }
}

I'm not sure I would put this.navigator.redirect('Registration') because the only way I've changed pages so far was using onPress={}

Sathish Sundharam
2#
Sathish Sundharam Reply to 2018-01-12 06:38:04Z

try with componentDidMount function.

import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';
const EntityAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: 'screen:Registration' }),
    ]  
});

export default class Splash extends Component{
    componentDidMount {
      setTimeout( () => {this.load()}, 2000);       
    }
    load = () => {
       this.props.navigation.dispatch(EntityAction);    
    }
    render(){
        const logo = config.images.logo;
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.mainContainer}>
                <Image
                    source={logo}
                    style={styles.logo}
                />
            </View>
        );
    }
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305118 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO