Wrong content scrolling with scrollview child

[lightman73]

Hello, I've got a problem with an app I'm developing for a client. The structure of the page is like this:

<KeyboardAwareScrollView>
    <View>
        <ScrollView>
            <View> 
                <TextInput />
            </View>
            ...
            <View> 
                <TextInput />
            </View>
        </ScrollView>
    </View>
</KeyboardAwareScrollView>

As long as the focused TextInput is at the top of the ScrollView, everything's fine, but as you focus on TextInputs further down the ScrollView, RNKASV scrolls the content up way too much, to the point of having the focused TextInput outside view, as you can see in the attached screenshots.

Please note that I'm using react-native-navigation, and the page is inside a TabNavigator, inside a StackNavigator, inside a TabNavigator (don't ask, please; I already tried to explain the client that having a status bar, and two tabbars on the same page will be confusing for the user, but they're not listening...) (the StackNavigator contains only the inner TabNavigator, and it's there only to have the status bar at the top).

I'm using :

• RNKASV 0.5.0 (latest version)
• React 16.3.1
• React-native 0.55.4

Any help will be greatly appreciated...

Thanks !

[dhcmega]

Hi, have you fixed this? thanks.

[lightman73]

@dhcmega

Nope, still waiting for an answer to this issue...

I fear I will have to find an alternative to RNKASV... :/

[alvaromb]

Hi @lightman73

Have you tried to test this in a real device?

[lightman73]

@alvaromb

Hello, yes, tried it on an iPhone 6s with iOS 11.2.6, and iPhone 7 with iOS 11.0.3, same behaviour...

[alvaromb]

Thanks @lightman73

We're in the middle of a super important release, I promise I'll check this out next Tuesday. We're super limited on resources right now.

Also, any other hint or even a PR will be highly appreciated.

[lightman73]

@alvaromb

Thanks ! If I get some other insight on the issue I'll let you know :)

[lightman73]

@alvaromb

Hi, I just tried 0.7.0, and it's still showing the same behaviour. Did you find the time to have a look at the issue ?

Thanks again !

[alvaromb]

One question @lightman73, why the extra ScrollView inside KeyboardAwareScrollView?

[MXLI88]

have same problem ;( Is there any news?

[bakesi]

Facing the same problem. Any updates, @alvaromb?

[ThienMD]

Facing same problem, Problem occur in TabNavigator

[fabiendeborde]

Facing the exact same problem too. Whenever I tap on an input that is outside of the "original" viewport, it scrolls way too much. The inputs at the top of the form are fine though.

[Nirony]

For all of you facing this issue: Just remove the scrollView component inside "keyboardAwareScrollView", as it is a scrollView itself and can get scrollView props. scrollView inside a scrollView is never a good thing to handle :)

[Drakoun]

What @Nirony said is a good lead. But if you still need 2 scrollView, I think that the behaviour you are seeing @lightman73 is that the 2 scrollView are pushing the content to the top for the keyboard space, and one is too much. There is a prop viewIsInsideTabBar you can set at true for KeyboardAwareScrollView which inside his code set keyboardspace to 0. Maybe this can work, feel free to make a feedback.

[valeriashpiner]

Any updates on this issue? I am facing the same.