score:1

Accepted answer

full solution from react native navigation on restart:

const navigator = stacknavigator({
    initialscreen: {
        screen: initialscreen
    },
    splash: {
        screen: splash
    },
    languagestartup: {
        screen: languagestartup
    },
    login: {
        screen: login
    },
    register: {
        screen: register
    }
}, {initialroutename: 'initialscreen'});

export default navigator;

my initial screen

import react, {component} from 'react';
import {connect} from 'react-redux';
import * as generalpref from './../preferences/generalpref'
import log from './../utils/log'
import {asyncstorage, view} from 'react-native';
import * as pref from './../preferences/preferences';
import {navigationactions} from 'react-navigation'

const tag = 'initialscreen'

class initialscreen extends component {
    static navigationoptions = {
        header: false
      };
    componentwillmount() {
        log(tag+' mount')
        const {navigate} = this.props.navigation;
        generalpref
            .getinitialscreen()
            .then(value => {
                log(tag+' initial',value)                
                if (value != null) {
                    log(tag+' initial',value)                                    
                    return value
                } else {
                    log(tag+' no initial','splash')                                    
                    return 'splash'
                }
            })
            .then(screenname => this.props.navigation.dispatch(navigationactions.reset({
                index: 0,
                actions: [navigationactions.navigate({routename: screenname})]
            })))
            .catch(err => {
                log(tag+' initial error',value)                                
                this.props.navigation.dispatch(navigationactions.reset({
                    index: 0,
                    actions: [navigationactions.navigate({routename: 'splash'})]
                }))
            });
    }
    render() {
        return null;
    }
}

export default initialscreen;

then in language screen

changelanguageto(language) {
    log(tag+'change language', "change language to: " + language.code);
    // log(tag, 'current state');
    log(tag+' language state', language);
    generalpref.setinitialscreen('login');

    this
      .props
      .actions
      .changelanguage(language);
      i18nmanager.forcertl(true);      
    // immediately reload the react native bundle
    rnrestart.restart();
  };

score:8

i’ve also had this problem and currently the only good solution is the following example:

 const rootnavlogged = stacknavigator({
     ...
  },{
     initialroutename : 'home'
  });

  const rootnav = stacknavigator({
     ...
  },{
     initialroutename : 'login'
  });

  class app extends component {
     render(){
         if (this.props.userlogged == true ){
            return (
               <rootnavlogged/>
            ) 
          } else {
             return(
                <rootnav/>
              ) 
          }
     }
 }

score:10

changing initialroutename with multiple route depending upon your requirement. i have got it working this way.

create router file import all your screens.

export a stateless function call it createrootnavigator with params as (load="<your initial screen>")

export const createrootnavigator = (load="<your initial screen>") => {
  return stacknavigator({
     initialize: {
       screen: initialize,
     },
     main: {
      screen: main,
     },
     { 
       initialroutename: load
     }
  })
}

in your main app,

state = {
  load: "<your initial screen>"
}

eg:

state = {
   load: "initialize" // value is string
}

set the state accordingly in componentdidmount() method. and finally render new layout.

render() {
  const layout = createrootnavigator(this.state.load);
  <layout />
}

the above method worked fine for me. hope it helps somebody.


Related Query

More Query from same tag