React Native - Modal doesn't open on IOS

I have the following Modal. On Android everthing works perfect but on IOS the modal doesn't open at all. It just shows the overlay on the half of the screen and that's it. Can you please check the following implementation?

For this implementation I have use the following library that is inside the react-native library https://reactnative.dev/docs/modal

<Modal animationType={FADE_ANIMATION_TYPE} transparent={true} visible={isVisible}>
            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
              <View style={style.outerContainer}>
                <View style={style.innerConainer}>
                  <View style={style.topConainer}>
                    <View>
                      <Text>{title}</Text>
                    </View>
                    <View style={style.cancel}>
                      <TouchableWithoutFeedback onPress={cancel}>
                        <Ionicons name={'close-outline'} size={24} color={red} />
                      </TouchableWithoutFeedback>
                    </View>
                  </View>
                  <View style={style.contentContainer}>
                    <View style={style.subject}>
                      <Text style={style.label}>Title</Text>
                      <TextInput
                        style={style.textInput}
                        onChangeText={text => setText(text)}
                        placeholderTextColor={'blue'}
                      />
                    </View>
                    <View style={style.comment}>
                      <View style={style.header}>
                        <Text>Message:</Text>
                        <Text>{addingComment}</Text>
                      </View>
                      <TextInput
                        style={style.textInput}
                        placeholderTextColor={blueText}
                        onChangeText={text => setComment(text)}
                        maxLength={1024}
                        multiline={true}
                      />
                    </View>
                  </View>
                  <Button
                    title='Send'
                    onPress={onSendPress}
                    disabled='fasle'
                  />
                </View>
              </View>
            </KeyboardAvoidingView>
          </Modal>

The styles:

export default StyleSheet.create({
  outerContainer: {
    backgroundColor: '#808080',
    flex: 1,
    justifyContent: 'space-evenly',
  },
  container: {
    backgroundColor: '#808080',
    paddingVertical: 20,
    flexDirection: 'column',
    position: 'absolute',
    bottom: height / 2.5,
    width: '95%',
    alignItems: 'center',
    height: height / 6,
    borderRadius: 15,
    zIndex: 800,
  },
  innerConainer: {
    backgroundColor: '#808080',
    paddingVertical: 10,
    flexDirection: 'column',
    position: 'absolute',
    bottom: 0,
    width: '100%',
    alignItems: 'center',
    height: height / 2,
    borderRadius: 20,
    zIndex: 800,
  },
  topContainer: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-between',
    width: '100%',
    paddingHorizontal: 15,
    paddingVertical: 13,
    flexWrap: 'wrap',
  },
  cancel: {
    height: 100,
  },
  buttonsContainer: {
    flex: 2,
    flexDirection: 'row',
  },
  contentContainer: {
    width: '100%',
    backgroundColor: '#f7f8ff',
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    flex: 8,
  },
  comment: {
    padding: 10,
    margin: 17,
    backgroundColor: white,
    height: 85,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  textInput: {
    marginRight: 1,
    marginTop: 5,
  },

});