Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListView renders behind IOS keyboard - React Native

In my react-native app I've got a View that renders a TextInput and a ListView. The ListView is populated based on what is typed in the TextInput.

<View styleComponent={styleComponent.mainContainer}>
  <TextInput
    onChangeText={this.onTyping.bind(this)}
    value={this.state.text} />
  <ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => this._renderRow(rowData)} />
</View>

My problem is that part of the ListView is rendered behind the IOS keyboard. Is there any way, without external libraries, to tell the ListView to render in the available space, i.e. not under the keyboard.

like image 532
Axel Mani Avatar asked Dec 11 '25 10:12

Axel Mani


1 Answers

You should use onBlur and onFocus event or keyboard events plugin and adjust your list style when keyboard opened. Take a look with this: how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus.

like image 166
Fomahaut Avatar answered Dec 13 '25 00:12

Fomahaut



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!