How are you doing code sharing between web views and native? Is this an (open-source??) high-level component library that conditionally compiles to either <div>'s or <View>'s? Or did you actually find a way to render ReactDOM components within React Native inside some sort of controlled web view? The latter IMO would be a holy grail for companies trying to transition large ReactDOM codebases to native apps gradually.
So we've tried a lot of things to maximize code sharing. Our initial goal was to share non-visual code like reducers/action-creators/libs/utils etc… This was pretty interesting but it didn't give us the amount of sharing that we wanted. We were still building multiple versions of many things.
The next approach we started on was using https://github.com/necolas/react-native-web. This was very exciting and very fun to work with. However, we found it difficult to optimize the web experience. Most of our traffic is on the website so we are spending a lot of time optimizing the web experience. This might not line up with other's experience but we kind of came to the conclusion that react-native-web works great for apps where the native app is the primary driver and you want to offer a web experience as a secondary experience. This became more clear when we started trying to work with our SEO team. And again when we started trying to build responsive designs with react-native-web. Doable but we ended up spending a ton of time to make the web work the way we wanted to.
Eventually we decided to go a different direction. Most of our display logic is the same or very similar between the mobile web/ios/android with a few exceptions. We found that mixing ReactNative with the webview component gave us the ability to use webviews to share the majority of the code that can be shared. When we need more native functionality we communicate with postMessage and we have access to ReactNative. Once in ReactNative if we need to go down to iOS specific or Android specific code we have the ability to do that too. We found this to be much more powerful than Cordova and the user experience is honestly amazing. This is still a work in progress but we are excited about what we've seen so far.
Very cool. Are you driving the webview from React Native, or driving React Native from React/Redux code running in the webview? I imagine the latter would provide a seamless transition path for web-first shops, and you could probably do cool things with JSX syntax to make proxies for native components that feel like web components.
I think long term most of the things will be driven from the webview. Currently we are experimenting with taking existing native apps and replacing entire "tabs" with a RN/WebView experience. So it kind of feels like we are steering from the native/ ReactNative side kind of? Over time I think it will tip the other direction as we replace more and more of our native apps with RN/WebView.
One of the things we swap to react-native was to do a barcode scanner. With WebRTC support in iOS11 we may not even need to do that for long.
Currently I use this functionality exclusively for platform specific branching, without any platform-specific conditional logic in my codebase whatsoever. So to give a really trivial example, you can have something like this:
In App.js (shared as-is across platforms):
import * as element from './element'
export default () => (
<element.View>
<element.Text>
Hello world!
</element.Text>
</element.View>
)
In element.js (for web components):
export const View = 'div'
export const Text = 'span'
In element.android.js (for android specific components):
import ReactNative from 'react-native'
export const View = ReactNative.View
export const Text = ReactNative.Text
This way once you build up a set of reusable lower-level cross platform components that share the same APIs, you can compose these components together without any platform specific branching, since the differences between platforms will be abstracted away by these lower level components, which will automatically get loaded by the React Native packager for the appropriate platform.
In practice, a lot of elements don't map one-to-one between web and React Native, and will require a lot more shimming to get at a reasonably close API (forms, inputs, and lists have been especially painful so far), but React's component model gives you all the tools you need to handle and smooth over those mismatches. This approach works great for utility functions that need to provide platform dependent functionality as well, so it's not just for elements.
Disclaimer: My project is still in a super early stage right now, so I'm not sure how well this approach can scale, but so far I'm enjoying the experience a lot more than I thought I would thanks to this approach, due to the lack of need for platform-specific branching logic in my code.
