Navigating to a new view

Question

How to correctly navigate to a new view?

App:

TabNavigator (Top of the screen)
StackNavigator (Bottom of the screen)

I want that after choosing a button from StackNavigator opened a new screen that will override the entire application. I do not want to see TabNavigator and StackNavigator.

In the new window, I want it to be NavBar with the return button

All the tutorials that I'm watching show how to switch between screens but I can not find the situation above.

I want to open a new window from the main application and then return to it

EDITED:

const TopNavTabs = TabNavigator({
  General: { screen: General },
  Help: { screen: Help },
  Tips: { screen: Tips },
}
});

export const Navigation = StackNavigator(
  {
    Tab: { screen: TopNavTabs },
    Article: { screen: Article },
  }
);

export default class App extends Component{

  render(){
      return(
          <View>
            <View>
              <Navigation navigation={this.props.navigation} />
            </View>
            <View>
              <View>
                <MCIcon name="account"/>
              </View>
              <View>
                <MIcon name="create" onPress={() => this.props.navigation.navigate('Article')} />
              </View>
              <View>
                <FAIcon name="hashtag" />  
              </View>
              <View>
                <FAIcon name="search" />
              </View>
            </View>
          </View>
      )
  }
}

Vikram Biwal Vikram Biwal · Accepted Answer · 2018-07-24T09:59:09

Add TabNavigator in StackNavigator like:

const TopNavTabs = TabNavigator(
  {
   General: { screen: General },
      Help: { screen: Help },
      Tips: { screen: Tips },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

    export const Navigation = StackNavigator(
      {
        Tab: { screen: TopNavTabs },
        Article: { screen: Article },
      }
    );



    export default class App extends Component{

      render(){
          return(

                  <Navigation  />

          )
      }
    }

Navigating to a new view

1 Answers