Navigate to a screen not defined with createBottomTabNavigator in React Native - react-native

Question

I am trying to navigate to a screen that I have not defined with createBottomTabNavigation as I don't want it to be shown on the bottom tab navigation.
To try so I have created the component separately:
class SingleScreen extends React.Component {
render() {
return (
<View>
<Text>This is sigle screen</Text>
</View>
);
}
}
To navigate to this screen:
render () {
const {navigate} = this.props.navigation;
return(
<TouchableHighlight onPress={() => navigate('SingleScreen', {id: 'id', from: 'Search'})}>
//Code
</TouchableHighlight>
);
}
But is not working. Do I have to describe this screen with createBottomTabNavigator? If so, is it possible to hide from appearing on the tab bar?

Answer 1

You need to make some change in app.js. add createBottomTabNavigator inside createStackNavigator. Add those component into stacknavigator in which you do not want to add into bottom tab navigator. In createBottomTabNavigator add those component which you want to show in tab bar
Please check following code
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions
} from "react-native";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
import LoginScreen from "./Screens/LoginScreen";
export default class App extends Component {
render() {
return <StackNav />;
}
}
const StackNav = createStackNavigator(
{
TabNavigator: {
screen: AppTabNavigator,
navigationOptions: {
headerMode: "none",
header: null
}
},
SingleScreen: {
screen: SingleScreen,
navigationOptions: {
headerMode: "none",
header: null
}
},
SecondScreen: {
screen: SecondScreen,
navigationOptions: {
headerMode: "none",
header: null
}
}
},
{
initialRouteName: "TabNavigator"
}
);
const AppTabNavigator = createBottomTabNavigator({
Login: {
screen: LoginScreen
}
});