How can I use two different Modals imported from different dependencies in React Native?

Question

I am trying to use modal in my react native app. I got two different modals both from different dependencies. One works for only IOS and Android, and the other works only for web. So I tried to rename one as I import it and check the platform before showing the modal. Unfortunately this does not work. Here is what I tried.

import { Platform, Modal} from 'react-native';
import {Modal as WebModal} from 'modal-react-native-web';

<View>
   {Platform.OS === 'web' ?
      <WebModal
          animationType="slide"
          visible={this.state.addScheduleVisible}
          onRequestClose={() => this.toggleAddScheduleModal()}
      >
          <AddSCheduleModal closeModal={() => this.toggleAddScheduleModal()} />
      </WebModal>
     :
     <Modal
          animationType="slide"
          visible={this.state.addScheduleVisible}
          onRequestClose={() => this.toggleAddScheduleModal()}
      >
          <AddSCheduleModal closeModal={() => this.toggleAddScheduleModal()} />
      </Modal>
</View>

The mobile modal works well but it just shows a white page on the web when I run it without any error message. How should I do it, please?

Answer 1

As per the documentation there is no value called 'web' its one of these

'ios' | 'android' | 'native' | 'default'

So you have two options

Either to use {Platform.OS === 'default' ? and use it as web or do the other way {Platform.OS === 'ios' || Platform.OS === 'android' and render the mobile Modal

You current issue of the white screen is because all 3 scenarios opens the mobile modal