Odtnhj

I am working with an Expo app which comes bundles with the react-native-navigation.

It works great and I have setup several Stacked Navigations but I cannot seem to get my modals to display without the bottom Tab Navigator.

Below is the navigation folder structure:

Here are the files:

AppNavigator.js

import createSwitchNavigator from 'react-navigation'

import MainTabNavigator from './MainTabNavigator'

export default createSwitchNavigator(
 Main: MainTabNavigator
)

MainTabNavigator.js

import React from 'react'
import Platform from 'react-native'
import createStackNavigator, createBottomTabNavigator from 'react-navigation'

// Import Stacks
import SettingsStack from './stacks/SettingsStack.js'

// Import Components
import TabBarIcon from '../components/TabBarIcon'

// Import Screens
import HomeScreen from '../screens/HomeScreen'
import ExercisesScreen from '../screens/ExercisesScreen'
import ExerciseDetailScreen from '../screens/ExerciseDetailScreen'
import VideoScreen from '../screens/VideoScreen'
import ExerciseStartScreen from '../screens/ExerciseStartScreen'

const HomeStack = createStackNavigator(
 Home: HomeScreen,
 ExerciseDetails: ExerciseDetailScreen
)

const StartWorkOut = createStackNavigator(
 Home: HomeScreen,
 ExerciseStart: ExerciseStartScreen
)

StartWorkOut.navigationOptions = 
 tabBarVisible: false


const RootStack = createStackNavigator(
 Main: HomeStack,
 ExerciseStart: ExerciseStartScreen,
 VideoScreen: 
 screen: VideoScreen
 
,

 mode: 'modal',
 headerMode: 'none',
 tabBarVisible: false
)

const ExercisesStack = createStackNavigator(
 Exercises: ExercisesScreen,
 ExerciseDetails: ExerciseDetailScreen
)

const ExerciseRootStack = createStackNavigator(
 Main: ExercisesStack,
 VideoScreen: 
 screen: VideoScreen
 
,

 mode: 'modal',
 headerMode: 'none',
 tabBarVisible: false
)

RootStack.navigationOptions = 
 tabBarLabel: 'Home',
 tabBarIcon: ( focused ) => (
 <TabBarIcon
 focused=focused
 name=
 Platform.OS === 'ios'
 ? `ios-information-circle$focused ? '' : '-outline'`
 : 'md-information-circle'
 
 />
 )


ExerciseRootStack.navigationOptions = 
 tabBarLabel: 'Exercises',
 tabBarIcon: ( focused ) => (
 <TabBarIcon
 focused=focused
 name=
 Platform.OS === 'ios'
 ? `ios-information-circle$focused ? '' : '-outline'`
 : 'md-information-circle'
 
 />
 )


export default createBottomTabNavigator(
 RootStack,
 ExerciseRootStack,
 SettingsStack
)

The settings Stack file is not important and I have tried adding the following into screens, without any luck:

 static navigationOptions = 
 tabBarVisible: false
 

Thanks!

I managed to figure it out in the end.

I had to refactor the code and remove the modals from the tab navigator and add it directly to the AppNAvigator.js as below:

import createStackNavigator from 'react-navigation'

import MainTabNavigator from './MainTabNavigator'

// Import Screens
import HomeScreen from '../screens/HomeScreen.js'
import ExerciseStartScreen from '../screens/ExerciseStartScreen.js'
import VideoScreen from '../screens/VideoScreen.js'

export default createStackNavigator(
 Main: MainTabNavigator,
 ExerciseStart: ExerciseStartScreen,
 VideoScreen: VideoScreen
,

 mode: 'modal',
 headerMode: 'none',
 navigationOptions: 
 header: null
 
)