TabNavigator screen and Modals

[michelebombardi]

I'm trying to use this library to show a custom modal dialog. I've a StackNavigator with three screens and on of these, the MainScreen, is a TabNavigator on which I set up the following header:

static navigationOptions = ({navigation}) => {
    const { params } = navigation.state
    return {
        headerRight: (
            <Content>
                <Grid>
                    <Col style={styles.headerButton}>
                        <TouchableHighlight style={styles.infoButton} onPress={() => {params._onAbout()}} underlayColor='lightgrey'>
                            <Icon ios='ios-information-circle' android='md-information-circle' style={{fontSize: 24}} />
                        </TouchableHighlight>
                    </Col>
                    <Col style={styles.headerButton}>
                        <TouchableHighlight style={styles.logoutButton} onPress={() => {params._onLogout()}} underlayColor='lightgrey'>
                            <Icon ios='ios-exit-outline' android='md-exit' style={{fontSize: 24}} />
                        </TouchableHighlight>
                    </Col>
                </Grid>
            </Content>
        )
    }
}

The second button opens a simple Alert (from react-native). With the first button I would open a custom modal to show app and developer details.

The main screen has the following render method;

render(): JSX.Element {
    return (
        <TabContent />
    )
}

where TabContent is simply my tabs configuration:

const TabContent: NavigationContainer = TabNavigator({
    Courses: {
        screen: CoursesScreen,
        navigationOptions: ({ navigation }) => ({
            // title: `${navigation.state.params.user}'s Courses`,
            tabBarLabel: 'Corsi',
            tabBarIcon: ({ tintColor, focused }) => (
                <Icon ios={focused ? 'ios-calendar' : 'ios-calendar-outline'} android='md-calendar' style={{fontSize: 18, color: tintColor}} />
            )
        })
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: ({ navigation }) => ({
            // title: `${navigation.state.params.user}'s Profile`,
            tabBarLabel: 'Profilo',
            tabBarIcon: ({ focused, tintColor }) => (
                <Icon ios={focused ? 'ios-person' : 'ios-person-outline'} android='md-person' style={{fontSize: 18, color: tintColor}} />
            )
        })
    }
    }, {
    tabBarOptions: {
        activeTintColor: '#F3E03B',
        showIcon: true,
        labelStyle: {
            fontWeight: 'bold'
        },
        style: {
            backgroundColor: 'black'
        }
    }
})

The library linked above requires a layout like this:

<View style={styles.wrapper}>

    <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
      <Text style={styles.text}>Modal centered</Text>
      <Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
    </Modal>
</View>

but if I put TabContent tab inside that view the tab navigator doesn't work anymore.

Is there a way to make my TabNavigator and Modal from that library work together?

software	version
react-navigation	1.0.0-beta.11
react-native	0.46.4
node	7.8.0
yarn	0.27.5

[michelebombardi]

I found a solution.
Using Container as root component allow to nest the TabContent aside other components:

render(): JSX.Element {
    return (
        <Container>
            <Spinner visible={this.props.isLoggingOut} textContent={'Disconnessione in corso...'} textStyle={{color: '#FFF'}} />

            <TabContent screenProps={{ isAdmin: this.props.isAdmin }} />

            <Modal style={styles.aboutModal} position={'center'} ref={'aboutModal'} isDisabled={false}>
                <Text>Modal centered</Text>
            </Modal>
        </Container>
    )
}

[kinka]

@bm-software May I ask what does the Container mean? I encountered with the same problem, and try your solution, but still ocurred error says 'avigation.state.routes.forEach' called on undefined object.

[michelebombardi]

@kinka Container is a NativeBase component. I think that your error is not releated with that issues. In my case the problem was that when opening the modal nothing happened and the TabNavigator became blank.

[kinka]

In my case, I just cannot wrap TabNavigator inside React.Component or any other Components. So I wonder why you TabContent can be put inside Container, does it have any magic, that's what confused me. However, I tried another solution by putting my PopupDialog in a Modal component, and it looks good to me.
Thanks your reply.

[sebringj]

const TabNavigation = createBottomTabNavigator(
  {
    // routes
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarOnPress: ({
        navigation, defaultHandler,
      }) => {
        if (navigation.state.routeName === YOUR_MODAL_ROUTE)
          // call globally declared modal stack nav
        else
          defaultHandler()
      },
    }),
  }
)

How I figured this out was to...

1. Clone this repo
2. grep 'tabBarOnPress' . -rli
   This last part is more important for you.