How to create and use many Tab Navigator in react native? - react-native

I'm trying to create differents bottom tab navigator in a single application in react native.
At the moment I can create and use a single one properly, but I'd like to display another one when I've connected to the application by the authentification form.
Is it possible ?
Here is an example of my code that will help you to understand what I'd like to do if you didn't :
export default function AppNavigation() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>
</NavigationContainer>
);
}
and I would like to create another one like :
export default function AppNavigation() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>
<Tab.Navigator>
<Tab.Screen name="Profil" component={ProfilPageFunction} />
</Tab.Navigator>
</NavigationContainer>
);
}
My problem is that it is not possible having two Tab.Navigator
I don't find documentation talking about it on the internet. If you guys have one or are able to explain me how to do it would be awesome.

By mentioning 'Different tab navigators' I'll assume that you want to have tab navigators in different screens.
There are options to do this.
First one based on the tab names that you have provided, you are trying to have an authentication flow, the approach would be to render tabs based on the login state.
export default function AppNavigation() {
return (
<NavigationContainer>
{!isloggedIn?(<Tab.Navigator>
<Tab.Screen name="SignUp" component={SignUpFunction} />
<Tab.Screen name="SignIn" component={SignInFunction} />
</Tab.Navigator>):
(<Tab.Navigator>
<Tab.Screen name="Profil" component={ProfilPageFunction} />
</Tab.Navigator>)}
</NavigationContainer>
);
}
Here isloggedIn will come from your context or state or however you manage the state.
Second option is to have multiple screen in a stack navigator with tab navigators, this is called nesting navigators
inside each screen
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
//inside the NavigationContainer
<Stack.Screen name="Home" component={Home} />
Both approaches would work

Related

How to navigate to a screen which is not on the <Tab.Navigator> in React-Nativ?

I have a <Tab.Navigator> and it has four <Tab.Screen> elements. What i try to do is, to press a button inside a specific <Tab.Screen> and open an another screen on top of it. But i don't want this another screen to have a <Tab.Screen> navigator in the <Tab.Navigator> bar.
I thought maybe there's an option to hide, make invisible a <Tab.Screen> but i couldn't find any documentation about it.
Is it possible to achieve this ?
According the official doc. You can reorganize your navigation and put the bottom tabs navigator inside the stack navigator like this
function HomeTabs() {
return (
<Tab.Navigator> // Here you can also navigate to both Profile and Settings
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} /> // Here you won't have any tabs
<Stack.Screen name="Settings" component={Settings} /> // Here neither
</Stack.Navigator>
);
}
You have to nest navigators with the stack navigator as the outer navigator and the tab navigator as the inner navigator:
https://reactnavigation.org/docs/nesting-navigators
You have to reorganize your navigation structure , as documentation describe https://reactnavigation.org/docs/hiding-tabbar-in-screens
Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.
But if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
After re-organizing the navigation structure, now if we navigate to the Profile or Settings screens, the tab bar won't be visible over the screen anymore.

Structure for nested navigation with react-native-navigation

I am currently building my first app using react-native and i am struggeling with the right structure for nested navigation using react-native-navigation .
My app should be navigatable using a Tab-bar. On every screen of that Tab-bar I might need to have a Stack navigation available.
App.js:
<NavigatonContainer>
<BottomTab.Navigator>
<BottomTab.Screen name="Screen1" component={Screen1}/>
<BottomTab.Screen name="Screen2" component={Screen2}/>
<BottomTab.Screen name="Screen3" component={Screen3}/>
<BottomTab.Navigator/>
<NavigationContainer/>
Now if i want to use a Stack navigation inside Screen1, what would be the best approach? My approach would be to move all content that should be display when the first Tab is active to a new screen called "Screen1Start" and then having following code on "Screen1".
Screen1.js:
<Stack.Navigator>
<Stack.Screen name="Screen1Start" component={Screen1Start}/>
<Stack.Screen name="Screen1Settings" component={Screen1Settings}/>
<Stack.Screen name="Screen1Details" component={Screen1Details}/>
</Stack.Navigator>
Is that the right thing to do? Are there better approaches to this? Thanks for your help!
You can have a stack inside of a stack and then navigate to each individually with navigation.navigate('name'). In the react navigation docs you can read more about navigating inside nested navigators here.
Pretty quick example would be:
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
Here you can see that Home is a stack of feed and messages and then you have individual screens for Profile and Settings. Like so you can have another stack instead of Profile or Settings binded by another navigator such as toptab or bottomtab.
The react navigation docs explain this very detailed and easy to understand. I would recommend you to read from start to finish so you have a deeper understanding of the navigation.

Right-to-left screen animation in React Native navigation

I'd like to have screen animations from right to left in React Native. I checked a lot in the internet but most of the examples are old and they are using StackNavigator differently and the configurations are also different. I think they are using an old version of React Navigation. I use version 6. I also tried as explained here in docs https://reactnavigation.org/docs/stack-navigator/#animations but it didn't worked in any way.
Could you please help? Here is my code:
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
function MainScreen() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="To Read" component={ToReadScreen} />
<Tab.Screen name="Have Read" component={HaveReadScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="ReadX"
component={MainScreen}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
So I am trying to configure the screen animation between main screen and setting screen.
Any help would be appreaciated. Thanks.
Assuming this is a recent react-navigation v6 version, use the animationTypeForReplace option:
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{
animationTypeForReplace: 'pop',
}}
/>
https://reactnavigation.org/docs/stack-navigator/#animationtypeforreplace
<Stack.Navigator initialRouteName='LoginPage' screenOptions={{ headerShown: false, animation: 'slide_from_right' }}>
you have to use animation props in Stack.Navigator in screenOptions

React Native Navigation pass dynamic data when rendering

changeTheme(){
this.setState({darktheme:!this.state.darktheme})
}
render()
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} darkT={this.state.darktheme==true} />
<Stack.Screen name="Settings" component={SettingsScreen} changeTheme={this.changeTheme} darkT={this.state.darktheme==true} />
</Stack.Navigator>
</NavigationContainer>
);
}
In the settings page. I want to change the theme using this.props.changeTheme() it is supposed to change the state of the app and the whole app will re-render. But it doesn't work like that, the theme is not being changed. What am I doing wrong here?
When I log this.props.darkT it returns false even after I called the function changeTheme()
You can try this:
<Stack.Screen name="Settings">
{ () => <SettingsScreen darkT={!!this.state.darkTheme} changeTheme={this.changeTheme} /> }
</Stack.Screen>
In the Settings screen darkT and changeTheme will be available as props so you can access with this.props.darkT and this.props.changeTheme

Middle tab button using react-navigation version 5

I need to add a middle button to the app's tab navigator.
It's easy to implement this feature using react-navigation 3, However, react-navigation 5, has a different structure and I couldn't find anyway to insert a custom button or component inside navigator.
const Tab = createBottomTabNavigator();
const TabNavigator = props => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Screen1" component={FirstScreen} />
<Tab.Screen name="Screen2" component={SecondScreen} />
{...here...}
<Tab.Screen name="Screen3" component={ThirdScreen} />
<Tab.Screen name="Screen4" component={ForthScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
What can I do? Any help will be really much appreciated!
You can use the navigationOptions pros inside the Tab.screen tag and create your own custom view same as old version.