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.
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.
found issue: https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/155#issuecomment-335495342
This is my approach
`const {width, height} = Dimensions.get('window');
export const BackGroundComponent = (props) => {
return (
enableOnAndroid={true}>
);
};
_`___
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.