Navigating to a new view - react-native

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>
)
}
}

Answer 1

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 />
)
}
}