React Native Navigation - bottom tabs and drawer

Question

I'm trying to add bottom tab bar in my jhipster ignite application, which uses react-native-navigation v2.

Screens are registered like:

Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)

Where e.g.:

export const LAUNCH_SCREEN = 'nav.LaunchScreen'

And here is the complete navigation:

export const topBar = {
  title: {
    text: 'MDNGHT',
    color: Colors.snow
  },
  leftButtons: [
    {
      id: 'menuButton',
      icon: Images.menuIcon,
      testID: 'menuButton',
      color: Colors.snow
    }
  ]
}

export const launchScreenComponent = {
  component: {
    id: 'id.launch',
    name: LAUNCH_SCREEN,
    options: {
      topBar: topBar,
      bottomTab: {
        fontSize: 12,
        text: 'HOME'
      }
    }
  }}

export const eventsScreenComponent = {
  component: {
    id: 'id.events',
    name: EVENTS_SCREEN,
    options: {
      topBar: topBar,
      bottomTab: {
        fontSize: 12,
        text: 'EVENTS'
      }
    }
  }
}

export const bottomTabs = {
  id: 'bottomTabs',
  children: [
    {
      stack: {
        children: [
          launchScreenComponent
        ]
      }
    },
    {
      stack: {
        children: [
          eventsScreenComponent
        ]
      }
    }
  ],
  options: {
    bottomTabs: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
      backgroundColor: '#121212',
      borderTopWidth: 0,
      shadowOffset: {width: 5, height: 3},
      shadowColor: 'black',
      shadowOpacity: 0.5,
      elevation: 5
    }
  }
}

export const appStack = {
  root: {
    sideMenu: {
      left: {
        component: {
          name: DRAWER_CONTENT
        }
      },
      center: {
        bottomTabs: bottomTabs
      }
    }
  }
}

Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
      topBar: {
        topBar: {
          title: {
            color: Colors.snow
          }
        },
        backButton: {
          showTitle: false,
          testID: 'backButton',
          icon: Images.chevronLeftIcon,
          color: Colors.snow,
          iconColor: Colors.snow
        },
        background: {
          color: Colors.background
        }
      },
      sideMenu: {
        left: {
          enabled: false
        }
      }
    })

    Navigation.setRoot(appStack)

    // handle app state and deep links
    AppState.addEventListener('change', handleAppStateChange)
    Linking.addEventListener('url', handleOpenURL)
  })

I don't get any error message, my application just stops after start. When I put:

stack: {
          id: 'center',
          children: [launchScreenComponent]
        }

Instead of bottomTabs: bottomTabs in appStack, the application works (but without bottom tab bar)

score 1 · Answer 1 · answered Jul 21 '19 at 17:59

Following the Layout docs from react-native-navigation, you can replace the appStack with a bottomTabs implementation instead of a drawer like below (only one tab configured as example, add another object in root.bottomTabs.children to add another tab).

export const appStack = {
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            id: 'firstTabStack',
            children: [
              {
                component: {
                  name: LAUNCH_SCREEN,
                  options: {
                    topBar: {
                      title: {
                        text: 'Welcome!',
                        color: Colors.snow
                      }
                    }
                  }
                }
              }
            ],
            options: {
              bottomTab: {
                iconColor: 'gray',
                textColor: 'gray',
                selectedIconColor: 'black',
                selectedTextColor: 'black',
                text: 'Launch Screen',
                testID: 'LAUNCH_SCREEN',
                icon: Images.menuIcon
              }
            }
          }
        }
      ]
    }
  }
}

score 0 · Accepted Answer · answered Jul 21 '19 at 17:56

0

It actually turns out that it is required to set an icon for each bottom tab, otherwise the app crashes:

  bottomTab: {
    fontSize: 12,
    text: 'HOME'
    icon: require('../shared/images/logo.png')
  }

This resolves the issue.

answered Jul 21 '19 at 17:56

fryzjerro

99
1
3
13

React Native Navigation - bottom tabs and drawer

2 Answers2