I have a drawer navigation like that
const DrawerNavigatorRoutes = (props) => {
return (
<Drawer.Navigator>
<Drawer.Screen
name="homeScreenStack"
component={homeScreenStack}
/>
<Drawer.Screen
name="Profile"
component={profileScreenStack}
/>
</Drawer.Navigator>
);
};
When I click homeScreenStack the stack navigation is like that
const homeScreenStack = ({ navigation }) => {
return (
<Stack.Navigator initialRouteName="Dashboard">
<Stack.Screen
name="Dashboard"
component={Dashboard}
/>
<Stack.Screen
name="screen2"
component={screen2}
/>
....
</Stack.Navigator>
);
};
I also have some tab navigation in homeScreenStack So I want that when ever I click on homeScreenStack from drawer navigation Dashboard screen will open But in current scenario it didn't reset the stack. I am using react navigation 5
If I'm reading what you're asking correctly, you should be able to use the unmountOnBlur and set that to true on your drawer navigator to reset your stack. Then when you navigate back to your drawer navigator it will reset your stack navigator. So your code would look like:
const DrawerNavigatorRoutes = (props) => {
return (
<Drawer.Navigator
unmountOnBlur: true,
>
<Drawer.Screen
name="homeScreenStack"
component={homeScreenStack}
/>
<Drawer.Screen
name="Profile"
component={profileScreenStack}
/>
</Drawer.Navigator>
);
};
Related
Here is my tab navigator present in MainNavigator.js,
const MainNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen
name={'Home'}
component={Home} />
<Tab.Screen
name={'About'}
component={About} />
<Tab.Screen
name={'Profile'}
component={Profile} />
</Tab.Navigator>
)
}
I have an AuthNavigator.js which includes a stack navigator,
const AuthNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name={'Login'} component={Login} />
<Stack.Screen name={'Signup'} component={Signup} />
</Stack.Navigator>
}
So, I have a logout button on my Profile Screen in Tab Navigator. I want to Navigate to Login Screen in AuthNavigator with the onPress event. Here is how I tried this,
const Profile = ({navigation}) => {
const logoutHandler = () => {
navigation.navigate('Login');
}
<SafeAreaView>
<TouchableOpacity onPress={logoutHandler}>
<Text>Logout</Text>
</TouchableOpacity>
</SafeAreaView>
}
However, this is not working. As a beginner to React Native I have no idea how to link this Login route into a Stack screen. Really appreciate it if somebody could save my day. Thankyou so much.
Manage 1 state globally (using redux or some other state management tool) and that is isAuthenticated.
Then in your App.js or where ever you have defined your root navigator do the changes likewise : -
<NavigationContainer>
{ isAuthenticated ? <AuthRoutes /> : <UnAuthRoute />
</NavigationContainer>
On login and logout you'll have to update this isAuthenticated state and then routes will be taken care as per the state
I want to achieve twitter like tab and drawer navigation, where there is a bottom tab bar in the home page and a drawer on the side. However, in twitter when clicking on the left drawer, it opens a page with the left drawer disabled and instead the page will have a back navigation that leads to the home page. This is the behavior I want, and how can I achieve that? (I don't want bottom tab in any of the page I opened from the side drawer, different from twitter)
Following is my code:
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
function Home() {
const { signOut } = useAuth();
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Chat" component={Chat} />
</Tab.Navigator>
);
}
function DrawerHome() {
return (
<Drawer.Navigator>
<Drawer.Screen
name="Start"
component={Home}
options={({ route }) => ({
headerTitle: getHeaderTitle(route),
})}
/>
<Drawer.Screen name="Friends" component={FriendsList} />
</Drawer.Navigator>
);
}
I have developed a bottomTabNavigator in react-native and I have 3 main routes which I want to show in my bottomtabnavigator which are 1) Home, 2) Profile, 3) Chat, So I wrote the following code:
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const Navigation = () => {
return (
<>
<Tab.Navigator>
{user.authLoadingState ? (
<Tab.Screen name="Home" component={LoadingScreen} />
) : user.isLoggedIn ? (
<>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
<Tab.Screen
name="Chat"
component={ChatScreen}
/>
<Stack.Screen name="Update" component={UpdateScreen} /> // this is the screen I don't want in my bottomTab but I want to navigate to it using useNavigation hook.
</>
) : (
<>
<Stack.Screen name="First" component={FirstScreen} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={RegisterScreen} />
</>
)}
</Tab.Navigator>
</>
);
};
Now, when I go to my Profile screen, I have a button which (should) navigate to another screen which is not mentioned in my Tab Navigator definition, how can I navigate to that screen because obviously I do not want to fill my bottomTabNavigator with different screens, I only want to keep the main screens in my bottomTabNavigator not all. When I was using Stack.Navigator alone, it was fine because I could just keep all my screens under <Stack.Navigator></Stack.Navigator> and navigate to any screen using navigator.navigate(nameOfScreen) with const navigator = useNavigation(). But now, if a screen which is not mentioned inside Tab.Navigator will throw an error if I navigate saying Screen does not exists. Is there any thing I could do to make it work?
to navigate between tab and stack screen you can do this way :
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen name="Profile Screen" component={StackScreens} />
<Tab.Screen
name="Chat"
component={ChatScreen}
/>
</Tab.Navigator>
</NavigationContainer>
)
function StackScreens() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }} >
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Update" component={UpdateScreen} /> // this is the screen I don't want in my bottomTab but I want to navigate to it using useNavigation hook.
</Stack.Navigator>
);
}
}
I'm not sure if it is exactly that you want, but you can now access from "Profile" to the "UpdateScreen" without showing it in the bottomTabNavigator
Trying to update my app to react navigation 5 and been confronting some issues.
First of all, the header does not show up. Snips from the code:
[from App.js]
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeScreen} options={{ title:'some title' }}/>
<Tab.Screen name="Upload" component={UploadScreen} />
<Tab.Screen name="Find" component={FindScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
and the style of the current screen:
<View style={{flex:1, flexDirection:'column',justifyContent:'space-between'}}>
Here is a screenshot of the app on an Android emulator (and it looks the same on my phone):
As you can see, the header is not shown, the tab navgiation does not right, and so are the buttons (something changed about their background). I did not change anything in the app besides upgrading to react-navigation 5..
Thanks for the help!
Tab navigators do not have header support. You have to wrap your tab navigator inside a stack navigator.
import { createStackNavigator } from "#react-navigation/stack";
// ... other imports
export const App = () => {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}
const Stack = createStackNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Tabs" component={TabNavigator} />
</Stack.Navigator>
);
}
const Tab = createTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Upload" component={UploadScreen} />
<Tab.Screen name="Find" component={FindScreen} />
</Tab.Navigator>
);
}
I have a Navigation Drawer which should appear in all my screen(Except for the Splash screen).
I've got it that way:
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="EstateDetails" component={Screens.EstateDetails} />
<Stack.Screen name="Tour" component={Screens.Tour} />
<Stack.Screen name="Comparison" component={Screens.Comparison} />
<Stack.Screen name="Blog" component={Screens.Blog} />
<Stack.Screen name="Auth" component={Screens.Auth} />
</Stack.Navigator>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="HomeScreen" component={Screens.Home} />
<Drawer.Screen name="stack" component={StackNavigator} />
<Drawer.Screen name="RegisterEstate" component={Screens.RegisterEstate} />
<Drawer.Screen name="Filter" component={Screens.Filter} />
<Drawer.Screen name="Conditions" component={Screens.Conditions} />
<Drawer.Screen name="Judicial" component={Screens.Judicial} />
<Drawer.Screen name="ContactUs" component={Screens.ContactUs} />
<Drawer.Screen name="ReportBugs" component={Screens.ReportBugs} />
</Drawer.Navigator>
)
};
export const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Screens.Splash}/>
<Stack.Screen name="Home" component={DrawerNavigator}/>
</Stack.Navigator>
</NavigationContainer>
);
};
In this case, all the okay only stack screens act as drawer screen.
(The screen only loads once and shows the initial load next time, like blog screens).
I need to have the cursor on all pages except splash and to stack some of my pages (like dynamic pages that don't have the same content)
If you want to display same drawer in all other screens just pass {DrawerNavigator} to all other screens where you want to show the Drawer.So in your example if you want to show Drawer in Tour and Blog screen just add
<Stack.Screen name="Blog " component={DrawerNavigator} />
<Stack.Screen name="Tour" component={DrawerNavigator} />
Now you can access in Blog and Tour screen.
If you want to show a different Drawer in other screens then Create a new function.