CODEWITHSUNDEEP
react-nativereact-native-web
6be709c0
6be709c0

Reputation: 8461

Cross platform component react-native-web

I use react-native-web and I would like to create cross-platform components. I would like to differentiate each components by platform.

So I followed this tutorial: https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

I have 3 files :
     - friendsList.android.js
     - friendsList.ios.js
     - friendsList.web.js

And for import FriendsList, in the index.android.js, index.ios.js index.web.js : 

Import FriendsList from './friendsList';

On Ios and Android, it works fine. But on the web, it does not recognize the file. I actually have 3 solutions:
- specify when importing: import FriendsList from './friendsList.web';
- define a service who dispatch for each platform
- or to define an alias in webpack: 

 resolve: {
        alias: {
            'react-native': 'react-native-web',
            './friendsList': './friendsList.web',
        },
    },

Is there a way to import .web without this ways ?
Maybe it's not thought to do like that ?

Upvotes: 1

Views: 506

Answers (1)

aparedes
aparedes

Reputation: 58

According to react-native-web getting started documentation, you need to set the extensions.

resolve: {
  // Maps the 'react-native' import to 'react-native-web'.
  alias: {
    'react-native': 'react-native-web'
  },
  // If you're working on a multi-platform React Native app, web-specific
  // module implementations should be written in files using the extension
  // `.web.js`.
  extensions: [ '.web.js', '.js' ]
}

Upvotes: 2

Related Questions