Nrthugu

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

  }

})