react-native-keyboard-aware-scroll-view isn't scrolling on Android

Question

react-native-keyboard-aware-scroll-view isn't scrolling on Android this is a issue because when I click the top textInput it go out of view and I can't scroll it into view.

I have added

android:windowSoftInputMode="adjustPan"

to the android manifest and I have imported react-native-keyboard-aware-scroll-view at the top of the file. here is the code that I have.

<View>
        <TouchableOpacity style={this.props.addressDisplayStyle} accessibilityLabel={'addressSelected'} onPress={() => this.setState({showModal: true})}>
          <Text numberOfLines={6} ellipsizeMode ={'tail'} style={[styles.text, styles.secondaryText, styles.selectedText, styles.addressText]}>{this.props.address}</Text>
        </TouchableOpacity>
        <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.showModal}
            onRequestClose={() => this.closeModal()}
              >
          <KeyboardAwareScrollView
            resetScrollToCoords={{ x: 0, y: 0 }}
            contentContainerStyle={[styles.fadedBackground, { justifyContent: 'center', flexGrow: 1}]}
            scrollEnabled={true}
            enableAutomaticScroll={(Platform.OS === 'ios')}
            enableOnAndroid={true}
          >
              <View style={styles.modalContainer}>
                <Text style={[styles.text, styles.titleText]}>Enter Address</Text>
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'123 Street'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({street: changedText})}
              value={this.state.street}
            />
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'Apt #'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({street2: changedText})}
              value={this.state.street2}
            />
            <TextInput
              maxLength={300}
              multiline = {false}
              placeholder = {'city'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({city: changedText})}
              value={this.state.city}
            />
            <TextInput
              maxLength={2}
              multiline = {false}
              placeholder = {'State'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({state: changedText})}
              value={this.state.state}
            />
            <TextInput
              maxLength={10}
              keyboardType={'numeric'}
              multiline = {false}
              placeholder = {'Zipcode'}
              style = {[styles.text, styles.inputText, styles.inputTextCustom]}
              onChangeText={(changedText) => this.setState({zipcode: changedText})}
              value={this.state.zipcode}
            />
            {this.state.loading?
              <Loading />
              :
              null
            }
              </View>
        </KeyboardAwareScrollView>
            </Modal>
      </View>

I have tried adding scrollview before and after the KeyboardAwareScrollView, and having a view to warp it but I can't seem to get it to work for android.

score 1 · Answer 1 · answered Oct 29 '18 at 17:08

This is how i handled the textinput hide when keyboard appear and scroll issue. I did use this library but didn't get the desire result. I looked at the source code and came up with my own solution using native components.

Here is my render method: Please note that i have create some wrapper components like Button and CustomizedTextInput but the properties of ScrollView should get you what you need.

  <ScrollView keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}>

        {this.renderImage(styles)}
        <View style={styles.container}>
        <View style={styles.buttons}>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]}>
              <Icon name={'logo-facebook'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]}
              >
              <Icon name={'logo-twitter'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button,social,{justifyContent:'center'}]} >
              <Icon name={'logo-google'} size={25} style={[awesome,hero,accentColor,center,{alignSelf:'center'}]}/>
            </TouchableOpacity>
          </View>
          <CustomizedTextInput
            placeholder='Username'
            autoCapitalize="none"
            autoCorrect={false}
            backgroundColor={Theme[this.props.theme].colors.control.background}
            borderColor={Theme[this.props.theme].colors.border.base}
            borderRadius={24}
            placeholderTextColor={baseColor.color}
            value={this.state.username}
            onChangeText={val => this.onChangeText('username', val)}
          />
          <CustomizedTextInput
            placeholder='Password'
            autoCapitalize="none"
            autoCorrect={false}
            backgroundColor={Theme[this.props.theme].colors.control.background}
            borderColor={Theme[this.props.theme].colors.border.base}
            borderRadius={24}
            placeholderTextColor={baseColor.color}
            value={this.state.password}
            onChangeText={val => this.onChangeText('password', val)}
          />
              <Button
                  text='LOGIN'
                  borderRadius={24}
                  color={Theme[this.props.theme].colors.gradients.base[0]}
                  style={[{width: 300},{height:50},baseColor,styles.save]}
                  textStyle={[inverseColor]}
                  onPress={this.signIn}
                />

                <View style={styles.footer}>
                <View style={styles.textRow}>
                  <Text style={[primary3, baseColor]}>Don’t have an account? </Text>
                  <TouchableOpacity
                  onPress={()=>this.props.navigation.navigate('auth.signup')}
                  style={[clear]} >
                  <Text style={[header6, baseColor]}>Sign up now</Text>
                </TouchableOpacity>
                </View>
              </View>


          </View>
          </ScrollView>

Thanks Ahsan, I didn't realize scrollview had keyboardShouldPersistTaps, I still don't have the ideal functionality but this did allow for better UX so I'm removing the other library. — James, Oct 30 '18 at 16:12
It always better to you native components rather then third party libraries ... but yeah it also always different to get the ideal functionality. My suggestion would be look into the source code before using third party library most of the time the solution is just one line. — Ahsan Sohail, Oct 30 '18 at 19:38

react-native-keyboard-aware-scroll-view isn't scrolling on Android

1 Answers1