React-Native modal work on Android but not iOS

Question

I have many modals in my app but one particular modal is failing to show on iOS, it works fine on Android devices. It appears to be opening but not becoming visible as I can not interact with the page "behind" the modal but can still interact with the app's footer menu.

This is my modal that is casuing the problem.

import React from 'react';
import styles from './styles';
import {Cross2} from 'assets/svgs';
import {Button, Typography} from 'components';
import {Image, View} from 'react-native';
import {Success} from 'assets/pngs';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

interface IProps {
  onHide: () => void;
}

export default function ReviewSuccess({onHide}: IProps) {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  return (
    <View style={styles.reservationContainer}>
      <View style={styles.header}>
        <Cross2 onPress={onHide} />
      </View>

      <Image source={Success} style={styles.successImage} />

      <View style={[styles.mt50]} />

      <Typography variant="heading1">Confirmed!</Typography>

      <Button
        onPress={() => {
          navigation.navigate('Home', {screen: 'HomeScreen'});
          onHide();
        }}
        title="Home"
        style={styles.mt25}
      />
    </View>
  );
}

which is being called in the following

const openModalWithDelay = (modalRef: any) => {
    if(Platform.OS === 'android') {
      modalRef?.current?.open();
    } else {
      setTimeout(() => {
        modalRef?.current?.open();
      }, 300);
    }
  };

const onShowReviewSuccessModal = () => {
    modalizeRef?.current?.close();
    openModalWithDelay(reviewSuccessRef);
};

<Modal withReactModal ref={reviewSuccessRef} modalTopOffset={250}>
    <ReviewSuccess onHide={onCloseReviewSuccessModal} />
</Modal>

React-Native modal work on Android but not iOS

0 Answers0