React-native-navigation: [V2] Can't Scroll to Bottom of ScrollView When Using TopTabs

[tsteward]

Issue Description

When scrolling down in a ScrollView with TopTabs the scrolling stops before the content at the bottom is visible. Sometimes the content jumps to show what is at the bottom, but immediately jumps back so the content is hidden.

Steps to Reproduce / Code Snippets / Screenshots

Use the following code to reproduce the issue:

import React, { Component } from "react";
import { FlatList, ScrollView, Text } from "react-native";
import { Navigation } from "react-native-navigation";

class ScrollComponent extends Component {
  render() {
    return (
      <ScrollView flex={1}>
        <Text style={{fontSize: 50}}>Some Text 1</Text>
        <Text style={{fontSize: 50}}>Some Text 2</Text>
        <Text style={{fontSize: 50}}>Some Text 3</Text>
        <Text style={{fontSize: 50}}>Some Text 4</Text>
        <Text style={{fontSize: 50}}>Some Text 5</Text>
        <Text style={{fontSize: 50}}>Some Text 6</Text>
        <Text style={{fontSize: 50}}>Some Text 7</Text>
        <Text style={{fontSize: 50}}>Some Text 8</Text>
        <Text style={{fontSize: 50}}>Some Text 9</Text>
        <Text style={{fontSize: 50}}>Some Text 10</Text>
        <Text style={{fontSize: 50}}>Some Text 11</Text>
        <Text style={{fontSize: 50}}>Some Text 12</Text>
        <Text style={{fontSize: 50}}>Some Text 13</Text>
        <Text style={{fontSize: 50}}>Some Text 14</Text>
        <Text style={{fontSize: 50}}>Some Text 15</Text>
      </ScrollView>
    );
  }
}

Navigation.registerComponent("ScrollComponent", () => ScrollComponent);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            topTabs: {
              children: [
                {
                  component: {
                    name: "ScrollComponent",
                    options: {
                      topTab: {
                        title: "Tab 1",
                      },
                    },
                  },
                },
                {
                  component: {
                    name: "ScrollComponent",
                    options: {
                      topTab: {
                        title: "Tab 2",
                      },
                    },
                  },
                },
              ],
            },
          },
        ],
      },
    },
  });
});

Result:

Environment

• React Native Navigation version: 2.0.2459
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): Android, Untested on iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, Windows 10, Debug

[ManAnRuck]

same problem on android

and iOS crashed

Environment

React Native Navigation version: 2.0.2460
React Native version: 0.54.2
Platform(s) (iOS, Android, or both?): Android, iOS error
Device info (Simulator/Device? OS version? Debug/Release?): Simulator, macOS, Debug

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[putuyoga]

FYI, this issue still happens on latest release. The workaround is by set the contentContainerStyleof ScrollView, so we can scroll to the bottom.

<ScrollView contentContainerStyle={{ paddingBottom: 20 }} />

[ibrahimahmed-io]

@stale bot

Reopen Issue. Still existing

[adybuciuman]

I have the same problem. And adding <ScrollView contentContainerStyle={{ paddingBottom: 20 }} /> is not helping because then on iOS adds extra paddingBottom

[vonwao]

I have a similar issue, not sure if it's the same