App sample with React Router Navigation

App.js

import React from 'react'
import { View } from 'react-native'
import { Route, Redirect, Switch } from 'react-router'
import { BottomNavigation, Tab } from 'react-router-navigation'

import { Home, Search, Profile } from '@App/modules'
import getIcon from '@helpers/icon'

import { BRAND_COLORS } from '@theme/colors'
import styles from './styles'

const App = (location) => (
  <View style={styles.container}>
    <Switch location={location}>
      <Route
        exact path="/app"
        render={({ match: { url } }) => <Redirect to={`${url}/home`} />}
      />
      <Route
        path="/app"
        render={({ match: { url } }) => (
          <BottomNavigation
            lazy={false}
            tabActiveTintColor={BRAND_COLORS.GREEN}
            tabStyle={{ opacity: 1 }}
          >
            <Tab
              path={`${url}/home`}
              component={Home}
              label="Home"
              labelStyle={styles.label}
              renderTabIcon={({ focused }) => getIcon('home', 22, focused)}
            />
            <Tab
              path={`${url}/search`}
              component={Search}
              label="Search"
              labelStyle={styles.label}
              renderTabIcon={({ focused }) => getIcon('search', 22, focused)}
            />
            <Tab
              path={`${url}/profile`}
              component={Profile}
              label="Profile"
              labelStyle={styles.label}
              renderTabIcon={({ focused }) => getIcon('profile', 22, focused)}
            />
          </BottomNavigation>
        )}
      />
    </Switch>
  </View>
)

export default App