ListView renders behind IOS keyboard - React Native

Question

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.

score 3 · Accepted Answer · edited May 23 '17 at 12:24

3

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.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 05 '15 at 00:49

Fomahaut

1,212
1
11
18

Waqas Ahmed · Answer 2 · 2016-08-06T05:43:00.767

Use react native's keyboar avoiding view KeyboardAvoidingView and Example Like

import {ScrollView, Text, TextInput, View, KeyboardAvoidingView} from "react-native";

and in render function nest the View and TextInput

<ScrollView style={styles.container}>
          <KeyboardAvoidingView behavior='position'>
                <View style={styles.textInputContainer}>
                  <TextInput
                    value={pin}
                    style={styles.textInput}
                    keyboardType='default'
                    returnKeyType='next'
                    onChangeText={this.handleChangePin}
                    underlineColorAndroid='transparent'
                    placeholder={I18n.t('pin')}/>
                </View>
          </KeyboardAvoidingView>
        </ScrollView>

It will take care of that

ListView renders behind IOS keyboard - React Native

2 Answers2