my screens are arranged this way:
main root
Stack navigator has 2 screens
Login
Drawer
The drawer is a Drawer Navigator, having three screens
Home
Profile
Settings
Home is a Bottom Tab Navigator having multiple Screens like
Dashboard
Reminder
etc ...
So the issue is whenever I am in any sub-screen of let's say reminder and I want to close it by navigation.goBack() it takes me to Dashboard, what I want is to land back on reminder
PS. the sub screen is also in the tab navigator I have hidden it with filter
Read the following code and try it, don't forget to import it.
The way I've done it is putting the drawer above in the file
DrawerNavigator.js:
const Drawer = createDrawerNavigator()
const DrawerNavigator = () => {
return(
<Drawer.Navigator initialRouteName='TabNavigator'>
<Drawer.Screen name='Home' component={TabNavigator}/>
<Drawer.Screen name='Profile' component={ProfileStackScreen}/>
<Drawer.Screen name='Settings' component={SettingsStackScreen}/>
</Drawer.Navigator>
)
}
export default DrawerNavigator
Here I insert the TabNavigator(Only one of the options in the Drawer will have te bottom tab navigator, the Home one.
The TabNavigator.js will have all the bottom tab screens:
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<Tab.Navigator initialRouteName='Dashboard'>
<Tab.Screen name="Dashboard" component={DashboarStackScreen} />
<Tab.Screen name='Reminder' component={ReminderStackScreen}/>
</Tab.Navigator>
)
}
export default BottomTabNavigator
In the StackNavigator.js you will enter every stack screens you might want to use:
const Stack = createStackNavigator()
const DashboardStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ReminderStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ProfileStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const SettingsStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
export {DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen}
If this doesn't solve your problem, let me know.
You can use a StackNavigator for each tab of the BottomTabNavigator, which contains the screens for that tab. Every tab will then have its own navigation stack.
Related
I have a Drawer navigator with only one screen which is BottomTab Navigator. Inside BottomTab Navigator, I have 2 screens, Home and Activity. I want to hide Drawer header on Activity screen and show it again when I switch back to Home Screen. I am using setOptions of drawer with headerShown:false on focus of Activity screen and headerShown:true on blur of Activity screen. Doing so causing delay hiding and showing again. I think useLayoutEffect will solve this issue but can I solve my issue without it?
<Drawer.Navigator>
<Drawer.Screen name="BottomTab" component={BottomTab} />
</Drawer.Navigator>
const BottomTab = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Activity" component={Activity} />
</Tab.Navigator>
);
};
class Activity extends Component {
componentDidMount() {
this._unsubscribeFocus = this.props.navigation.addListener('focus', () => {
console.log('focus');
this.props.navigation.getParent().setOptions({
headerShown: false,
});
});
this._unsubscribeBlur = this.props.navigation.addListener('blur', () => {
console.log('blur');
this.props.navigation.getParent().setOptions({
headerShown: true,
});
});
}
componentWillUnmount() {
this._unsubscribeFocus();
this._unsubscribeBlur();
}
I have a screen in my app (CameraScreen) that is both in my Tab Navigator and Stack Navigator shown below (there are some more Tab Screens and Stack Screens that I removed for simplicity):
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Camera"
component={CameraScreen}
/>
</Tab.Navigator>
);
};
const Navigation = () => {
return (
<NavigationContainer theme={Theme}>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Camera" component={TabNavigator} />
<Stack.Screen name="Product" component={ProductScreen} />
<Stack.Screen name="CameraStack" component={CameraScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
Now if I navigate to ProductScreen, then navigate to CameraStack from there and check the navigation state I notice that ProductScreen is nowhere to be found in the routes which I checked using navigation.getState().routes. Thus if I try and use navigation.goBack() it does not go back to the ProductScreen (which would be the expected behaviour).
When I check the routes in ProductScreen, ProductScreen shows up as the last route, however this disappears when I navigate to CameraStack.
I have a hunch that this has to do with the fact that CameraScreen is in both the Tab Navigator and Stack Navigator so for some reason the navigation prop passed to Camera is the Tab Navigator.
For reference my CameraScreen (simplified):
const CameraScreen = ({ navigation, route }) => {
// this doesn't include ProductScreen even if I navigate to CameraStack from the ProductScreen
console.log(navigation.getState().routes);
return (
<View></View>
);
};
and ProductScreen (simplified):
const ProductScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity
onPress={() => navigation.navigate("CameraStack")}
>
</TouchableOpacity>
</View>
);
};
One idea I can think of to resolve this issue is to manually pass a navigation parameter from ProductScreen but I'm wondering if there is a better way to handle this issue.
I realized this had nothing to do with the fact that I had this screen in both the Tab Navigator and Stack Navigator but was occurring because I was navigating to the same screen using navigation.navigate instead of navigation.push.
The former navigates to the previous location in your stack if you navigate to a screen you've already visited before, but the latter pushes a new route to the navigation state even if it's a screen you've already visited.
Handle backBehavior prop in your Navigator
<Tab.Navigator backBehavior='history'>
<Screen ... />
<Screen ... />
<Tab.Navigator/>
https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior
I am setting the theme of my Navigation Container like this
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from "#react-navigation/native";
export default function Navigation() {
const colorScheme = useColorScheme();
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<RootNavigator />
</NavigationContainer>
);
}
I have a stack navigator, and inside the stack navigator i have a drawer navigator, like this:
// Root Navigator
export default function RootNavigator() {
return (
<Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
<Stack.Screen
name="Root"
component={DrawerNavigator}
options={{
headerShown: false,
}}
/>
{/* Other Screens */}
</Stack.Navigator>
);
}
// Drawer Navigator
export default function DrawerNavigator(props) {
return (
<Drawer.Navigator
initialRouteName="UserSettings"
drawerContent={(props) => <CustomDrawerContent {...props} me={me} />}
>
{/* Some Screens */}
</Drawer.Navigator>
}
The Drawer Toggle Button
In default browser theme it looks like this:
In dark theme it looks like this:
How can I get the toggle button to contract the black of dark theme?!
Thanks in advance.
I was looking at react navigation 5 docs and saw the example where you learn to make a full screen modal.
https://reactnavigation.org/docs/modal
In the example above they use a root stack navigator with a nested stack navigator and a screen named Modal, our screen modal, but for some reason mode="modal" prop is used in root stack navigator instead of ModalScreen component (our modal will go from bottom to top as it should, mode prop achieves this) but why is it not used in ModalScreen but in RoosStackNavigator
const MainStack = createStackNavigator();
const RootStack = createStackNavigator();
function RootStackScreen() {
return (
<RootStack.Navigator mode="modal">
<RootStack.Screen
name="Main"
component={MainStackScreen}
options={{ headerShown: false }}
/>
<RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Navigator>
);
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="Home" component={HomeScreen} />
<MainStack.Screen name="Details" component={DetailsScreen} />
</MainStack.Navigator>
);
}
I want to customize the behavior of the default back button in stack navigator locally to one screen.
In the details assuming that on the stack there are screen1|screen2, I want to pass some props from screen2 to screen1 once the button is pressed.
I spent a lot of time reading React navigation docs, searching on internet and coding but I am not able to do this.
FROM DOCS
It's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the headerLeft option to a React Element that will be rendered
I know that the issue concerns the goBack() function of the headerRight component.
I want to override the default function goBack() related to the headerLeft back button with something like navigation.navigate("previousScreen",{{..props}}).
And ( this is very important!! ) I want to use this behavior locally to a specific screen, so not globally.
I have tried with something like this but doesn't works.
export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
<HeaderBackButton
onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
title="Info"
color="#fff"
/>
),}}/>
</Stack.Navigator>
</NavigationContainer>
)}
If you are using react navigation v5, you can set the behaviour for a specific screen using :
import { HeaderBackButton } from '#react-navigation/stack';
...
options={{
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('screenName');
}}
/>
),
}}
...
You can also set as stack level using screenOptions={{}} instead.
"navigation" and "route" are also available on screen props.
options={({ navigation, route }) => ({headerLeft: ...})
For react-navigation v6, you can use setOptions inside a useEffect
import { HeaderBackButton } from '#react-navigation/elements';
...
const MyScreen = ({navigation}) => {
useEffect( () => {
navigation.setOptions({ headerShown: true,
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('MyOtherScreen');
}}
/>
)
});
} );
}
When the component is mounted, register back button press listener
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}
Then in the function, you can check and handle the action, ex:
onBackButtonPressAndroid = () => {
// Check if the current screen is focused or a subscreen is perhaps
if (this.props.navigation.isFocused()) {
if (someCondition) {
// Do a navigation to a custom screen, pass props here if needed
this.props.navigation.navigate('search')
return true
// Return true if you want to tell react navigation you've handled the back press
}
else if (this.state.offsetTop > 10) {
// Ex. for scrolling to top
this.scrollToTop()
this.setState({
offsetTop: 0,
})
return true
}
}
// Return false if you want to tell react navigation you didn't handle the back press
return false
}
Try passing navigationOptions to a specific screen :
export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen}
navigationOptions: ({ navigation }) => ({ headerLeft: (<HeaderBackButton onPress={() => {}}/>)
})}}/>
</Stack.Navigator>
</NavigationContainer>
)}
Either you can specify it there on the navigation.
Or on the Second screen, try this :
class SecondScreen extends React.Component {
static navigationOptions = {
headerLeft: (
<Button
onPress={() => alert('This is a back button!')}
title="Title"
color="#fff"
/>
),
};
}