Here is my navigation.js:
export const BottomTabs = createBottomTabNavigator({
'Specials': {
screen:SpecialsScreen
},
'Menus': {
screen:MenusScreen
},
});
export const Drawer = DrawerNavigator({
Home: { screen: Home, navigationOptions: {drawerLabel:() => null} },
Explore: { screen: BottomTabs },
'Support & Contact': { screen: ContactScreen },
Settings: { screen: Settings, navigationOptions: {drawerLabel:() => null} },
TOU: { screen: TOU, navigationOptions: {drawerLabel:() => 'Terms of Use'} },
Privacy: { screen: Privacy, navigationOptions: {drawerLabel:() => 'Privacy Policy'} },
Disclaimer: { screen: Disclaimer },
});
So the app launches and you get theHome screen:
App.js
render(){
return(<Provider store={store}><Drawer /></Provider>)
}
From there you click 'I agree' to terms of use and get sent to Explore screen:
HomeScreen.js
<TouchableOpacity onPress={() => {
this.props.navigation.navigate('Specials');
}}>
From Specials I hit the hamburger icon to toggle my drawer and go to Support & Contact from which there is a back button that I want to take me back to the previous screen:
ContactScreen.js
<TouchableOpacity onPress={() => {
this.props.navigation.goBack();
}}>
But this takes me to Home and not Explore or Specials like I would imagine. What did I miss?
Had to add stack navigators
const AppStack = createStackNavigator({ App: SpecialsScreen, MenusScreen });
const HomeStack = createStackNavigator({ Home });
Related
const drawerNavigator = createDrawerNavigator({
HomeScreen: {
screen: customstack,
navigationOptions: {drawerLabel: () => null}
},
ContactAdmin : {screen : ContactAdmin},
ResetPasswordScreen: {
screen: ResetPassword,
navigationOptions: {drawerLabel: 'Reset Password',}
},
LogoutScreen: {
screen: Logout,
navigationOptions: {drawerLabel: 'Logout',}
},
NoNetwork : { screen : NoNetwork }
},
{
initialRouteName: 'HomeScreen',
gesturesEnabled: true,
style: {
leftDrawerWidth: 40,
},
drawerPosition :"left", contentComponent:SideMenu,
contentOptions: {
activeTintColor: '#e91e63',
},
navigationOptions: ({ navigation }) => ({
headerTitle: (
<View style={{flexDirection : 'row',flex :1,justifyContent:'center'}}>
<Image style={{width: 70, height: 40,backgroundColor:'white'}} source={require('./logo.png')} />
</View>
),
headerLeft:(<TouchableOpacity onPress={() =>navigation.toggleDrawer()}>
<Image style={{width: 25, height: 25,marginLeft:15}} source={require('./menu.png')} />
</TouchableOpacity>),
headerStyle: {
backgroundColor: '#008000'
}
})
},
);
const RootStack = createStackNavigator({
SplashScreen: { screen: SplashScreen },
Login: { screen: Login },
Signup: {screen: Signup},
Home: {screen: drawerNavigator,
},
}, {
initialRouteName: 'SplashScreen',
})
const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;
Above code is used as a navigator for my application.Now in drawer navigator when i goes inside reset password and after successful operation i send to login screen like this.
await AsyncStorage.removeItem('uname', (err) => {
this.props.navigation.navigate("Login")
});
Uptil now everthing is working fine.Main problem arises when after entering new credentials in login screen.It does not takes me to HomeScreen but on resetpassword screen only.Why this is happening.After successful login i called
this.props.navigation.navigate("Home")
But then also it is going in reset password.How can i clear drawernavigation so that again after re logging with new password it don't take to previous screen i.e. ResetPassword
You will need to do a reset, here is an example from their documentation on how to do this. We want to do this because we want to prevent from going back to the previous state and instead start with a brand new navigation state.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
And a link here to the said example: https://reactnavigation.org/docs/en/stack-actions.html
I'm a beginner to react native development. At the moment I'm trying to set my navigation for the login logout process. This is my app flow right now Home -> SignIn -> Dashboard. Now when the user clicks the logout button in the dashboard it should go back to Home screen. This works well for the first time, but the problem is, if a user is already logged in, it skips the Home and SignIn and goes straight to Dashboard and if I try to log out from there it actually pushes to new Home view while keeping Dashboard in the stack and when I SignIn it does a pop transition to Dashboard showing the old state data. I did some digging and its said that react doesn't have provision to pop up out to specific view and we may have to use a hack to replace the screen but I'm not sure how to proceed on that. Below is my current code for the stack navigator and logout process.
const Navigator = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
header: null
})
},
SignIn: {
screen: SignIn,
navigationOptions: {
header: null
}
},
Dashboard: {
screen: Dashboard,
navigationOptions: {
header: null
}
}
});
const Drawer = DrawerNavigator(
{ Navigator: { screen: Navigator } },
{ contentComponent: NavigationDrawer }
);
//In Dashboard
logoutUser = () => {
//Perform API call to logout user
this.props.navigation.navigate("Home");
}
You can use the SwitchNavigator,
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Optons and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
},
{
contentComponent: DrawerContent
});
const onboardingStackNavigator = createStackNavigator( {
Home: {
screen: Login,
navigationOptions: ({ navigation }) => ({
title: "Login",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
headerTintColor: headerTintColor,
})
},
Signup: {
screen: Signup,
navigationOptions: ({ navigation }) => ({
title: "SignUp",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
})
},},
{
initialRouteName: 'Home',
}
)
const AppNavigator = createAnimatedSwitchNavigator(
{
onboarding:onboardingStackNavigator,
Drawer: {
screen: DrawerNavigatorExample
}
},
{
initialRouteName: 'onboarding',
transition: (
<Transition.In type='fade'></Transition.In>
)
},
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
I have a link from "Test" page to "TestDetails" page. but When i click this.props.navigation.goBack(null) on "TestDetails" page , it takes me to the first page which is "Home" instead of "Test". Here's my index.js. I really dont know how arrived at this though. Pls what am I doing wrong
const HomeScreen = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({navigation}) => ({
})
}
});
const LoginScreen = createStackNavigator({
Home: {
screen: Login,
navigationOptions: ({navigation}) => ({
})
}
});
const SignupScreen = createStackNavigator({
Signup: {
screen: Signup,
navigationOptions: ({navigation}) => ({
})
}
});
const TestsScreen = createStackNavigator({
Tests: {
screen: Tests,
navigationOptions: ({navigation}) => ({
headerTitleStyle: {
fontWeight: '400',
color: '#333',
fontFamily: 'Nunito-Regular',
fontSize: 18
},
headerStyle: {
elevation: 0, //remove shadow on Android
shadowOpacity: 0, //remove shadow on iOS
fontWeight: 400,
},
title: "Consumer tests",
headerLeft:(<Icon.Button name="menu" size={35}
backgroundColor="transparent" color="#2a486c" onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())}>
</Icon.Button>
),
})
}
});
const TestDetailsScreen = createStackNavigator({
TestDetails: {
screen: TestDetails,
navigationOptions: ({navigation}) => ({
})
}
});
const SettingsScreen = createStackNavigator({
Settings: {
screen: Settings,
navigationOptions: ({navigation}) => ({
title: "Settings",
headerLeft:(<Icon.Button name="arrow-back" backgroundColor="transparent" color="black" onPress={() => navigation.dismiss()}>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>
),
})
},
});
const drawernav = createDrawerNavigator({
Home: {
screen: HomeScreen,
},
Login: {
screen: LoginScreen,
},
SignUp: {
screen: SignupScreen,
},
Tests: {
screen: TestsScreen,
},
TestDetails: {
screen: TestDetailsScreen,
},
Settings: {
screen: SettingsScreen,
},
},{
contentComponent: SideMenu,
});
AppRegistry.registerComponent(appName, () => createAppContainer(drawernav));
Pls what am I doing wrong
const LoginScreen = createStackNavigator({
Home: {
screen: Login,
navigationOptions: ({navigation}) => ({
})
}
})
why Home: here?
could you add info from console or you are not receiving error or warnings?
Remember always refer official guides https://facebook.github.io/react-native/docs/navigation
I have confirmed the react-native-navigation definition, like below code snippet.
goBack() and goBack(null) same that the same!
back to your question:
like #Michael post, you'd better check your navigation stack fist
export interface NavigationScreenProp<S, P = NavigationParams> {
state: S;
dispatch: NavigationDispatch;
goBack: (routeKey?: string | null) => boolean;
dismiss: () => boolean;
navigate(options: {
routeName:
| string
| {
routeName: string;
params?: NavigationParams;
action?: NavigationNavigateAction;
key?: string;
};
params?: NavigationParams;
action?: NavigationAction;
key?: string;
}): boolean;
I saw other answers regarding this issue but I can't find solution.
I want to show drawer always above app screen and above header. Instead drawer is always bellow header.
What am I doing wrong here:
const AppNavigation = createStackNavigator(
{
Main: { screen: Main, navigationOptions: {
title: "Main"
} },
Home: { screen: Home, navigationOptions: {
title: "Home"
} }
},
{
initialRouteName: "Main"
}
);
const DrawerNavigation = createDrawerNavigator(
{
Home: Home,
Main: Main
},
{
initialRouteName: "Main"
}
);
App = createStackNavigator({
drawer: {
screen: DrawerNavigation,
},
app: {
screen: AppNavigation
}
}, {
initialRouteName: 'drawer',
navigationOptions: ({navigation}) => ({
headerStyle: {backgroundColor: '#a9a9a9'},
title: 'Welcome!',
headerTintColor: 'white',
headerLeft: <Text onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())}>Menu</Text>
})
});
export default () => (
<View style={{ flex: 1 }}>
<App />
</View>
Our app is similar to this. You can make the drawer be over the header with react-navigation if it is the <Root /> component of your app (the one you import into index.js). For example:
export const Root = DrawerNavigator({
Tabs: {
screen: Tabs,
title: 'Tabs'
},
STACK1: {
screen: STACK1,
title: 'STACK1',
},
STACK2: {
screen: STACK2,
title: 'STACK2',
},
});
That will give you something like this:
I am a newbie to react native. I am using Login and Home screens in a stack navigator in which home screen consist a tab navigator with each tab having 2 or 3 screens; so i added a stack navigator inside that tab navigator (3 Level navigator).
app.js
export const SimpleApp = StackNavigator({
login: { screen: LoginPage },
homepage: { screen : HomePage },
});
home.js
export const MyApp = TabNavigator({
Asset: {
screen: AssetScreen,
navigationOptions: {
tabBarLabel: 'Asset',
tabBarIcon: (
<Image source={require('../logos/tab_assets.png')}
style={[styles.icon, {color: '#ffffff'}]}
/>
)
},
},
Sensors: {
screen: sensorsStack,
navigationOptions: {
tabBarLabel: 'Sensor',
tabBarIcon: (
<Image source={require('../logos/tab_sensor.png')}
style={[styles.icon, {color: '#ffffff'}]}
/>
)
},
},
Settings: {
screen: settingStack,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: (
<Image source={require('../logos/tab_settings.png')}
style={[styles.icon, {color: '#ffffff'}]}
/>
)
},
},
}
With again stack navigator for sensors and settings tab.
export const sensorsStack = StackNavigator({
sensors : { screen: SensorScreen },
sensorDetails : { screen: SensorDetails }
});
export const settingStack = StackNavigator({
settings: { screen: SettingsScreen },
about : { screen: About },
environment : { screen: Environment }
});
I have signout button in settingsScreen, by clicking on it i want to navigate the screen to login which is in app.js stack.
I have tried using nagivation.back() in settingsScreen but it is going back to homepage not login. Is there any way i can achieve this? or any other way to provide login access to my app.