React Native: KeyboardAvoidingView not animated

Viewed 2611

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!

0 Answers
Related