Prevent TextInput from focusing when scrolling on iOS

Question

I have a ScrollView with the TextInput multiline={true} field, which serves as a text area with dynamic height and content read from the state (it has a Text field inside which the text is displayed).

My problem is that when TextInput grows to several lines, if I scroll the screen by scrolling through this field (I do not press for a long time or something like that), the field will fire its onFocus event and keyboard.

This does not happen every time, but it happens long enough to make it very annoying.

I tried setting ScrollView to keyboardDismissMode="on-drag" , but this does not help, the keyboard still shows while scrolling is being viewed.

 <ScrollView keyboardDismissMode="on-drag"> <TextInput multiline={true} onFocus={() => console.log('boop')}> <Text>{this.state.someText}</Text> </TextInput> </ScrollView> 

I also tried doing this without the Text field inside the TextInput and onFocus is still working.

Am I doing something wrong? Is there anything else I could try, such as checking while the screen is still scrolling, and the blur() field if true or something like that?

Is there any way to focus the field if I 'explicitly' touched it?

Thank you for your help.

Answer 1

Update
No longer works in 0.49.0

---

Wrap TextInput in View with the correct panHandlers :

 panResponder = PanResponder.create({ onStartShouldSetPanResponderCapture: () => true }); ... <ScrollView> <View {...panResponder.panHandlers}> <TextInput ... /> </View> </ScrollView> 

Tested in RN 0.46.1.

Only works on iOS , will update the response if / when I work on Android.