I've got a stack navigator for create item flow and I wanted to have a floating button at the bottom, which wouldn't be affected by the screen transitions, so I ended up placing it on the same level as that stack navigator, just like that:
<>
<Stack.Navigator screenOptions={{ headerShown: true }}>
<Stack.Screen name="Route1" component={Component1} />
<Stack.Screen name="Route2" component={Component2} />
<Stack.Screen name="Route3" component={Component3} />
</Stack.Navigator>
<Button.Primary
onPress={() => {
navigate(SCREENS[currentStep]);
}}
>
Continue
</Button.Primary>
</>
Is that a good solution, or is there a cleaner approach? I don't like that, because it's going to require mixing navigation logic with other things, such as requesting something from the api.
Related
Seems it should be so simple but I can't figure it out. I have a nested Tab Navigator inside a Stack Navigator like so:
function App(){
const Main = () =>{
<Tab.Navigator initialRouteName={"Players"}>
<Tab.Screen name="Players" component={FindPlayers} />
<Tab.Screen name="Requests" component={MatchRequests} />
</Tab.Navigator>
}
....
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={"Main"} >
<Stack.Screen name="Main" component={Main}/>
<Stack.Screen name="CourtPicker" component={CourtPicker}/>
</Stack.Navigator>
</NavigationContainer>
)}
It renders a blank screen with the Header that says "Main" instead of rendering the FindPlayers component.
My expectation is that I've defined an initial route Main which should render my Main component which is a Tab navigator, which should in turn render the Players component because I've defined the initialRouteName as such.
What am I doing wrong here?
according to Nesting navigators
Try :
<Stack.Screen name="Main" component={Main} options={{
headerShown: false,
}}/>
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.
In the documentation for version 6.x of React Navigation, in fundamentals, Navigating to a screen in a nested navigator, they have an example of nesting a Drawer navigator inside of a Stack navigator.
function Root() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Drawer.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Root"
component={Root}
options={{ headerShown: false }}
/>
<Stack.Screen name="Feed" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
Why is it shown like this and not the Drawer as the parent navigator and the Stack inside?
I've seen other examples that do this (Drawer parent, Stack inside) but I don't understand what the difference in terms of layouts or the final UI.
Asked somewhere else and got this answer:
If stack is nested inside drawer - you can still open drawer in any
stack screen, etc
if drawer is nested inside stack - drawer will be
only present in the screen that drawer is, and cannot be seen as other
screens will render above it
I would like to hide my screen header but still show the back button in my Stack Navigator? I have set screenOptions={{ headerShown: false }} in my Stack.Navigator, which hides both the screen header and back button. I would like to just hide the screen header.
Can someone please assist with this? Below is my Stack Navigator:
function SearchStack() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="SearchScreen" component={SearchScreen} />
<Stack.Screen name="SearchListScreen" component={SearchListScreen} />
</Stack.Navigator>
);
}
In the tab navigator the stack is set as:
<Tab.Navigator screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {...})}>
<Tab.Screen name="Search" component={SearchStack} />
</Tab.Navigator>
This is what I'm currently seeing:
But this is what I would like to have with my Tab navigation bar still at the bottom for the search stack:
This is what I get using options={{headerMode:"none"}} in Stack.Navigator:
The below occurs when adding updating the Stack.Navigator to <Stack.Navigator screenOptions={{ headerTitle:"", headerTransparent:true }}> . How can add or move the back button to the top exactly like the 2nd image, which is achieved when not adding the Stack to the Tab.Screen so changing:
<Tab.Screen name="Search" component={SearchStack} />
to
<Tab.Screen name="Search" component={SearchScreen} />
but doing this causes the tab to not appear in the Search list screen.
The back button is part of the header, so you can't hide the header and keep the back button.
What you want to do is to hide other parts of the header except for the back button, which would be
Title, with headerTitle: ""
Background, with headerTransparent: true
for hide the back button in react-native, we can use property,
headerBackVisible:false this property only work on android
<Stack.Screen
options={{headerBackVisible: false}}
/>
example use of in Stack
const CustomerStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="First"
component={First}
options={{headerShown: false}}
/>
<Stack.Screen
name="Third"
component={Third}
options={{headerTitle: '', headerTransparent: true}}
/>
</Stack.Navigator>
);
}
If you don't want the default header then use like this
screenOptions={{ headerShown: false }}
and write custom code for the header with back button in your component
(If your are using class component) Then
<TouchableOpacity onPress={()=>this.props.navigation.goBack()} style={{width:'100%', height:45, flexDirection:'row'}}> <Image source={require('back button image path')}/> </TouchableOpacity>
if you want header title too then,
<TouchableOpacity onPress={()=>this.props.navigation.goBack()} style={{width:'100%', height:45, flexDirection:'row'}}> <Image source={require('back button image path')}/> <Text>SearchListScren</Text> </TouchableOpacity>
Put this code at top of the component code under a container
How to disable ability to go back
I have a functional component
export default function App(){
createHomeStackNavigator = () =>
<Stack.Navigator screenOptions={{
headerShown: false
}}>
<Stack.Screen
name="Login"
component={Login}
/>
<Stack.Screen
name="Home"
children={createHomeTabNavigator}
/>
</Stack.Navigator>
return(
<NavigationContainer>
{createHomeStackNavigator()}
</NavigationContainer>
)
When user goes to Home, its onclick on Login component then he cant go back to the login by any swipe on ios, back button on Android and other ways
Probably you should use navigation.reset();