KeyboardAvoidingView Issue With TextInput and Animated.API

Question

I designed a page and I have a Flatlist and I have pickers, slider and text input in this page. I also used Animated View in this page and I have an issue with KeyboardAvoidingView.

The design looks like this when the page is first rendered:First Render

When user click "Add" Icon the page looks like this: Animation Triggered and View Flex Grow

And here is my main issue. When user click the TextInput for type something. This page looks like this: TextInput Focused

You can also see my render code in this photo.JSX Code

I tried placing "keyboardavoidingview" in different places but my problem was not solved. How can I solve this?

P.S: The animation value based on "flex" property. The view has "0.5" flex value on first start and When the button is clicked, it takes the value "1".

Answer 1

wrap your code inside

<KeyboardAvoidingView>

</KeyboardAvoidingView>

And give it a style like this

 flex: 1,
 behavior="padding"

Kolay gelsin :)