React-native-web: Guide for making cross platform components?

[KjellConnelly]

I'm not sure if this is the place to write this, as the React-Native board I wrote on originally was actually for React-Native, and not React-Native-Web. Anyways, my question goes as follows:

I've built a React-Native component that works for iOS and Android. Can you write a guide on how to make this work for React-Native-Web? Currently, to get the web version working, I had to create a component.web.js file specifically to insert this one component, as the iOS/Android version cannot be imported via webpack. Would just be nice to be able to have one file that works for iOS, Android, and Web the way a component could with only things like

P.S. I'm more of an iOS developer myself, so my understanding of bridges and how JS works is fairly limited.

[c-h-]

@KjellConnelly I'm not really involved with this project but I've played around with it. Here's my advice on making components cross-platform from experience using all the React Native variants:

• Write main code in a file like MyButton.js
• Extend the core file, MyButton.js, with functionality for specific platforms by placing those extra features into another file, MyButtonExtensions.<platform>.js. Import that file into the core file and the packager will get the right one for the platform from its extension (make sure webpack resolve.extensions is set correctly). Make a blank MyButtonExtensions.js that unsupported platforms can import without erroring.
• For small amounts of platform-specific JS, use Platform.OS to conditionally execute JS. E.g. if (Platform.OS === 'web') window.scrollTo(0,0);
• "Guard" use of NativeModules if your component utilizes that. In other words, before calling NativeModules, check if NativeModules exists and its child properties are defined correctly. This will prevent it erroring on platforms that don't have a NativeModule implemented (like windows and macos) or can't support NativeModules (web)

For fun I'm currently building a boilerplate that supports every RN variant without much platform specific code, and a sample project that consumes it, so I've been encountering a lot of the difficulties you're talking about.

[necolas]

Between the comment above and the documentation titled "React Native" you should have enough info. If you need something more specific, please share more specific details. Thanks