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, },});