on ios when TextInput focused it's behind keyboard (react-native)

Question

I am using listView with TextInputs, on ios when TextInput focused it's behind keyboard. How to fix it?

Sample code: http://rnplay.org/apps/8baZSA

Samuli Hakoniemi · Answer 1 · 2016-03-16T10:59:10.083

0

You need to use <ScrollView> instead of <View> in order to use this method.

The key method is scrollResponderScrollNativeHandleToKeyboard(refToElement, scrollHeight, preventNegativeOffset) (sounds cool, right ;))

I have:

<TextInput ref='ccName' onFocus={(() => this.onFieldFocus('ccName'))} />

where function looks like:

onFieldFocus(fieldName) {
  this.setTimeout(() => {
    let scrollResponder = this.refs.scrollView.getScrollResponder()
    scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
      React.findNodeHandle(this.refs[fieldName]), 200, true
    )
  }, 125) 
}

edited Mar 16 '16 at 10:59

answered Mar 16 '16 at 10:28

Samuli Hakoniemi

18,740
1
61
74

Thank you, but as you can see in my example I use ListView. – Maksim Mar 16 '16 at 11:15
Wrap the ListView inside ScrollView then? – Samuli Hakoniemi Mar 16 '16 at 11:30
Can you share example on rnplay.org , please? – Maksim Mar 16 '16 at 11:37

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Seems this thread is what you're looking for.

TL;DR: see this stackoverflow question

edited May 23 '17 at 10:27

Community

1
1

answered Mar 17 '16 at 09:40

Alexey Kureev

1,978
15
25

`listView.getScrollResponder().scrollTo();` doesn't work? (listView is a ref to the ListView element you have) – Alexey Kureev Mar 17 '16 at 09:49
Can you share an easy example in rnplay.org, please? – Maksim Mar 17 '16 at 09:59
I'd like to, but seems your example crashes on rnplay. – Alexey Kureev Mar 17 '16 at 10:25

on ios when TextInput focused it's behind keyboard (react-native)

2 Answers2