CODEWITHSUNDEEP
androidiosreactjsreact-nativereact-navigation
Adam Arcaro
Adam Arcaro

Reputation: 471

React-Native: Navigate to drawer within Stack navigator

My app currently uses a drawer navigator as its main navigation.

One of the drawer screens is a StackNavigator. The first screen within this nested StackNavigator contains a button which should direct the user to a DrawerNavigator screen.

How can I have a button within my StackNavigator screen "Home" that navigates to its parent DrawerNavigator screen "Logs"?

Stack Navigator (Home is component with button that should direct to Drawer screen 'Logs'):

const Stack = createStackNavigator({
    Home: {
        screen: Home,
        navigationOptions: { header: null }
    },
    Settings: {
        screen: Settings,
        navigationOptions: { header: null }
    }
});

Stack with header:

class StackWithHeader extends Component {
    render() {
        return (
            <Container>
                <Head title="Consultation" drawerOpen={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />
                <Stack/>
            </Container>
        )
    }
}

Drawer Navigator with nested Stack Navigator:

const Drawer = createDrawerNavigator(
    {
        Head: {
            screen: StackWithHeader,
            navigationOptions: ({ navigation }) => ({
                title: "Head",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
        Logs: {
            screen: Logs,
            navigationOptions: ({ navigation }) => ({
                title: "Logs",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
    }
);

Upvotes: 0

Views: 1476

Answers (1)

tuan.tran
tuan.tran

Reputation: 1881

Using NavigationActions may help you in this case

import { NavigationActions } from 'react-navigation';

...
_onPress = () => {
  this.props.navigation.dispatch(
    NavigationActions.navigate({
      routeName: 'Logs',
      params: {},
      // optional, you can navigate to sub-route of Logs here by
      // action: NavigationActions.navigate({ routeName: 'SubRoute' }),
    })
  )
}

By the way, I recommend you to integrate redux with react-navigation to simply navigate. Refer here

Upvotes: 0

Related Questions