View beneath Navigator Bar

[destinybonavita]

Current Behavior

I'm trying to add a ScrollView to one of my navigator's screens but the ScrollView is going beneath the Navigator Bar.

import React from 'react'
import { View, ScrollView, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator, BottomTabBar } from '@react-navigation/bottom-tabs'

const Tab = createBottomTabNavigator()

const ExampleScreen = () => {
    return (
        <View style={{ flex: 1 }}>
            <ScrollView>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
                <Text>Example</Text>
            </ScrollView>
        </View>
    )
}

export const Navigator = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Example" component={ExampleScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

Expected Behavior

The expected behavior would be that the ExampleScreen does not go beneath the Navigator Bar. I would assume the bottom would stop above the bar.

How to reproduce

Using the code I provided should help produce the issue.

Your Environment

software	version
iOS or Android	iOS 13.4.1
@react-navigation/native	^5.4.3
@react-navigation/bottom-tabs	^5.5.0
react-native-screens	~2.2.0
react-native	https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz
expo	^37.0.12
node	v12.16.3
npm or yarn	6.14.5

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.io. If it's not possible to repro it on snack.expo.io, then you can also provide the repro in a GitHub repository.

[destinybonavita]

Here's a quick repo on snack.expo.io: https://snack.expo.io/@destinybonavita/disrespectful-french-fries

The problem seems to happen on mobile and not web though so you'll have to test it on a device. Also, as I was re-creating the issue I realize it might be a problem with react-native-multibar and not react-navigation, but I am going to leave this open in the event I am wrong.

[satya164]

It's an issue with the library. Unlike React Navigation's tab bar, it positions the tab bar absolutely by default.

[destinybonavita]

That's what I figured. Thanks for the reply!