Copilot doesn't work with modal on iOS

[davidnum]

Current Behavior Copilot doesn't work with modal on iOS, but working on android.

Input Code

class CopilotModal extends React.PureComponent<Props, State> {
  static defaultProps = {
    onStart: () => {},
    onEnd: () => {},
  };

  state = {
    visible: true,
  };

  componentDidMount() {
      this.props.start();
  }

  componentWillUnmount() {
    this.props.copilotEvents.off('stop');
  }

  onClose = () => {
    this.setState({ visible: false });
  };

  render() {
    const { visible } = this.state;
    const { children } = this.props;

    return (
      <Modal visible={visible} transparent onRequestClose={() => {}}>
         <CopilotStep
              text="Some text"
              order={1}
              name="recommended"
            >
              <CopilotView style={{ width: width / 2, height: 55 }} />
            </CopilotStep>
      </Modal>
    );
  }
}

const wrapped = copilot({
  overlay: 'svg', // or 'view'
  animated: true, // or false
  androidStatusBarVisible: false,
  tooltipComponent: props => <CopilotTooltip {...props} />,
  stepNumberComponent: () => <View />,
})(CopilotModal);

Expected behavior/code Should show copilot in modal

Environment

• Device: iPhone 4s, IPhone X
• OS: iOS 9, 10, 12
• react-native-copilot: 2.4.1
• react-native: 0.57.7
• react-native-svg: 8.0.8

[arojunior]

Well, I don't think it will be possible... React native does not support multiple modals in iOS. It is an old problem. :|

[anabeatrizzz]

Same issue. In my case I have a button inside the modal and when I press it, the modal should be hidden and start the tour, but this is not happening. The modal is being hidden but the tour doesn't starts.

Edit: I solved my issue adding onModalHide prop on Modal component, like that:

import { useCopilot } from "react-native-copilot"

const MyModal = () => {
  const { start, stop, isLastStep } = useCopilot()
  
  const handleOnModalHide = () => {
    if(!isLastStep){
      start()
    } else {
      stop()
    }
  }
  
  return(
    <Modal onModalHide={handleOnModalHide}>
      {/* */}
    </Modal>
  )
}