TabView with ScrollView content overflows with height equal to the TabBar's

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior:

Create a TabView with ScrollViews inside the Tabs on iPhone 11 with react-navigation-material-bottom-tabs on the bottom.

    <Layout>
      <TabView
        selectedIndex={selectedIndex}
        onSelect={setSelectedIndex}
      >
        <Tab title='A'>
          <ScrollView ... />
        </Tab>
        <Tab title='B'>
          <ScrollView ... />
        </Tab>
      </TabView>
    </Layout>

Expected behavior

The content should scroll up to the bottom tabs. Instead, it overflows below the bottom tabs and the bottom of the content and the bottom of the scroll bar are hidden below the bottom tabs.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	^1.3.1
@ui-kitten/components	4.4.0-beta.2

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.18.0 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 3.5.3 - /usr/local/n/versions/0.12.4/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26
      Build Tools: 19.1.0, 21.1.2, 23.0.1, 23.0.2, 23.0.3, 24.0.3, 25.0.0, 25.0.2, 26.0.2, 26.0.3, 28.0.2, 28.0.3
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
  npmGlobalPackages:
    react-native-cli: 2.0.1

[danielanthonyl]

Im experiencing the same issue. I if you take a look at your imgur video, ull see that after scrolling to the end, if you keep scrolling you would revel one more item. whose behind the bottom tab. I think we are expecting to render all items inside the Tab content space.

[nyoung697]

EDIT:

I figured out the issue. I had to make the TabView component flex: 1… Incase anyone else is dealing with the same issue. It might make sense to make this the default. I set up a new project to test this out, and was getting the same behaviour, so I don’t believe this had something to do with my project.

---

@artyorsh Your example does reproduce the bug. Part of the red box at the bottom of the list isn’t visible when you scroll to the bottom. If you just render the List component in your example, the entire portion of the red box is visible.

Here’s a video of what I mean:

https://user-images.githubusercontent.com/12564184/124843158-8b278c00-df4e-11eb-94ee-217062597f70.mov

I am having the same issue when trying to render a list of users inside a tab view. The last one or two users are always hidden when scrolling to the bottom of the list. I’ve had to add a View wrapper around it, calculate the height of the view and subtract 75… I couldn’t figure out where the extra space was coming from.

I tried setting the height of the tab bar to 50, and subtracting that from the height of the View I wrapped my List in, but that didn’t seem to work. Maybe the tab indicator is also taking up space??

This is what I am rendering inside my tab view, in order to see the last item when scrolling to the bottom of the list:

<View
  style={styles.container}
  onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height - 75)}>
    <View style={{ height }}>
      <List data={users} renderItem={renderItem} style={styles.list} />
    </View>
</View>

Is there a better solution for this?