React Native - 模态不会在 IOS 上打开

Question

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

});

Answer 1

Try this modal package . And also this package supports native drive which gives your app performance.