Is there anything special to do to make the view slide up when the keyboard appears ? According to all the examples i have seen, it does it by default, but on my side it goes from point A to point B directly.
Here's my render where FadeInView is just an Animated.View:
<FadeInView style={{ flex: 1 }}>
<KeyboardAvoidingView
style={s.container}
contentContainerStyle={{alignItems: 'center'}}
behavior="position"
keyboardVerticalOffset={-80}
>
<View style={{
width: 100, height: 100, borderWidth: 1,
borderColor: '#E0E0E0', marginBottom: 30,
}} />
<Item>
<Input
placeholder={t('login:username')}
onChangeText={(username) => { username = username.trim(); return this.setState({ username }); }} />
</Item>
<Item style={{ marginBottom: 10 }}>
<Input
secureTextEntry={true}
placeholder={t('login:password')}
onChangeText={(password) => { password = password.trim(); return this.setState({ password }); }} />
</Item>
{isFetching ?
<TouchableOpacity
disabled={true}
style={cs.button}
onPress={() => this.onLogin()}>
<Text>{t('common:loading').toUpperCase()}</Text>
</TouchableOpacity>
:
<TouchableOpacity
activeOpacity={0.7}
style={cs.button}
onPress={() => this.onLogin()}>
<Text style={cs.buttonText}>{t('login:login').toUpperCase()}</Text>
</TouchableOpacity>
}
{errorMessage != null &&
<Text style={cs.errorMessage}>{errorMessage}</Text>
}
</KeyboardAvoidingView>
</FadeInView>
And the container style:
const s = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop: 50,
paddingRight: 20,
paddingLeft: 20,
},
});
Sorry for the big code but i'm a bit desperate with this issue... Thanks!