tab-bar.js

import React, { useEffect, useState, useRef } from 'react'
import { MaterialTopTabBar } from 'react-navigation'
import { request } from '@app-elements/use-request/request'

const validRouteNames = {
  Clinician: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
  Guest: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
  'Home Health Aide': ['Caregiving', 'Blog', 'Favorites']
}

// HoC that renders:
// MaterialTopTabBar: https://github.com/react-navigation/tabs/blob/1.0/src/views/MaterialTopTabBar.js
// Which renders:
// https://github.com/react-native-community/react-native-tab-view/blob/v1.4.1/src/TabBar.js
export function TabBarComponent (props) {
  const { routes: allRoutes } = props.navigationState
  const defaultRoutes = allRoutes.filter(r => validRouteNames['Home Health Aide'].includes(r.routeName))
  const [routes, setRoutes] = useState(defaultRoutes)

  // Track if TabBarComponent is mounted, and get user role from API.
  const mountedRef = useRef(false)
  useEffect(() => {
    mountedRef.current = true

    const { promise } = request({ endpoint: 'me' })
    promise
      .then(me => {
        if (mountedRef.current) {
          setRoutes(allRoutes.filter(r => validRouteNames[me.role].includes(r.routeName)))
        }
      })
      .catch((err) => {
        // Just default to Guest
      })

    return () => (mountedRef.current = false)
  }, [])

  // Override navigation state routes array
  props.navigationState.routes = routes

  return <MaterialTopTabBar {...props} />
}