In my application I've 3 stack like
StackOne
export const StackOne = createStackNavigator({
OneScreen: { screen:one },
TwoScreen: { screen:two },
ThreeScreen: { screen:three },
}, { initialRouteName: 'OneScreen', }
);
StackTwo
export const StackTwo = createStackNavigator({
OneScreenTwo: { screen:oneTwo },
TwoScreenTwo: { screen:twoTwo },
ThreeScreenTwo: { screen:threeTwo },
}, { initialRouteName: 'OneScreenTwo', }
);
I use the drawer navigation like this.
MainDrawer
const MainDrawer = createDrawerNavigator(
{
One: { screen: StackOne },
Two: { screen: StackTwo },
Other: { screen: OtherScreen},
},
{}
);
All working fine. manage drawer - to stack very well
only issue is when I'm in StackOne's ScreenTwo of swipe the left- right still open the drawer menu.
not only this screen in every screen open drawer menu.
I try several link but can't find the success.
Hope some one help.
I follow this link Navigation
Thanks
You need to specify navigationOptions on the StackNavigator instead of TwoScreen etc, as otherwise it'd be configuring the StackNavigator instead of the DrawerNavigator:
StackOne.navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});
Working example: https://snack.expo.io/#riwu/stack-nav-lock-drawer
export const StackOne = createStackNavigator({
OneScreen: { screen:one },
TwoScreen: { screen:two },
ThreeScreen: { screen:three },
}, { initialRouteName: 'OneScreen', }
);
StackOne.navigationOptions = ({ navigation }) => {
let drawerLockMode = 'unlocked';
if (navigation.state.routes[navigation.state.index] != 'OneScreen') {
drawerLockMode = 'locked-closed';
}
return {
drawerLockMode,
};
};
export const StackTwo = createStackNavigator({
OneScreenTwo: { screen:oneTwo },
TwoScreenTwo: { screen:twoTwo },
ThreeScreenTwo: { screen:threeTwo },
}, { initialRouteName: 'OneScreenTwo', }
);
StackTwo .navigationOptions = ({ navigation }) => {
let drawerLockMode = 'unlocked';
if (navigation.state.routes[navigation.state.index] != 'OneScreenTwo') {
drawerLockMode = 'locked-closed';
}
return {
drawerLockMode,
};
};
Create navigation option & issue resolved.
Related
I currently have a navigation structure that looks like this:
Newsfeed (in RootBottomTabNavigator)
NewsfeedItem
CommentModal
Search (in RootBottomTabNavigator)
const NewsfeedStack = createStackNavigator(
{
Newsfeed: {
screen: NewsfeedScreen,
},
NewsfeedItem: {
screen: NewsfeedItemScreen,
},
}
);
const NewsfeedItemStack = createStackNavigator(
{
Main: {
screen: NewsfeedStack,
},
CommentModal: {
screen: CommentModal,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
const SearchStack = createStackNavigator(
{
Search: { screen: SearchScreen }
}
)
const Tabs = createBottomTabNavigator(
{
Newsfeed: { screen: NewsfeedStack },
Search: { screen: SearchStack },
},
);
Two issues I could not resolve with this set up are:
Hiding the BottomTabs on the NewsfeedItem and CommentModal screens.
Clicking on the tab to return to the initial screen no longer works because the navigation stack thinks that the NewsfeedItem is the initial screen.
Is there a setup to fix these issues?
i want to logout from a component inside a stacknavigator and the stacknavigator is inside a bottomtabsnavigator which is finally inside a stacknavigator that houses two switchnavigator
i tried this.props.navigation.navigate(component) and it failed and several other ways i am a bit stuck and frustrated any help will be greatly appreciated as i am new to react native and react navigation
const AddContactTab = createStackNavigator({
AddContact: AddContactsActivity,
});
const ManageContactsTab = createStackNavigator({
ManageContacts: ManageContactsActivity,
viewContact: ViewSingleContactsActivity,
editContacts: EditContactsActivity
});
const Tabs = createBottomTabNavigator({
ManageContacts: ManageContactsTab,
AddContact: AddContactTab
}, {
tabBarOptions: {
activeBackgroundColor:'#3F51B5',
activeTintColor:'#ccc',
showLabel:false,
style: {
backgroundColor:'white',
color:'white'
},
tabStyle:{
},
// labelStyle:{
// color:'white',
// fontWeight: 'bolder',
// fontSize: 14
// }
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: () => {
const { routeName } = navigation.state;
let tabName;
tabName = routeName === 'AddContact' ? 'plus' : 'home';
return <Icon name={tabName} size={24}
color="grey" />
}
})
},
);
export default createAppContainer(Tabs);
const MainStack = createStackNavigator(
{
Home: { screen: HomeActivity },
Register: {screen: RegistrationActivity}
},
{
initialRouteName: 'Home',
}
);
const AuthStack = createStackNavigator(
{
Dashboard: { screen: DashboardActivity },
},
{
initialRouteName: 'Dashboard',
}
);
const RootStack = createSwitchNavigator({
initialLoading: InitialLoadingActivity,
auth: AuthStack,
all: MainStack,
},
{
initialRouteName: 'initialLoading',
});
now i want to logout from addcontactsactivity to the initialroute of the AuthStack stack navigator....please if i am not clear enough let me know so i can edit my question
Regarding documentation I guess you can try:
this.props.navigation.dispatch(StackActions.popToTop())
The popToTop action takes you back to the first screen in the stack, dismissing all the others.
Documentation
You need to reset your present stack.
Set the present stack index to 0
Got to the parent stack which has access of all the screens
Navigate to that screen.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
Edit : Use this if it works for you.
this.props.navigation.dispatch(
{
type: 'Navigation/NAVIGATE',
routeName: 'GoToANavigator',
action: {
type: 'Navigation/NAVIGATE',
routeName: 'GoToAScreenInANavigator',
}
}
);
ref
ref 2
I have been having some problems passing parameters from a screen in a switchNavigator to another in a TabNavigator
setvalue(response){
this.setState({profile :response})
console.warn(this.state.profile);
this.state.navigate('Navigators',{profile: profile})
}
The profile contains a JSON object of profile details. The navigation sends the date to the 'Navigators' screen which is just a TabNavigator
const Navigators = createAppContainer(Userstack);
export default RootStack = createSwitchNavigator(
{
Home: {
screen: Login
},
Register: {
screen: Registration
},
Navigators: {
screen: Navigators
},
},
{
initialRouteName: 'Home'
}
);
How the TabNavigator is created.
export default Userstack = createBottomTabNavigator(
{
User: {
screen: Profile
},
Discovery: {
screen: DiscoveryNavigator
},
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'User') {
iconName = `md-contact`;
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Discovery') {
iconName = `md-search`;
}
return <IconComponent name={iconName} size={27} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#00FA9A',
inactiveTintColor: 'black',
},
}
);
The screen I wish to access the profile information is
export default class Profile extends Component {
constructor(props){
super(props);
console.warn(props)
this.State = {
profile: this.props.navigation.params.profile
}
}
Did you try this.props.navigation.state.params?
According to Reference: https://reactnavigation.org/docs/params.html,
You can also directly access the params object with this.props.navigation.state.params. This may be null if no params were supplied, and so it's usually easier to just use getParam so you don't have to deal with that case.
I'm using react-navigation.
I'm using createStackNavigator inside createBottomTabNavigator.
I want to hide tab bar for SignInScreen that is inside AccountTab but it's not working.
export default createBottomTabNavigator({
HomeTab: { screen: createStackNavigator ({
HomeTabScreen : { screen:HomeTabScreen },
ProductScreen : { screen:ProductScreen },
}),
initialRouteName: 'HomeTabScreen',
},
AccountTab: { screen: createStackNavigator ({
AccountTabScreen : { screen:AccountTabScreen },
RegisterScreen : { screen:RegisterScreen },
SignInScreen : { screen:SignInScreen },
}),
initialRouteName: 'AccountTabScreen',
},
},
{
initialRouteName: 'HomeTab',
navigationOptions: ({ navigation }) => ({
tabBarLabel: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let name;
if (routeName === 'HomeTab') {
name = "Home";
} else {
name = "Account";
}
return <Text style={[styles.titleStyle, focused ? styles.titleSelectedStyle : {}]}>{name}</Text>;
},
}),
});
I'm try three method but it's not working.
methods are following
1) I was applied tabBarVisible:false in above code so it hide tab bar for all screen.
2) I was applied function for tabBarVisible like tabBarLabel function in above code.
3) I was applied tabBarVisible:false in navigationOptions inside SignInScreen.
How to hide tabbar for SignInScreen?
There is a git thread that might help you:
https://github.com/react-navigation/react-navigation-tabs/issues/19#issuecomment-410857516
Basically you should try changing your AccountTab navigation options like this:
AccountTab: {
screen: createStackNavigator ({
AccountTabScreen : { screen:AccountTabScreen },
RegisterScreen : { screen:RegisterScreen },
SignInScreen : { screen:SignInScreen },
}),
initialRouteName: 'AccountTabScreen',
navigationOptions: ({navigation}) => {
let { routeName } = navigation.state.routes[navigation.state.index];
let navigationOptions = {};
if (routeName === 'SignInScreen') {
navigationOptions.tabBarVisible = false;
}
return navigationOptions;
}
},
const NestedNavigator = StackNavigator({
ScreenOne: {
screen: ScreenOneComponent
},
ScreenTwo: {
screen: ScreenTwoComponent
}
});
class NestedNavigatorWrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<DashboardNavigator screenProps={{ rootNavigation: this.props.navigation }} />
);
}
}
const AppNavigator = StackNavigator({
Home: {
screen: HomeComponent
},
Nested: {
screen: NestedNavigatorWrapper
}
});
If you want to hide tabNavigation in the screen2(part of the StackNavigator then,
navigationOptions: ({navigation}) => {
let {routeName} = navigation.state.routes[navigation.state.index];
let navigationOptions = {};
console.log('Route Name=' + JSON.stringify(routeName));
if (routeName === 'Screen') {
navigationOptions.tabBarVisible = false;
}
return navigationOptions;
I want to navigate to to the same screen but with different params.
so imagine
navigate to MyRouteName
on this screen click a button which should navigate me to MyRouteName but with different params.
currently I've tried
this.props.navigation.navigate('MyRouteName', {param1: 'new val'})
and
const setParamsAction = NavigationActions.setParams({
params: { param1: 'new val'},
key: 'mrn-new_val',
})
this.props.navigation.dispatch(setParamsAction)
Neither work. Neither the docs nor github issues I found provide clear guidance on this.
How do i accomplish this?
Update: in response to comment below
I'm using a stacked Navigator as my root, which leads to a DrawerNavigator
// MyDrawer.js
// ...
const MyDrawer = DrawerNavigator(
{
MyRouteName: {
screen: MyScreen,
},
},
{
initialRouteName: 'MyRouteName',
contentOptions: {
activeTintColor: '#e91e63',
},
contentComponent: props => <DrawerScreen {...props}/>,
}
);
export default MyDrawer;
// MyScreen.js
class MyScreen extends React.Component{
//..
//.. stuff goes here
//..
drillDown(newVal){
const setParamsAction = NavigationActions.setParams({
params: { param1: newVal },
key: 'ms-${newVal}',
})
this.props.navigation.dispatch(setParamsAction)
}
//..
//.. more stuff
//..
}
My final implementation based on #benneygenel's answer below.
const MyDrawer = DrawerNavigator({
MyRouteName: {
screen: StackNavigator({
DrillDown:{
screen: MyScreen,
},
}, {
headerMode: 'none',
}),
},
});
(MyScreen defines it's own header)
You can use a StackNavigator inside the Drawer and navigate like a normal StackNavigator.
const MyDrawer = DrawerNavigator({
MyRouteName: {
screen: StackNavigator({
DrillDown: {
screen: MyScreen
}
}),
},
});
export default MyDrawer;