Solution for react-navigation/stack/issues/237 (stack header animation is buggy on android P due to elevation animations)

BottomNavigator.ts

import {
    BottomRoutes,
    NavigationDefinitionMap,
    TNavigatorOptions
} from '../../lib/navigation'
import {
    createBottomTabNavigator
} from 'react-navigation-tabs'
import RequestListScreen, {
    requestListNavigatorOptions
} from '@screens/service-request/RequestListScreen'
import ProfileViewScreen, {
    profileViewScreenNavigationOptions
} from '@screens/profile/ProfileViewScreen'
import { createStackNavigator } from 'react-navigation-stack'
import BottomTabBar from '@navigation/navigators/BottomTabBar'

type BottomNavigationParams =
    Parameters<typeof createBottomTabNavigator>

const bottomRouteMaps: NavigationDefinitionMap<
    BottomRoutes,
    BottomNavigationParams[0][string]
> = {
    RequestList: {
        screen: createStackNavigator({
            Request: {
                screen: RequestListScreen,
                navigationOptions: requestListNavigatorOptions
            }
        })
    },
    ProfileView: {
        screen: createStackNavigator({
            Profile: {
                screen: ProfileViewScreen,
                navigationOptions: profileViewScreenNavigationOptions
            }
        })
    }
}

const configs: TNavigatorOptions<
    BottomRoutes,
    BottomNavigationParams[1]
> = {
    initialRouteName: 'RequestList',
    tabBarComponent: BottomTabBar
}

export default createBottomTabNavigator(
    bottomRouteMaps,
    configs
)

BottomTabBar.tsx

import React, { useState } from 'react'
import { BottomNavigation } from 'react-native-paper'
import BottomNavigationIcon from '@components/BottomNavigationIcon'
import { BottomNavigationColors } from '@constants/colors'
import { NavigationTabProp } from 'react-navigation-tabs'
import useSafeNavigation from '@hooks/useSafeNavigation'
import { AvailableRoutes, BottomRoutes } from '../lib/navigation'
import { IconType } from '@constants/IconTypes'
import { useNavigationEvents } from 'react-navigation-hooks'

type RouteTitlePairs = {
    key: keyof BottomRoutes // routes string union
    title: string,
    iconName: IconType // icons string union
}[]

const routes: RouteTitlePairs = [
    {
        key: 'RequestList',
        title: 'Solicitações',
        iconName: 'service-request'
    },
    {
        key: 'ProfileView',
        title: 'Perfil',
        iconName: 'user'
    }
]

const BottomTabBar = () => {
    const [index, setIndex] = useState(0)
    // Here's my custom useNavigation to force me to use only app defined route keys+arguments
    // you can replace it for useNavigation
    const { navigate, emit } = useSafeNavigation()


    // You can also put custom rules on the routes to omit them ;)

    // Assure we have the correct index set always.
    useNavigationEvents(event => {
        const state = event.state as { routeName?: AvailableRoutes }
        if(event.type !== 'action' || state.routeName !== 'BottomNavigator') {
            return
        }

        setIndex(event.state.index)
    })

    return (
        <BottomNavigation
            shifting
            style={ {
                // Fixed the bottom tab taking half screen
                flex: undefined
            } }
            navigationState={ { index, routes } }
            onIndexChange={ () => { /* ignored */ } }
            activeColor={ BottomNavigationColors.activeTintColor }
            barStyle={ {
                backgroundColor: BottomNavigationColors.background
            } }
            renderIcon={ ({ route, color }) => (
                // You can specify the icon directly on the routes (read the rn paper guide)
                <BottomNavigationIcon
                    color={ color }
                    name={ route.iconName }
                />
            ) }
            onTabPress={ state => {
                // Avoid to use useEffect for this, it's slow.
                navigate(state.route.key, undefined)
                // Notify scrollables
                emit('refocus')
            } }
            renderScene={
                /* Let the react-navigation handle this */
                () => null
            }
        />
    )
}

export default BottomTabBar