How to handle TextInput in scrollView nested in View react native

Question

I have a code like this:

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

How can I handle it to response correctly to keyboard? Both android and ios??? i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show

Check https://stackoverflow.com/questions/43854912/react-native-keyboardavoidingview-covers-last-text-input/48860983#48860983 — Aung Myat Hein, Dec 17 '18 at 10:34
Possible duplicate of [Hide keyboard in react-native](https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native) — iuliu.net, Dec 17 '18 at 10:41

score 0 · Answer 1 · answered Dec 17 '18 at 10:46

0

Your question is really unclear, but what I think you need is KeyboardAvoidingView.

It's a built-in React Native component that resizes based on the keyboard height.

answered Dec 17 '18 at 10:46

iuliu.net

6,666
6
46
69

my problem is the inside keyboard covers inner scrollview's content – Jamal Dec 17 '18 at 10:51
Well since KeyboardAvoidingView resizes when the keyboard is open, all of its elements will come a bit higher (obviously), so your input shouldn't be covered. – iuliu.net Dec 17 '18 at 10:55

score 0 · Answer 2 · answered Dec 17 '18 at 10:47

0

To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView

https://facebook.github.io/react-native/docs/keyboardavoidingview

answered Dec 17 '18 at 10:47

Annie Hill

379
3
16

score -1 · Answer 3 · answered Dec 19 '18 at 18:52

-1

Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs

answered Dec 19 '18 at 18:52

Jamal

27
11

How to handle TextInput in scrollView nested in View react native

3 Answers3