I am working with React Native createBottomTabNavigator and see that:
lazy - Defaults to true. If false, all tabs are rendered immediately. When true, tabs are rendered only when they are made active for the first time. Note: tabs are not re-rendered upon subsequent visits.
https://reactnavigation.org/docs/bottom-tab-navigator/
Where do I put the attribute "lazy" and set it to false if I want to reload the Connection page every time I click on the Connect navigation tab?
import { createStackNavigator, createAppContainer, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import ...
const RegisterScreens = createSwitchNavigator({
Phone: PhoneLoginScreen,
Register: RegisterScreen
});
const switchNavigator = createSwitchNavigator({
SplashScreen,
TutotialScreen,
loginFlow: createStackNavigator({
Main: MainScreen,
EmailLogin: EmailLoginScreen,
PhoneLogin: RegisterScreens
}),
mainFlow: createBottomTabNavigator({
Home: createStackNavigator({
HomeScreen,
AccountScreen
}),
Connect : ConnectionsScreen,
Chat: createStackNavigator({
AllChatScreen,
SingleChat
})
})
});
const App = createAppContainer(switchNavigator);
export default() => {
return (
<AuthProvider>
<App ref={(navigator)=> {setNavigator(navigator)}}/>
</AuthProvider>
)
};
I am using hooks and want to reload the Connection page because of a callout happening in useEffect()
Related
// AppContainer.js
const AuthNavigator = createStackNavigator(...code);
const DrawerNavigator = createDrawerNavigator(
{
MyAccount: MyAccountScreen,
Home: HomeScreen,
}
);
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
// HomeScreen.js I call:
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
It opens the modal, but always goes automatically to MyAccountScreen without touch anything. The expected behaviour it's only open the modal.
Yes, which is actually correct. But you have some flows in understanding how a DrawerNavigator should work. You cannot open the drawer if you're not on the Drawer.
I see that you have HomeScreen defined in 2 Navigators. And I have a feeling that you want to be able to navigate from Home to/from MyAccount using the DrawerNavigator, which means that both those routes have to be inside the DrawerNavigator and you want the HomeScreen to be the first screen that is visible by default.
const DrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
Which you kind of already have. The misconception that you have is that for your current routes, you don't need the AppNavigator, you could simply rename the above one as AppNavigator and your navigation configuration should look something like this:
const AppNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
And that's it. Now when you navigate to AppNavigator, the first displayed route will be Home and opening the Drawer will just display the Drawer and won't automatically navigate you to MyAccountScreen.
My BottomTabNavigator is working as expected. The problem is that I would like to initially render a page that is outside of the navigator tabs. How could I accomplish this?
import Loading from "./components/Loading.js";
import Profile from "./components/Profile.js";
import History from "./components/History.js";
import Main from "./components/Main.js";
const TabNavigator = createBottomTabNavigator({
Profile: {screen: Profile},
Main: {screen: Locatione},
History: {screen: History},
},
{
initialRouteName: "Loading"
});
export default createAppContainer(TabNavigator);
Before, I was using createStackNavigator, which was working pretty well. Is there any way that I could combine both CreateBottomStackNavigator and createStackNavigator?
const AppNavigator = createStackNavigator(
{
Auth: Auth,
Loading: Loading,
Main:Main,
Locatione:Locatione,
Map: Map,
Contactos: Contactos
},
{
initialRouteName: "Loading"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default function App() {
return <AppContainer />;
}
Yes, you have to add that screen in an navigationStack and name it the inital page, and add the navigation stack to bottomTab navigator.
here im adding the home scren to app stack navigator and this is the inital screen i want to render.
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home
},
AirportMeeting:{
screen:AirportMeeting
}
},
{
initialRouteName:"HomeScreen",
}
)
now im adding that appstack , i.e the stack navigator as a tab in the bottomtab navigator by writing Home:AppStack and my notifications and settingscreen are just screens, i.e class componenets
const TabNavigator = createBottomTabNavigator({
Home: AppStack,
Notification:Notifications,
Account: SettingsScreen,
})
and finally im making my tabnavigator as my appcontainer. hence it works
const navigation = createAppContainer(
TabNavigator
);
so similarly you can try for the loadingscreen by adding in the navigation stack and then adding that stack in the bottomTabNavigator nad creating a container of bottomTabNavigator.
Hope it helps. feel free for doubts
Yes, you can do that, what you basically need to is, create a stack navigator as your app container and inside that put bottom tab navigator. Like,
Something like this,
const myTabNavigator = createBottomTabNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myTabNavigator,
navigationOptions: {
header: null,
},
},
})
You can add any screen you want to show outside bottom tab navigator.
I'm getting the following error from my React Native Android app.
'The component for route Dashboard must be a React component. For example:
import MyScreen from './MyScreen'
...
Dashboard: MyScreen
You can also use a navigator:
import MyNavigator from './MyNavigator'
...
Dashboard: MyNavigator'
I believe the following code is the problem. I have no idea how to fix it though, and would really appreciate some help.
import { createStackNavigator, createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator } from "react-navigation";
import Login from './Login';
import Dashboard from './Dashboard'
import PatientsScreen from './PatientsScreen'
const AppNavigator = createStackNavigator(
{
Home: { screen: Login },
Dashboard: { screen: DrawerNavigator, screen: DashboardTabNavigator }
},
{
headerMode: 'none'
}
);
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen
})
const DrawerNavigator = createDrawerNavigator (
{
Dashboard: { screen: Dashboard }
},{
initialRouteName: 'Dashboard'
}
)
export default createAppContainer(AppNavigator);
Here's a screenshot of what I am trying to achieve. The top left burger menu is a drawer navigator, and the tabs for patients, devices and recordings are what I'm working on now. I'm trying to use tab navigation logic with those. In the code I posted above, I am trying to set up a route to navigate to the PatientsScreen from the Dashboard.
Create your TopTabNavigator and DrawerNavigator before your StackNavigator.
You might check Dashboard: { screen: DrawerNavigator, screen: DashboardTabNavigator }, you're using the key twice, so only DashboardTabNavigator will be used.
From what you said and the screenshot you posted, I did it like this :
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen,
Recordings : RecordingsScreen,
Devices : DevicesScreen
})
const DrawerNavigator = createDrawerNavigator (
{
Dashboard: { screen: DashboardTabNavigator }
},{
initialRouteName: 'Dashboard'
}
)
const AppNavigator = createStackNavigator(
{
Home: { screen: Login },
Dashboard: {screen : DrawerNavigator }
},
{
headerMode: 'none'
}
);
Can you try below code
I have added mock RecordingScreen, DeviceScreen, change this as per your need
import { createStackNavigator, createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator } from "react-navigation";
import React, {Component} from "react";
import {View, Text} from 'react-native';
import Login from './Login';
import Dashboard from './Dashboard'
import PatientsScreen from './PatientsScreen'
class RecordingsScreen extends Component {
render(){
return <Text>Recordings</Text>
}
}
class DevicesScreen extends Component {
render(){
return <Text>Devices</Text>
}
}
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen,
Recordings: RecordingsScreen,
Devices: DevicesScreen
});
const AppStack = createStackNavigator({
Dashboard: DashboardTabNavigator
});
const DrawerNavigator = createStackNavigator(
{
DrawerStack: AppStack
},
{
headerMode: "none"
}
);
const AppNavigator = createStackNavigator(
{
Home: Login,
Dashboard: DrawerNavigator
},
{
headerMode: 'none',
initialRouteName: 'Dashboard'
}
);
export default createAppContainer(AppNavigator);
I'm learning react native with configuring tabNavigator, DrawerNavigator, and StackNavigator into one without NativeBase or Expo with a single react-navigation library.
I achieved it but there comes an error when I perform some specific sequence in my application.
The application starts with Tab Screen. -> Change Tab -> Open Drawer -> Goto Stack -> open Drawer and then go to Tabs gives this error.
Here is my code :
App.js
import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";
const App = () => (
<View style={{flex: 1,backgroundColor: '#293656'}}>
<Drawer />
</View>
);
export default App;
MergedNavigator.js
import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';
// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';
//plain
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = StackNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:LoginScreen},
TabOne:{screen:secondStack},
TabTwo:{screen:TabTwo}
},{
animationEnabled:true
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tabs},
Stack:{screen:stack}
})
And all other imported stack screen has nothing but the title.
What's the problem here with my code? Or is there any better way I can achieve these all 3 Navigators with only react-navigation?
There is an issue with the sub actions being reset inside the Stack which can be seen here
Therefore the workaround for this issue would be to wrap your createBottomTabNavigator inside a createStackNavigator with headerMode: none in order to achieve the desired effect.
Info
By adding a StackNavigator nested directly within a DrawerNavigator, the sub actions will be reset only to the StackNavigator defined and won't affect the child screen states, therefore it won't throw the error, as mentioned in the code
if (route.index !== undefined && route.index !== 0) {
subAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: route.routes[0].routeName,
}),
],
});
}
MergedNavigator.js
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';
//plain
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = StackNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:LoginScreen},
TabOne:{screen:secondStack},
TabTwo:{screen:TabTwo}
},{
animationEnabled:true
})
const TabStack = createStackNavigator({ //... Adding the Stack here
Tabs: {screen: Tabs}
}, {
headerMode: 'none'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tab},
Stack:{screen:stack}
})
Here's a modified Snack with header's enabled
import { StackActions, NavigationActions } from 'react-navigation';
let { navigation } = this.props;
let resetAction = StackActions.reset({
key: undefined,
index: 0,
actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);
When you set the key to undefined, the navigator uses the actual stack, not the root.
First of all your main issue is you cann't create more than one StackNavigator() on your code.
Please try different navigator for redirection like below example code.
import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';
// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import * as TAB from '../tab';
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = createMaterialTopTabNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:TAB.Login},
TabOne:{screen:secondStack},
TabTwo:{screen:TAB.TabB}
},{
animationEnabled:true,
initialRouteName:'Login'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tabs},
Stack:{screen:stack}
},
{
animationEnabled:true,
initialRouteName:'Tabs'
})
hope above code snippet is useful for you.
I'm using React Navigation (V2) and I have a basic set up of screens like this:
import {
createDrawerNavigator,
createStackNavigator,
createSwitchNavigator
} from "react-navigation";
import DetailScreen from "../screens/DetailScreen";
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/LoginScreen";
import SettingsScreen from "../screens/SettingsScreen";
const StackNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Detail: { screen: DetailScreen }
});
StackNavigator.navigationOptions = ({ navigation }) => {
let drawerLockMode = "unlocked";
if (navigation.state.index > 0) {
drawerLockMode = "locked-closed";
}
return {
drawerLockMode
};
};
const DrawerNavigator = createDrawerNavigator({
HomeStack: { screen: StackNavigator },
Settings: { screen: SettingsScreen }
});
const Navigator = createSwitchNavigator(
{ LoginScreen, DrawerNavigator },
{ initialRouteName: "LoginScreen" }
);
export default Navigator;
While using my app the user ends up on the DetailScreen, makes some choices and is then supposed to go back to the HomeScreen. I want to pass params to the HomeScreen while going back. Unfortunately it seems like pop() and goBack() do not accept any params.
How can I go back a screen and pass params while doing so?
You can use the listeners for the screen and fire your refresh changes there.
didFocus - the screen focused (if there was a transition, the transition
completed)
// In your component
componentDidMount () {
this._onFocusListener = this.props.navigation.addListener('didFocus', (payload) => {
// Update the component (API calls here)
});
}