Clever Geek Handbook

ListView renders behind IOS keyboard - React Native

In my answer based application, I have a view that displays a TextInput and a ListView. The ListView is populated based on what is printed in 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 the ListView part is showing behind the IOS keyboard. Is there any way, without external libraries, to tell the ListView to display in the available space, i.e. not under the keyboard.

+3


source to share


2 answers


You have to use onBlur

both the keyboardonFocus

event or plugin and customize the list style when keyboard opens. Have a look at this: how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus .



+3


source


Use your own native keychain avoiding seeing KeyboardAvoidingView and Example How

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

and in the render function enter View

andTextInput 



<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>

This will take care of this

0


source






More articles:


All Articles