Repository navigation
Support react-native platform-specific extension #1436
Description
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.
Activity
bobzhang commentedon Aug 28, 2017
how is it different from ButtonIos ad ButtonAndroid?
saschatimme commentedon Aug 28, 2017
The React Native packager (now extracted as metro-bundler) has as a hardcoded resolution rule to check for the
name[.platform].jspattern:https://github.com/facebook/metro-bundler/blob/74e78ee43f73d0452dcce0db0887f055cf7abbee/packages/metro-bundler/src/node-haste/lib/parsePlatformFilePath.js#L30
rafayepes commentedon Aug 29, 2017
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 commentedon Sep 25, 2017
How do you achieve that producing
Button.ios.jsandButton.android.jsat the same time?MoOx commentedon Dec 14, 2017
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.jsand myFile.platform.jsto 2 files, not one (because as I am writing it's compiling each file, but is writting those at the same place).MoOx commentedon Dec 14, 2017
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 commentedon Dec 16, 2018
Currently we have the following behavior
Something.re: module:Something, compiledSomething.jsSomething.else.re: module:Something, compiledSomething.jsSomething.el.se.re: module:Something, compiledSomething.js@bobzhang How I see it what should happen is the following
Something.re: module:Something, compiledSomething.jsSomething.else.re: module:Something, compiledSomething.else.jsSomething.el.se.re: module:Something, compiledSomething.el.se.jsMaybe 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 commentedon Nov 10, 2019
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.tsxandMyComponent.web.tsx(nativecould be further split intoios|android). Then from theindex.tsI doimport { 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 specificbs.jscomponent. 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 usesMyComponent).MoOx commentedon Jan 22, 2020
Reminder for those looking for this, best quick workaround
ThingPlatform.jsfor each platformThing.{platform}.jswhich basically import/exportThingPlatform.bs.jsfor each platformThing.rethat is a binding of Thing.*.jsSince 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.allow . in file names to provide xx.ios.js/xx.android.js (#1436)
allow . in file names to provide xx.ios.js/xx.android.js (#1436)
Merge pull request #4690 from rescript-lang/fix_1436
ryyppy commentedon Jan 12, 2021
I think this is fixed now. Closed.
7 remaining items
Freddy03h commentedon May 21, 2023
😞
fhammerschmidt commentedon May 21, 2023
Yes, this is still an issue and should be reopened IMO.
Except if we really won't fix it which I do not hope for.
cc @cristianoc @ryyppy @cknitt
Freddy03h commentedon May 22, 2023
@fhammerschmidt thank you!
The issue was very well explained by @MoOx, for now it's still unusable…
github-actions commentedon Aug 26, 2025
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
fhammerschmidt commentedon Aug 26, 2025
Bad bot
github-actions commentedon Aug 23, 2026
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Freddy03h commentedon Aug 23, 2026
still