Support react-native platform-specific extension

[saschatimme]

From the react-native docs:

For example, say you have the following files in your project:

BigButton.ios.js
BigButton.android.js
You can then require the component as follows:

const BigButton = require('./BigButton');

This works since react-native ships a custom javascript bundler by default.

It would be good to have the possibility to generate such file names with bucklescript. Probably some sort of name mangling would be necessary.

[bobzhang]

how is it different from ButtonIos ad ButtonAndroid?

[saschatimme]

The React Native packager (now extracted as metro-bundler) has as a hardcoded resolution rule to check for the name[.platform].js pattern:
https://github.com/facebook/metro-bundler/blob/74e78ee43f73d0452dcce0db0887f055cf7abbee/packages/metro-bundler/src/node-haste/lib/parsePlatformFilePath.js#L30

[rafayepes]

how is it different from ButtonIos ad ButtonAndroid?

It only bundles the one that matches your platform. It can be achieved for react-native-web with webpack as well. It a common system in the RN ecosystem to to build platform-specfic components.

So the alternative I guess that would be to add static-if's that open the right module based on platform. But will be something very manual and cumbersome.

[bobzhang]

How do you achieve that producing Button.ios.js and Button.android.js at the same time?

[MoOx]

I am facing the same issue. It's even blocking me with .web.js (RNW + webpack resolve option)

(eg https://github.com/facebookincubator/create-react-app/blob/a1c5b8f7054ac0ac708a498c2a6308f3ed1cb8f0/packages/react-scripts/config/webpack.config.dev.js#L93)

I saw that BS accept a option "suffix": ".whatever.js" to generate but that's clearly not possible if you have to deal with several suffix at the same time.
I would like to have a single command that could compile my File.js and my File.platform.js to 2 files, not one (because as I am writing it's compiling each file, but is writting those at the same place).

[MoOx]

Just an idea (I have in my case used a workaround using some webpack config since I have an issue with .web.js): using Platform.select might help to require the right file. See https://facebook.github.io/react-native/docs/next/platform-specific-code.html#docsNav for more info (Platform is available via bs-react-native)

[MoOx]

How do you achieve that producing Button.ios.js and Button.android.js at the same time?

Currently we have the following behavior

• Something.re: module: Something, compiled Something.js
• Something.else.re: module: Something, compiled Something.js
• Something.el.se.re: module: Something, compiled Something.js

@bobzhang How I see it what should happen is the following

• Something.re: module: Something, compiled Something.js
• Something.else.re: module: Something, compiled Something.else.js
• Something.el.se.re: module: Something, compiled Something.el.se.js

Maybe it's not the ultimate solution, but at least we are not completely dropping everything after the first dot, ignoring silently the first intention.
At least if the solution needs more reflexion, we could throw an error if there is multiple dots in the filename?

[vknez]

I am experiencing similar challenges, and @MoOx's suggestions would help.

I have a TypeScript + ReasonML React Native app that is compiled for 3 platforms: iOS, Android, and web. Quite often I need to make a distinction whether I'm requiring a component on web or native, and before introducing ReasonML I had the following approach (pretty common in React Native):

I create two platform-specific files: MyComponent.native.tsx and MyComponent.web.tsx (native could be further split into ios|android). Then from the index.ts I do import { MyComponent} from "./MyComponent";. React Native correctly chooses which file to use for the import.

My current alternative is to use JS (TS) wrapper components (with names mentioned above) on top of Reason files (MyComponentNative.re, MyComponentWeb.re), in order to be able to use those platform-specific extensions and import the specific bs.js component. This is not a big deal if those components are used only from the JavaScript world, but I need them in Reason as well (eg. a component that is the same on all platforms, but uses MyComponent).

[MoOx]

Reminder for those looking for this, best quick workaround

• Make your ThingPlatform.js for each platform
• Make a Thing.{platform}.js which basically import/export ThingPlatform.bs.js for each platform
• Make a Thing.re that is a binding of Thing.*.js

Since reason-react 0.7 & zero cost bindings, the import/export step is not painful.

But an official solution would be nice, but that could involve validating interfaces or all Thing.*.re & I understand that this requires work.