I am working on a react native Project, where I am using both Stack navigator and Tab navigator.
The main flow of the application should be in stack navigation.I have added a button on one of the screens which is in tab navigation but the navigation is not happening!
How can I get that kindly help me out
Sample code :
const Nav=createStackNavigator({
Splash: Splash,
Login: Login,
Tab:tab
})
const Tab=createBottomNavigator({
Home:Home,
Profile:Profile // i added button in this screen want to navigate to Login
})
I am able to solve the navigation issue by creating another stack for the screens which I want in tab navigation just as below and able to achieve the navigation.
//New Stack
const Stack=createStackNavigator({
Profile:Profile,
Login:Login
})
//Old Stacks
const Tab=createBottomTabNavigator({
Home:Home,
Profile:Profile
})
const Nav=createStackNavigator({
Splash:Splash,
Login:Login,
Tab:Tab
})
Related
App using react-navigation 6
App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.
The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs
I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?
I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):
const TabNavigator = ({ route, navigation }) => {
return (
<DrawerLayout route={route} navigation={navigation}>
<Tab.Navigator>
<Tab.Screen>
...rest of tabs
</Tab.Navigator>
</DrawerLayout>
)
}
And I am navigation to another screen in DrawerLayout like this when user press on Item:
const onPressItem = () => {
// if Item is not selected then navigate to new screen in the same tab
if(TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
navigation.replace('New_Screen_In_The_Same_Tab')
navigation.setParams({
TabSelectedItem: 'New_Screen_In_The_Same_Tab',
})
}
// if tab was already selected close the drawer
closeDrawer()
}
So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render
Question is:
Could I fix it, or better to use any another solutions for this specific case?
How can i Navigate from Screen1 in Stack1 to Screen2 in Stack2 in React-Native ,Or Navigate from Stack1 to Stack2 assuming each stack has its own default start Screen
It's easy.
navigation.navigate('NameOfTheStack', {
screen: 'NameOfTheScreen',
params: {anyParams},
})
Make sure that the two stacks are housed under the same Stack Navigator.
I'm having some problem with React Navigation.
I have a tab navigator with different tabs, one of them being a StackNavigator.
Some times I wan't to navigate from Tab1 to some screen (let say A) in the StackNavigator
I wan't some action to go back to Tab1 from the A screen in the StackNavigator.
I was able to find this action dispatching a. navigate action.
But I'm unable to have a "back" transition from A to Tab1
Many thanks for your help.
Regards,
David
Add the following in your "Screen A"
static navigationOptions = ({navigation}) => ({
headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)}/>,
backBehavior: 'initialRoute'
});
Don't forget to import HeaderBackButton:
import {HeaderBackButton} from 'react-navigation';
I am trying to build an app using react-native and got stuck in navigation. I want a nested drawer menu inside my app.
For creating a drawer in react native you can use react-navigation in that there are two components such as stack navigation it is for making the navigation between the screen and for the drawer, there is Drawernavigator by this you can easily make the navigation as well as the drawer in the app in react native.
const Drawer = createDrawerNavigator({
"Here put the screen on which you need drawer."
},{
contentComponent: SideDrawer,
})
after that add the drawer to the stack navigator.
const stack = StackNavigator({
drawer:{screen: Drawer},
"And add the screens on which you don't want drawer."
}, {
headerMode: 'none',
});
It is the way you can make a drawer.
I've created a ReactNative app that uses StackNavigator. Whenever the app navigates from one screen to another, it animates the navigation. Is there a way to remove the animation or customize it? StackNavigator also adds a title to each of my screen. Is there a way to remove the screen title? I tried setting the 'title' property of navigationOptions to an empty screen and the screen was rendered without a title. However, navigating from this screen to another one will cause an exception.
e.g. the "welcome" title in these sample screens
To remove the header from a stackNavigator screen, set headerMode in StackNavigatorConfig to none. So, your stackNavigator should look like so:
import HomeScreen from 'path/to/screen';
const stack = StackNavigator({
Home: {
screen: HomeScreen
}
}, {
headerMode: 'none' // <= here
});
There is an active proposal to allow the customization of animation in react navigation. You can follow this open issue