I'm trying to place an input on bottom of the screen and when I click, I want it to be above the keyboard. I'm using Expo. I have tried two scenarios:

1. Without "softwareKeyboardLayoutMode": "pan" configuration in app.json file. In this approach it works fine expect it shifts the bottom tab bar above keyboard as well, so it does not work for me. For that I have tried the

screenOptions={{
                tabBarHideOnKeyboard: 'true'
            }}

configuration in tab bar but it does not work smoothly and it also will not work if I try to add custom component for the bottom tab bar.

2. With "softwareKeyboardLayoutMode": "pan". With this approach the bottom tab bar is hidden and it eventually kind of works but behaves strangely. When I focus on the text input, it opens keyboard, shifts the input too much above and then returns it back to right above the keyboard (to where it should be). I have tried some changes on my code but could not end up with any solution. Please, try the code, and you'll see.

Here is my code:

NewComp.js:

const NewComp = () => {
    return (
        <KeyboardAvoidingView
            behavior={"height"}
            style={{ flex: 1 }}
        >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <View style={{
                    padding: 24,
                    flex: 1,
                    justifyContent: "flex-end"
                }}>
                    <TextInput placeholder="Username" style={{
                        height: 40,
                        borderColor: "#000000",
                        borderBottomWidth: 1,
                    }}/>
                </View>
            </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
    );
};

BottomNavigator.js:

const BottomNavigator = ({ navigation, route }) => {

   return (
       <Tab.Navigator>
           <Tab.Screen key={1} name={'TAB_1'} component={NewComp} options={{header: () => null}}/>
           <Tab.Screen key={2} name={'TAB_2'} component={NewComp} options={{header: () => null}} />
           <Tab.Screen key={3} name={'TAB_3'} component={NewComp} options={{header: () => null}} />
       </Tab.Navigator>
   );
}