score:1
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.
Source: stackoverflow.com
Related Query
- React Native StackNavigator initialRouteName
- React Native Expo StackNavigator overlaps Notification bar
- Hide header on StackNavigator with React Navigation in React Native
- React Native disable swiping StackNavigator in TabNavigator
- React Native navigating between Nested StackNavigator
- What is the difference between React Native and React?
- Error Running React Native App From Terminal (iOS)
- React native text going off my screen, refusing to wrap. What to do?
- Get current scroll position of ScrollView in React Native
- React Native Responsive Font Size
- Make view 80% width of parent in React Native
- Image resizing in React Native
- React Native on Android failed to find Build Tools
- Simulate display: inline in React Native
- React Native Error - yarn' is not recognized as an internal or external command
- Can React Native apps be tested in a browser?
- Hiding the status bar with React Native
- How to detect when a React Native app is closed (not suspended)?
- What folders should be git ignored in React Native project?
- How do I exit/shut down a React Native app?
- New React Native project with old version of react native
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- Transparent overlay in React Native
- Why does React Native not offer a justify-self
- Can you use React Native to create a desktop application?
- GET with query string with Fetch in React Native
- React Native / Xcode Upgrade and now RCTConvert.h not found
- PhaseScriptExecution [CP-User] error in React Native
- React Native error: Element type is invalid: expected a string or a class/function but got: object
- useEffect not called in React Native when back to screen
More Query from same tag
- How to add a prop to the last element of an array of jsx elements in React?
- how to resolve a react native EventEmitterListener warning
- How to show user location with a marker on react-google maps when page load?
- Call back function not getting current object when calling on click
- Style import (with webpack) on react js
- React-Testing-Library(RTL): Animation causing TypeError with React Pose
- Why is my image not showing in my react project
- Modify reactjs form input value outside of react
- The request is missing a Valid API Key while using Youtube Data API v3
- Access nested array value inside other array in the stateful ReactJS component
- Next.js Head - You have included the Google Maps JavaScript API multiple times on this page
- Figuring out the correct heights for a comparison
- Route from login page to root page doesn't work in Netlify
- How make ESLint support for the experimental syntax 'jsx' if it isn't currently enabled?
- How to iterate json consists of array elements
- How to push items in JSON Object array in react?
- Reuse a function with setState in several components
- React setstate not updating object array
- event object in Javascript
- How to make my scripts work on my components in next.js?
- React Hooks - Best way to remove an component temporarily from DOM without unmounting it
- How to receive data from one part of api to another
- Not able to access param in another screen inside componentdidmount()
- React hooks. Update component passed as param via onClick after one of it's prop was changed
- check two TextField have the same value with react-hook-form
- How to get the row data from a table using React?
- Converting a React Class Component to Function Component
- Is there a react component event for when url query string parameters change?
- React-Bootstrap modal not closing. Error: Cannot update a component (`OnboardPage`) while rendering a different component
- material-ui table clear selection