Question

38

React Native Make View Hug the Top of the Keyboard

rated 0 times [ 39] [ 1] / answers: 1 / hits: 15257 / 7 Years ago, thu, march 9, 2017, 12:00:00

Let's say I have a view that is positioned absolute at the bottom of the screen. This view contains a text input. When the text input is focused, I want the bottom of the view to touch the top of the keyboard.

I've been messing around with KeyboardAvoidingView, but the keyboard keeps going over my view. Is it not possible to make this work with position absolute?

What other method can I try? Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

abagail

Add To Favorites

Follow

Total Points: 528

Total Questions: 109

Total Answers: 101

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

answered 7 Years ago eanskylerg · Accepted Answer

Few days ago I have the same problem (although I have a complex view with TextInput as a child) and wanted not only the TextInput to be focused but the whole view to be attached to the keyboard. What's finally is working for me is the following code:

constructor(props) {

    super(props);

    this.paddingInput = new Animated.Value(0);

}



componentWillMount() {

    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);

    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);

}



componentWillUnmount() {

    this.keyboardWillShowSub.remove();

    this.keyboardWillHideSub.remove();

}



keyboardWillShow = (event) => {

    Animated.timing(this.paddingInput, {

        duration: event.duration,

        toValue: 60,

    }).start();

};



keyboardWillHide = (event) => {

    Animated.timing(this.paddingInput, {

        duration: event.duration,

        toValue: 0,

    }).start();

};



render() {

        return (

            <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>

                [...]

                <Animated.View style={{ marginBottom: this.paddingInput }}>

                    <TextTranslateInput />

                </Animated.View>

            </KeyboardAvoidingView>

        );

    }

where [..] you have other views.