I have a Drawer Navigator with 2 screens, Home and Profile. What I need is, when I click in a TouchaleOpacity, change the screen from home to profile, how can I do this?
import { DrawerNavigator } from 'react-navigation';
import JsHome from './JsHome'
import JsProfile from './JsProfile'
const DrawerExample = DrawerNavigator({
JsHome : {
screen: JsHome
},
JsProfile : {
screen: JsProfile
},
}
PS: the TouchableOpacity are in another js file
each screen has navigation props. use this.props.navigation.navigate('JsProfile') in your touchable opacity
Related
I have a root StackNavigator which has other two navigator
1 stack navigator (login, signup)
2 tab navigator (home, profile, settings)
so when user login success how can I nevigate to tabNavigator from rootNavigator?
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation'
import authNavi from './AuthRoute'; /// this is StackNavigator with login signup screen
import appNavi from './AppRoute' /// this is tabNAvigator with profile home setting screen
const RootRoute = createStackNavigator({
auth: {screen: authNavi },
app: {screen: appNavi }
})
const RootNavi = createAppContainer(RootRoute);
export default RootNavi; /// this is rootNavigator whih is rendered in App.js
here is the image of App.js and RootRouter
You could navigate from your auth stack to you tabNavigator by:
this.props.navigation.navigate('app');
Suggestion
I suugest you replace your main StackNavigator by a SwitchNavigator ... cause after the user is logged in successully, you won't need them to have access to your auth flow again.
By using Switch Navigator you can achieve this.
import createSwitchNavigator from react-navigation
eg:
import {
createAppContainer,
createStackNavigator,
...
createSwitchNavigator
} from "react-navigation";
After that add switch navigator.
...
const switchNavigator = createSwitchNavigator(
{
LoginStack: authNavi,
AppTabs: appNavi
},
{ headerMode: "none", initialRouteName: "LoginStack" }
);
const App = createAppContainer(switchNavigator);
export default App;
And when you want to change to home, use this
this.props.navigation.navigate("AppTabs");
It will switch the navigation to TabBar navigation.
I'm trying to have one of the tab bar items open as modal when clicked, I'm currently using expo. I've read this: How do i make a TabNavigator button push a modal screen with React Navigation. However, I'm still learning React Native and I'm honestly not sure how to use this using expo navigation. Currently, I have created a stack navigator using "createStackNavigator" for each of the screens. And lastly, I have exported a bottom tab navigator including all of the stacks:
export default createBottomTabNavigator({
Tab1Stack,
Tab2Stack,
Tab3Stack,
Tab4Stack
});
I need Tab4 to open as a modal. Can someone people help me with this? Thank you in advance!!
Note this was built for "react-navigation": "3.3.0" so your mileage my vary for more recent versions of Expo and react-navigation.
To make a modal appear when you tap on the last tab in a TabNavigator requires you to nest your TabNavigator inside a StackNavigator.
So we could set up something like this:
#App.js
A simple App.js.
import React from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
};
}
render () {
return (
<AppContainer />
);
}
}
#MainNavigation.js
This file contains two navigators. A TabNavigator and a StackNavigator. The TabNavigator is nested inside the StackNavigator.
To be able to show the ModalScreen we have to override the tabBarOnPress function inside the defaultNavigationOptions which is inside the config for the TabNavigator.
We need to check the navigation.state.key to see where we are navigating too. If we are going to Tab3 we can intercept the call and navigate to the ModalScreen instead. Otherwise we use the defaultHandler and go to the tab that was tapped.
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import ModalScreen from './ModalScreen';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
const screens = {
Tab1: {
screen: Screen1
},
Tab2: {
screen: Screen2
},
Tab3: {
screen: Screen3
}
};
const config = {
headerMode: 'none',
initialRouteName: 'Tab1',
defaultNavigationOptions: {
tabBarOnPress: (data) => {
// this is where the magic happens
const { navigation, defaultHandler } = data;
// we check to see if the navigation key is going to be on Tab3
if (navigation.state.key === 'Tab3') {
// if it is we show the ModalScreen by navigating to it
navigation.navigate('ModalScreen');
} else {
// otherwise we call the defaultHandler and navigate to the tab we pressed
defaultHandler(navigation.state.key);
}
}
}
};
const TabNavigator = createBottomTabNavigator(screens, config);
const stackScreens = {
Tabs: {
screen: TabNavigator
},
ModalScreen: {
screen: ModalScreen
}
};
//we need to set the mode to be modal
const stackConfig = {
headerMode: 'none',
initialRouteName: 'Tabs',
mode: 'modal'
};
const MainNavigator = createStackNavigator(stackScreens, stackConfig);
export default createAppContainer(MainNavigator);
#Screen.js
A simple screen for each tab
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class Screen extends React.Component {
render () {
return (
<View style={styles.container}>
<Text>Tab Screen</Text>
</View>
);
}
}
#ModalScreen
This screen is the modal that will appear when the tab for the third screen is tapped.
As it is part of the StackNavigator, defined above, it has access to the navigation prop. We set up a simple button that when pressed calls this.props.navigation.goBack() This will dismiss the modal.
import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
export default class Screen extends React.Component {
render () {
return (
<View style={styles.container}>
<Text>Modal Screen</Text>
<Button
title={'close modal'}
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
Here is a snack with it working, https://snack.expo.io/#andypandy/show-modal-on-tab-press, hopefully it will show you how to set it up.
I am making an react native android app in which i have both stack navigator and drawer navigator like this.
const orderstack = createStackNavigator({
OrderHistory : {screen : OrderHistory},
HistoryDetails: {screen : HistoryDetails},
TrackOrder: {screen : TrackOrder},
},{
headerMode: 'none',
navigationOptions:({navigation}) => ({
header: null,
}),
})
and drawer is
const drawerNavigator = createDrawerNavigator({
HomeScreen: {
screen: orderstack,
},
ProfileScreen:{
screen: profile,
},
MOrderScreen: {
screen: customstack,
},{}
}
Now when i go to HomeScreen in drawer then it should open orderstack which is stack navigator.This is working fine until i am not in the HomeScreen inside drawer,i mean,suppose i am inside HomeScreen and inside that i am in HistoryDetails then when i press again HomeScreen in drawer then it does not goes in OrderHistory.I tried setting initialRoutename but it does not works?But if i click from MOrderScreen or ProfileScreen then its working fine and OrderHistory is opening first.
The drawer only knows that it has to navigate to the "orderstack" screen, in this case, is a stacknavigator, but when you are in HistoryDetails or TrackOrder , you are still in the "orderstack" screen , the drawer doesn't handle deep navigation. It only navigates between the screens that you have provided it. you need to define a custom contentcomponent to handle navigation in your way. This behaviour of going back to the initial screen is already present in tabnavigator of react anvigation 3.0 so you should try it out to see if it fits your needs.
Check here for how to implement a customcomponent that resets the stack navigator , or just use a tabnavigator wich is the recommended for reseting screens (that's how youtube app does it)
How can I integrate redux with navigation drawer using react navigation in react native. here is my code without redux
import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { StackNavigator, DrawerNavigator } from "react-navigation";
import DrawerMenu from "./containers/DrawerMenu";
import BarChart from "./containers/BarChart";
import PieChart from "./containers/PieChart";
import LineChart from "./containers/LineChart";
const MainScreenNavigator = StackNavigator ({
bChart: { screen: BarChart },
pChart: { screen: PieChart },
lChart: { screen: LineChart }
});
const Drawer = DrawerNavigator (
{
Main: { screen: MainScreenNavigator }
},
{
contentComponent: DrawerMenu,
drawerWidth: 200
}
);
export default Drawer;
Its not suggested to connect React Navigation with Redux (redux-integration). Personally, I never had any problems when they are seperated even when I use several nested navigators. You don't have to keep the navigator in the store. You should consider seperating them.
I used TabNavigation for my app. In some screen, I want it only display on portrait orientation, and others are landscape. I've found react-native-orientation and try in my screens:
Screen 1
import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'
export default Screen1 extends React.PureComponent{
componentDidMount(){
Orientation.lockToLandscape();
}
componentWillUnmount(){
Orientation.unlockAllOrientations();
}
render() {
return(<Text>Screen 1</Text>);
}
}
Screen 2
import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'
export default Screen2 extends React.PureComponent{
componentDidMount(){
Orientation.lockToPortrait();
}
componentWillUnmount(){
Orientation.unlockAllOrientations();
}
render() {
return(<Text>Screen 2</Text>);
}
}
Tab Navigator
const AppNavigator = TabNavigator( {
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
});
But it always portrait, which mean that its orientation always set base on orientation of last screen I add in TabNavigator. Any help is appreciate, thank you in advance!
Edit 1
I've try StackNavigation instead, and it work. Still don't know why it's not run with TabNavigation.
It has been long time since I asked this questions, and react-navigation is upgrade to version 3. My solution for this problem is set orientation for tab each time it's pressed, cause tab screen isn't unmount when you click on other tab. To fix that, you can add tabBarOnPress to your navigationOptions of your screen like this
import Orientation from 'react-native-orientation';
...
class TabbarScreen1 extends Component {
static navigationOptions = {
...,
tabBarOnPress: ({ defaultHandler }) => {
// Orientation.lockToLandscape();
Orientation.lockToPortrait();
defaultHandler();
},
}
...
}