React DOM and Native — Code Sharing
Hey ! As a developer you know all we want is automatize things and write less duplicated codes. For instance, say you want a make an application which works at all of the three platforms (Web, IOS, Android). React Native deals with IOS and Android. We also have React DOM for Web. So all we need to do is share components between DOM and Native. And actually it is quite easy. We have all the tools we need. Let`s see…
Approach
React Native crashes with React DOM, and React DOM crashes with Reac Native, So these guys never should be together. Assume they are enemies, and both have same weapon.
My approach is creating components from the properties of the component. To be more clear please take a look at the image below:
Container imports the component and sends the ui components into it. Code will be like following:
Just like React-Redux, I am connecting ui components with my screen. Here is my connect function:
Obviously I don`t need to return a new function here. It would be enough if I return it at the first function, but I did that way in order to add some new features at the future.
If you can succeed to map all ui components styles, you will have exactly the same appearance at all three platforms. Point is, how you can accomplish this ?
Well I prefer to use 3rd party libraries such as Material-UI, but yes; still there is much to do.
Since never tried in a project, I can’t say if it is fast or not for now. Using ui components from properties is still looks fine to me.
Here is a full example of the project, please take a look:
