React-native: ScrollView which contains TextInput not scrolling - Android

[Kiarash-Z]

• Target Platform: Android

hello I have a TextInputin my ScrollViewand i'm giving height to it acording to it lines(TextInput itself will grow in height by adding lines to it) but the problem is i can't scroll page from text input see gif below : i'm just able to scroll whole page using TextInput container View(because of its padding) is there anyway to fix it?

Reproducible Demo

[shadowm2]

I think you need to set your container view to capture the events. Documentation :

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

But you still need to determine whether it's a scroll or just a simple touch to start typing.You can do this in callback function of onStartShouldSetResponderCapture.

[hramos]

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

[derakhshanfar]

@shadowm2 could you write example please? because when i try it, it doesn't work

[derakhshanfar]

@Kiarash-Z could you find any solution?

[derakhshanfar]

@shadowm2 there is another issue (#12167) that i think it related to this problem

[AugustoAleGon]

Why they close it? if it is still an issue!

[Tankerxyz]

Just wrap all your content in TouchableOpacity with activeOpacity={1} prop.

[AugustoAleGon]

@Tankerxyz For me that didn't work on iOS! The ScrollView is not responding when text input is focus.

[Tankerxyz]

@AugustoAleGon could you give example of your code, and react-native version?

[AugustoAleGon]

@Tankerxyz
This is the following example:

<ScrollView
    keyboardShouldPersistTaps={'always'}>
    <View style={styles.textInputContainer}>
        <TextInput
            multiline
            autogrow
            maxLength={240}
            numberLines={2}
            />

    </View>
</ScrollView>

My react-native version 0.51.0

So the idea is to wrap everything inside a TouchableOpacity. It is not working on iOS it is not scrolling.

[Tankerxyz]

@AugustoAleGon all jsx tree, the same like example below?

<ScrollView>
   <TouchableOpacity>
        <View>
             <View>
                  <TextInput />
             </View>
             <View>
                  <TextInput />
             </View>
             <View>
                  <TextInput />
              </View>
         </View>
    </TouchableOpacity>
</ScrollView>

[swingywc]

@Tankerxyz thanks! Your solution works for me :)