One Design System for both React and React Native
- Vilva Athiban P B
I teach @ JsFactory.in
Passionate about Browser
Open Source is
I code on JS, React, GraphQL
Are you a Startup?
It's 2019 already, and Online presence has become almost mandatory for any and every business
Online Presence - Website (Optimized for mobile), Android App and iOS app
Problems in Online Presence...
As a startup, you need things moving fast
As a new Product, there could be so many changes in terms of features
It's challenging to build separate teams for Web, Android, and iOS and maintaining consistency in the product across platforms in a startup environment
These cost a lot to the company in terms of money and reputation, especially during early stages.
What is Mono Component?
Mono Component is an ideology where we build a single component and reuse it both for React (Web) and React - Native (iOS & Android) without changing a single line of code.
We will see how to build one in a while...
How does it solve the Problems?
A single code base for Web, iOS, and Android, thereby enabling easy maintenance and consistency across platforms
This makes the development faster, thereby pushing your product ahead
Live Coding - Fingers crossed
Steps to build MonoComponent Application
- Setup React native application with `expo`
- Setup React application using CRA
- Install styled-components in React native application
- Merge React Application to React native application
- Test their working before proceeding
- Change the main entry point and group App into `src`
- Create the Design system
- Implement MonoComponent
- Enjoy your life
( For my reference, have a bad memory )
Cons of MonoComponent
- UX Design has to be made to satisfy all platforms
- React Native doesn't support CSS yet
- All the basic components have to be created and used from the Design system
- Create multiple versions of a component in a few edge-cases
- Few CSS properties cant be used in React Native
Though there are few minor cons with this approach, Mono components are highly useful and profitable for scaling startups with small teams. The learning curve for developers are also very low in this approach.
Any questions, Reach out to me
Feedbacks are much appreciated to develop myself
By Vilva Athiban