Search code examples
react-nativewebexpo

Is there a way to conditionally render a node_module

I am trying to use react-native-maps on ios and andriod but I also want my code to work on web. I want to disable this feature on web but make it work on ios and andriod Is there a way to do this?

I have tried this

if (Platform.OS === 'android' || Platform.OS === 'ios') {
      Promise.all([
        import('react-native-maps').then((module) => module.default),
        import('react-native-maps').then((module) => module.Marker),
      ]).then(([MapView, Marker]) => {
        setMapView(MapView);
        setMarker(Marker);
      });
    }

In a useEffect without any luck

Solution

  • I think you should take a look to the "platform specific code" part of the doc, especially the file extension part.

    https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions

    Maybe in your case you could have a BaseComponent.js with Component.js for web and Component.native.js for mobile ?