how is react-native-web implemented

Question

I am working on having a common code for both web and native environments.

I have come across a similar implementation which is react-native-web

Why is native component chosen to work on both browser and native environments? Can't we make the web component of react to work in native?

Answer 1

RNW provides a subset of the components specified in RN, and uses a Babel plugin to substitute references to RN during transpilation.

import { View } from 'react-native'

Becomes

import { View } from 'react-native-web'

It's a bit more complicated than that, but hopefully you'll get the gist.

It's replacing the requested RN implementation with one compatible with ReactJs. It is NOT making the RN component work in a browser, but providing a substitute component that does. The interface is mostly identical, but the implementation is different.

RN is NOT a browser environment, so you can't just use components based on browser fundamentals, such as HTML tags like div .

ReactJs is a framework (via Babel) for transpiling JSX into JS, and for providing a component life cycle, refreshing elements based on state change.