Keyboard changing flex layout in react native with textInput

Layout overlapping on text input in react native as you can see in the images. I have experimented with keyboardAvoidingView and keyboardAwareScrollView but I just cant fix it or I am implementing them incorrectly.

How to avoid keyboard from changing your flex layout? What's the industry standard? keyboardAvoidingView? I find that inconsistent or have not understood it conceptually. My approach usually is wrapping the entire code with either keyboardAwareScrollView or keyboardAvoidingView. Do I only do it over the textInput component?

const InterviewAlignment = ({navigation}) => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
      </View>
      <View style={styles.main}>
        <View
          style={{
            flex: 1,
            justifyContent: 'space-between',
          }}>
          <View
            style={{
              flex: 1,
              backgroundColor: 'red',
            }}>
          </View>
          <View style={styles.modeContainer}>
          </View>
          <View style={{flex: 1}}>
            <Text style={styles.text}>Link Address</Text>
            <TextInput
              style={styles.linkInput}
            />
          </View>
        </View>
        <View style={{flex: 1, backgroundColor: 'red'}}>
         
        </View>
        <View style={{flex: 1.5, backgroundColor: 'black'}}>
        </View>
      </View>
    </View>
  );
};

//RFValue is just a responsive wrapper

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: RFValue(16),
    minHeight: RFValue(56),
    backgroundColor: '#B1C59B',
  },
  text: {
    fontSize: RFValue(15),
    color: 'black',
  },
  main: {
    flex: 1,
    padding: 15,
  },
  modeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    flex: 1,
    backgroundColor: 'yellow',
  },
  linkInput: {
    marginHorizontal: RFValue(40),
    padding: 0,
    paddingTop: 2,
    borderBottomWidth: RFValue(1),
    borderBottomColor: '#C4C4C4',
  },
});