react-nativejhipsterreact-native-navigationwix-react-native-navigationreact-native-navigation-v2

React Native Navigation - bottom tabs and drawer


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)


Solution

  • 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.