In React Native how to navigate between screens?

Question

I am using React Navigation. I need to navigate from screen1 to screen2. I created tab navigation which include some screens but not screen1. When I click on a button from screen1 to go to screen2 which should show in tabbed screen, it is showing me error.

This is screen1(Main.js)

import React, { Component } from 'react';
import {
  ImageBackground,
  StyleSheet,
  Text,
  View,
  Modal
} from 'react-native';
import { Container, Header, Left, Content, Footer, FooterTab, Icon, Grid, Row, Button } from 'native-base';
import TabNav from '../screens/Dashboard';
import { Dashboard } from '../screens/Dashboard';

export default class Main extends Component<{}> {
  render() {
    return (
      <Container>
          <Grid>
            <Row size={2}>
            <View style={{alignItems: 'center', flexDirection: 'column', flex: 1,  justifyContent: 'space-around' }}>
              <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                <Button style={styles.buttonBrowseStyle} onPress={() => this.props.navigation.navigate('Dashboard')}>
                  <Text>Browse</Text>
                </Button>
              </View>
            </View>
            </Row>
          </Grid>
      </Container>
    );
  }
}

This is screen2(Dashboard.js)

import React from 'react';
import { Text } from 'react-native';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import Post from './Post';

export const Dashboard = () => {
    return (<Text>Dashboard</Text>);
}

const TabNav = TabNavigator ({
    Dashboard: {
      screen: Dashboard,
    },
    Post: {
      screen: Post,
    },
  },
  { 
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: true,
    activeBackgroundColor: 'yellow',
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarIcon: ({focused, tintColor}) => {
      const { routeName } = navigation.state;
      let iconName;
      if(routeName==='Main'){
  
      }
    }
  }
  );
  
export default TabNav;

Getting this error on clicking "Browse" button.

You don't seem to be using TabNav anywhere. Also, Main isn't in the navigation tree. I think you need to read the docs more closely. — Kraylog
@Kraylog I have inclided TabNav in my screen1(Main.js) but it does not provide any navigation props. I also don't want to mention my Main.js in TabNav since it will make a new tab with other tabs. — Arun kumar
The navigation props are only provided to screens that are configured within the navigators. Since Main is not in any navigator, it doesn't get that prop. To solve this you have to reconsider the structure of your navigation tree. — Kraylog

ozercevikaslan ozercevikaslan · Accepted Answer · 2018-02-05T07:45:28

As the above answer mentioned, you are not including Main Component to your navigation so, you can basically think like they are not connected each other whatsoever.

What I suggest you is having a PrimaryNavigator, you can think as Main component in your case.

const PrimaryNavigator = StackNavigator({
    SignInStack: {
        screen: SignInStackNavigator
    },
    SignUpStack: {
        screen: SignUpStackNavigator
    },
    DrawerMainStack: {
        screen: MenuDrawerStack
    }
},
    {
        headerMode: 'none'
    });

Next step, you can use your TabNavigator as in the below.

const MenuDrawerStack = StackNavigator({
    DrawerBar: {
        screen: DrawerBar
    }
}, {
        style: {
            leftDrawerWidth: 40
        },
        index: 0,
        navigationOptions: ({ navigation }) => ({
            headerStyle: { backgroundColor: '#1874CD' },
            gesturesEnabled: false,
            headerLeft: <Icon
                name="menu"
                onPress={() => {
                    navigation.navigate({
                        key: null,
                        index: 0,
                        action: [
                            navigation.navigate('DrawerToggle')
                        ]
                    })
                }}
            />
        }),
    })

And finally, you can build your tab navigator :

const DrawerBar = DrawerNavigator({
    Shop: {
        screen: ShopTabNavigator
    },

}, {
        drawerPosition: 'left',
        headerMode: 'none',
        initialRouteName: 'Shop',
        navigationOptions: ({ navigation }) => ({
            headerStyle: { backgroundColor: 'white' },
        }),
        contentComponent: props => <CustomDrawerMenu {...props} />,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle'
    })

You should customize these but what I wanted to show you is that the methodology for navigation in React Native with react-navigation is pretty much like I showed you above.

And as the last part you have to pass PrimaryNavigator to your application as High Order Component.

export default class Main extends Component<{}> {
  render() {
    return (
      <PrimaryNavigator />
    );
  }
}

In React Native how to navigate between screens?

2 Answers