Keyboard covers one of the inputs in my React Native where view is centered using justifyContent

Question

So I have this react native code where I centered multiple inputs inside view, when I click the lower located input my keyboard seems to overrun it so I cannot see what I'm typing on my iOS simulator (iPhone 14). The error seems to be on iOS only and Android is fine. note that I also have bottom Navigation bar.

https://ibb.co/sV0Xk9L

<SafeAreaView style={{ flex: 1}}>
{...}
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <View style={styles.profile_info}>
        <KeyboardAvoidingView behavior={'position'} keyboardVerticalOffset={dimensions.height < 668 && phoneSelected ? 120 : 40}>
         <ScrollView>
          <View>
             <Input />
           <View/>
           <View>
             <Input />
           <View/>
           <View>
             <Input />
           <View/>
         </ScrollView>
        </KeyboardAvoidingView>
      </View>
    </TouchableWithoutFeedback>
</SafeAreaView>

{ // styling below }

function getProfileStyles(theme) {
  return StyleSheet.create({
    profile_info: {
      flex: 1,
      marginHorizontal: 20,
      justifyContent: 'center',
    },
  });
}

I have tried using the solution found here https://stackoverflow.com/a/51169574/11288070 which uses @react-navigation/elements deps

import { useHeaderHeight } from '@react-navigation/elements'

something else that I do is changing from justifyContent to use topPadding: dimensions.height / 5 but it's not interactive.

Answer 1

use KeyboardAwareScrollView from "react-native-keyboard-aware-scroll-view" libraray instead of KeyboardAvoidingView