CODEWITHSUNDEEP
javascriptiosreactjsreact-native
Axel Mani
Axel Mani

Reputation: 169

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.

Upvotes: 3

Views: 1083

Answers (2)

Waqas Ahmed
Waqas Ahmed

Reputation: 1411

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

Upvotes: 0

Fomahaut
Fomahaut

Reputation: 1212

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.

Upvotes: 3

Related Questions