How can I render a Stack Navigator from React-navigation to a specific screen ?
Can I pass in a screen name as a prop to render the StackNavigator to that screen upon initial load?
UPDATE:
I solved it by passing in a prop to the Stack Navigator and then conditionally setting the intialRouteName:
const Main = RootNavigator(userLoggedIn);
then render the the Main like so <Main />
instead of the RootNavigator directly.
Then inside the Navigator code :
export const RootNavigator = (userLoggedIn= false) => {
return StackNavigator(
{
LoggedIn: {
screen: LoggedIn,
},
LoggedOut: {
screen: LoggedOut,
}
},{
initialRouteName: userLoggedIn? "LoggedIn" : "LoggedOut"
}
);
};
Yes, when you initialise your StackNavigator, the second parameters is the options. So you can do :
StackNavigator({ <Your-Routes> }, { initialRouteName: 'MyFirstPage' });
Related
I am following react-navigation v3. As per the rules all the routes/screen should be passed through createAppContainer. Is there any way that some screen A can contain createMaterialTopNavigator inside it as child with two screens B and C and that screen A can be passed into App.js's createAppContainer??
The app needs a single createAppContainer and you can use navigators as screens.
For example:
const BottomTabNavigator = createBottomTabNavigator({
Stack1: {
screen: Stack1,
},
Stack2: {
screen: Stack2,
},
Stack3: {
screen: Stack3
}
})
const authenticationSwitch = createSwitchNavigator({
LoginScreen: {
screen: LoginScreen,
},
LoadingScreen: {
screen: LoadingScreen,
},
BottomTabNavigator: {
screen: BottomTabNavigator
}
})
export default createAppContainer(authenticationStack)
EDIT.
Sorry and yes, i didn't understand your question.
To have such a behaviour, you can create a StackNavigator with your customHeader and from that have a child that is a `createMaterialTopNavigator.
This will work if the header is static out of the box, but if you need to have nested childs inside the topNavigator you have to dinamically change the header based off the current navigation state
I'm building an app with drawer-navigator. There should be custom side-menu screen which I made by contentComponent, but the problem is I need to make a navigation inside a drawer when the user pressed a button. I tried to pass stackNavigator to customComponent, this returns me "There is no route defined for key ...".
Please, could you help me, make a navigation inside the drawer without closing it.
const tempSN = createStackNavigator(
{
screen: DrawerScreen,
screen2: ProfileSetupScreen
},
{ initialRouteName: "screen" }
);
const DrawerStack = createDrawerNavigator(
{
MainStack: MainStack
},
{
contentComponent: tempSN, // If I pass here DrawerScreen directly, it works
navigationOptions: {
header: null
}
}
);
Can you try the following???
const DrawerStack = createDrawerNavigator(
{
MainStack: MainStack
},
{
contentComponent: drawerComponent,//Your drawer component.Not stack navigator.
navigationOptions: {
header: null
}
}
);
const drawerStack = createStackNavigator(
{
drawerNav: DrawerStack,// Here is the drawer included.
screen: DrawerScreen,
screen2: ProfileSetupScreen
},
);
Add the drawer navigation inside the stack navigation. And when you want to navigate to screen 'screen2', use like this.props.navigation.navigate("screen2")
I am using react navigation v3 in my app, I use stack navigator inside drawer navigator ,On the click of logout I navigate to login screen with clearing storage of user, But whenever I login again , Main component dose not call componentWillMount or componentDidMount method , and displays Previously loaded data on it. here is my code >
const screens = {
login: { screen: Login },
dashboard: { screen: Dashboard },
patientList:{screen:StackNav},
headerComponent:HeaderComponent
}
const MyDrawerNavigator = createDrawerNavigator(
screens,
{
initialRouteName: 'login',
contentComponent: Sidebar
}
);
App = createAppContainer(MyDrawerNavigator);
export default App;
StackNav ==
export default createStackNavigator({
PatientList,
PatientDetails
});
Logout Function ==
localStorageService.removeAllKeys().then((res) => {
this.props.navigation.navigate(route, { isLogin: 'N' })
});
In React Navigation 5.x
use unmountOnBlur
<Drawer.Screen
name={...}
component={...}
unmountOnBlur={true}
options={{unmountOnBlur: true}}
/>
put this in navigationOptions of drawer navigator
unmountInactiveRoutes: true
As Daniyal's awnser complementation: I've introduced the configuration inside createDrawerNavigator() configs as above:
const AppNavigator = createDrawerNavigator(
{
Home:{
screen: Home
},
Login:{
screen: Login,
navigationOptions: {
drawerLabel: () => null
}
}
},
{
unmountInactiveRoutes: true
});
And now all pages are working withouth any "cache".
I'm using react-navigation library. Currently the navigation is organized in this way:
App.js:
const Layout = createRootNavigator(signedIn);
return (
<AppFontLoader>
<Layout />
</AppFontLoader>
);
AppNavigator:
export const createRootNavigator = (signedIn = false) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
AppNavigator:
export const SignedIn = createMaterialBottomTabNavigator(
{
MeetingsScreen: {
...
}
MeetingsScreen:
const MeetingNavigator = createStackNavigator({
MeetingsListScreen: {
screen: MeetingsListScreen,
navigationOptions: {
}
},
AddMeetingForm: {
screen: AddMeetingFormScreen
},
MeetingScreen: {
screen: MeetingScreen
}
}, {initialRouteName: "MeetingsListScreen"});
The error is shown with the current structure:
You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.
Apparently, I shouldn't nest one navigator into another, but I'm struggling to come up with the right navigation structure.
How to organize the navigation so that I can have more layers of navigation to move between screens?
I've encountered the same issue, so what I ended up doing was just making one navigation. Rootstack. All routes are there. My app.js has only root stack and navigations.
I have a tabnavigator like so
var TabNavigation = createBottomTabNavigator({
NearbyScreen: {
screen: Nearby
},
FindScreen:{
screen: LandmarkNavigation
},
NotificationScreen:{
screen: Notifications
},
MyProfile:{
screen: MyProfile
}
})
that is rendered in the component
render() {
//console.log(this.props);
var nearbyLocations = this.props.locationsNearby;
return(
<TabNavigation thisThing="thisThingValue" />
)
}
How do I access the value of the prop I passed on inside one of it's tabs?
I solved it with screenProps:
return(
<TabNavigation screenProps={thing} />
)
Which made it accessible in the navigator tab view via this.props.screenProps
Try accessing through here this.props.navigation.state.params.thisThing