React-native-navigation: Issue with scrolling when wrapping the screen's content inside a ScrollView. ANDROID ONLY

[alekshs]

Issue Description

Hello,

When i wrap the screen's content inside a <ScrollView>, i cannot scroll down to bottom "0" (android only).

I noticed that this bug disappears only if i add fixed height to the parent View (i.e. height: 500), or hide both the tab bar and the navigation bar.

This happens in android device/emulator only.

As you can see in the screenshot below, the scrollbar cannot scroll to the bottom of the screen but you can see the content "overflowing". There is even more content behind the tab bar.

I tested it in a fresh project with just the react-native-navigation installed.

Any ideas?

Steps to Reproduce / Code Snippets / Screenshots

---

Environment

• React Native Navigation version: 1.1.294
• React Native version: 0.50.3
• Platform: Android
• Device info: Android Simulator

[alekshs]

Update!

I also noticed this:

this attribute onLayout={(event) => { var {x, y, width, height} = event.nativeEvent.layout; } gives us the position and dimensions of the component.

Now notice what happens in ios when i console.log the height value of the View wrapper component:

and what happens in android:
Notice that it triggers the onLayout infinetly, plus there are a lot of decimals there.

this is the value in android emulator but this time with a fixed value (height: 500).
Still many decimals, but triggers only once.

I made a temporary fix by using the state but the code is too dirty to keep it.

Maybe its the emulator's fault... I must run it on a real device and see what happens :/

[alekshs]

Update:

Just ran this on a real android device, same thing happens!

[makirby]

Also encountered this, I'm running the same environment as @alekshs

Hiding navigator solves it for me for the moment however.

[tomislavHonig]

Same thing happens with me. Maybe is because of the new buildToolsVersion '26.0.2'

[alekshs]

I'm posting this quick fix for anyone having the same issue.

Make a wrapper component:

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cachedHeight: '100%',
            containerHeight: null,
        }
    }

    render() {
        return(
            <View onLayout={(event) => {
                var {x, y, width, height} = event.nativeEvent.layout;
                if (this.state.cachedHeight !== height) {
                    this.setState({
                        cachedHeight: height
                    })
                }
                else {
                    this.setState({
                        containerHeight: height
                    })
                }
              }}
                style={{height: this.state.containerHeight || '100%'}}
            >
            <ScrollView>
                {this.props.children}
            </ScrollView>
        </View>
)}

Then wrap your screen's content inside it:

<Page>
    // content
</Page>

Not the best solution but works fine for me.

[pqkluan]

This might be upstream RN issue

[johanforslund]

I have the same issue since updating react-native and react-native-navigation. @alekshs wrapper solution works, but seems like a temporary solution.

[GetSource1234]

I have the same issue, contentContainerStyle={{paddingBottom:xxx}} little bit helps, but in some cases it cause scroll flickering. I would say contentContainerStyle={{paddingBottom:xxx}} is a dirty workaround.

[liamsheppard]

Confirming that I have the same issue but @alekshs solution works for me.

An example of the issue for those interested:

And after the fix:

Note how scrollbar goes to the bottom and there's a big space between the bottom and the final item now. I didn't touch padding. Might be a placebo, but it also feels like it scrolls more smoothly.

[raphaelhovsepyan]

There is temporary solution that works for me.
change navigator style to:

static navigatorStyle = {
  drawUnderNavBar: Platform.OS === 'android',
};

and add style to screen root component
marginTop: 56

[liamsheppard]

@raphaelhovsepyan that fix also seems to work, so I'm changing to that for now, thank you!

Scroll bar seems to not reach the bottom still though, which the previous fix did achieve, but I've just hidden the scrollbar 🤷‍♂️

[deepakmaurya]

@alekshs You're awesome, your fix works.

[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]]

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.