React-native-keyboard-aware-scroll-view: KeyboardAwareScrollView not scrolling down to text input and not allowing scroll

Created on 3 Jun 2018  路  3Comments  路  Source: APSL/react-native-keyboard-aware-scroll-view

I followed the example, but the KeyboardAwareScrollView is not scrolling to the last two TextInputs whenever they are focused. It is also won't scrolling at all for some reason, even though scrollEnabled is true. Running on React Native 0.55.4, testing on Android using Expo and npm 6.1.0

_scrollToInput (reactNode: any) {
    this.scroll.props.scrollToFocusedInput(reactNode)
  }

  render() {
    return (
      <KeyboardAwareScrollView
      innerRef={(ref) => { this.scroll = ref; }}
      style={{ backgroundColor: '#2896d3' }}
      resetScrollToCoords={{ x: 0, y: 0 }}
      contentContainerStyle={styles.container}
      scrollEnabled={true}
    >        
        <Text style={styles.header}> - SIGNUP -</Text>

        <TextInput
          style={styles.textInput} placeholder="Email"
          underlineColorAndroid='transparent'
          keyboardType="email-address"
          autoCapitalize='none'
          maxLength={100}
          onChangeText={(email) => this.checkIsEmail(email)}
          returnKeyType = { "next" }
          onSubmitEditing={() => { this.secondTextInput.focus(); }}
          blurOnSubmit={false}
        />

        {this._renderInvalidEmail()}  

        <TextInput
          ref={(input) => { this.secondTextInput = input; }}
          style={styles.textInput} placeholder="Re-enter email"
          underlineColorAndroid='transparent'
          keyboardType="email-address"
          autoCapitalize='none'
          maxLength={100}
          onChangeText={(reenterEmail) => this.checkEmailsMatch(reenterEmail)}
          returnKeyType = { "next" }
          onSubmitEditing={() => { this.thirdTextInput.focus(); }}
          blurOnSubmit={false}
        />

        {this._renderEmailsDoNotMatch()}  

        <TextInput
          ref={(input) => { this.thirdTextInput = input; }}
          style={styles.textInput} placeholder="Password"
          underlineColorAndroid='transparent'
          autoCapitalize='none'
          secureTextEntry={true}
          spellCheck={false}
          autoCorrect={false}
          maxLength={100}
          onFocus={(event: Event) => this._scrollToInput(findNodeHandle(event.target))}
          onChangeText={(password) => this.validatePassword(password)}
          returnKeyType = { "next" }
          onSubmitEditing={() => { this.fourthTextInput.focus(); }}
          blurOnSubmit={false}
        />

        {this._renderPasswordNotLongEnough()}
        {this._renderPasswordNotEnoughSpecialCharacters()}

        <TextInput
          ref={(input) => { this.fourthTextInput = input; }}
          style={styles.textInput} placeholder="Re-enter password"
          underlineColorAndroid='transparent'
          autoCapitalize='none'
          secureTextEntry={true}
          spellCheck={false}
          autoCorrect={false}
          maxLength={100}
          onFocus={(event: Event) => this._scrollToInput(findNodeHandle(event.target))}
          onChangeText={(passwordReenter) => this.checkPasswordsMatch(passwordReenter)}
        />

        {this._renderPasswordsDoNotMatch()}  

        <TouchableOpacity
          style={styles.btn}
          onPress={this.userRegister}>
          <Text>Sign up</Text>
        </TouchableOpacity>

        <View style={styles.loginTextCont}>
          <Text style={styles.loginText}>Already have an account?</Text>
          <TouchableOpacity
            style={{backgroundColor: 'rgba(255,0,0,0)'}}
            onPress={this.changeToLogin}>
            <Text style={styles.loginButton}> Log in.</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAwareScrollView>
    );
  }

Update:
I found a solution online for the TextInputs not moving up by adding the following code:
enableOnAndroid={true} enableAutoAutomaticScroll={(Platform.OS === 'ios')}
However, the screen still will not scroll when you swipe up or down for some reason.

Most helpful comment

The only thing I can think of is you might have fixed the size of your contentContainer when specifying contentContainerStyle={styles.container}. Make sure you don't have flex:1 in the styles.

All 3 comments

The only thing I can think of is you might have fixed the size of your contentContainer when specifying contentContainerStyle={styles.container}. Make sure you don't have flex:1 in the styles.

This is my approach
`const {width, height} = Dimensions.get('window');

export const BackGroundComponent = (props) => {
return (
contentContainerStyle={{flexGrow: 1}}
enableOnAndroid={true}>


);
};
_`___

Was this page helpful?
0 / 5 - 0 ratings