React Native keyboardAvoidingView Not working

Question

I'm trying to implement keyboardAvoidView
but something is wrong and I don't know what.
Also made components for the input fields.
Do I need to use SafeAreaView or View in the input

Input

  return (
    <View style={styles.propertyContainer}>
      <Text style={styles.textStyle}>{propertyName}:</Text>
      <TextInput
        style={styles.inputStyle}
        placeholder={propertyPlaceholder}
        onChangeText={propertyChange}
      />
    </View>
  );

Keyboard screen

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "position"}
        style={styles.container}
      >
        {/* Title */}
        <MeetupProperty
          propertyName={"Title"}
          propertyPlaceholder={"Enter your title here"}
          propertyChange={(txt) => setTitle(txt)}
        />

        {/* Address */}
        <MeetupProperty
          propertyName={"Address"}
          propertyPlaceholder={"Enter your address here"}
          propertyChange={(txt) => setAddress(txt)}
        />

        {/* Description */}
        <MeetupProperty
          propertyName={"Description"}
          propertyPlaceholder={"Enter your description here"}
          propertyChange={(txt) => setDescription(txt)}
        />

        <MeetupBtnAdd
          propertyBtnTitle={"Add new meetup"}
          propertyBtnPress={addPressHandler}
        />
      </KeyboardAvoidingView>
    </TouchableWithoutFeedback>
  );

Styles

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  properyContainer: {
    marginTop: 30,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  textStyle: { fontSize: 24, fontFamily: "Fredoka" },
  inputStyle: {
    borderColor: "#808080",
    borderWidth: 1,
    borderRadius: 5,
    width: "100%",
    height: 50,
    padding: 5,
  },
  btn: {
    borderRadius: 5,
    backgroundColor: "lightseagreen",
    padding: 10,
    width: "100%",
  },
  btnText: { textTransform: "capitalize", color: "white", textAlign: "center" },
});

Answer 1

Keep KeyboardAvoidingView as parent container of all other views, and add flex:1 to it.

return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          
    {/* Your views here */}


        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );




const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    margin:20,
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  }

});