nialloc9 / ReactNativeWebPoc

A proof of concept to build a reusable component library for native and web.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Proof of concept for react native web using typescript

web ios

Prerequisites

install

npm i -g yarn

git clone git@github.com:nialloc9/ReactNativeWebPoc.git

cd ReactNativeWebPoc

yarn install

run

    yarn start:ios
    yarn start:android
    yarn start:web

lint

    yarn lint

test

    yarn test

deploy

    yarn build

Minimum Criteria

  • Components can run across ios, android, and web.

  • Find a way to not use inline styling on web (react native web does this)

  • Component style should be easily (and fully) customisable.

  • A common style interface should be used for ios, android, and web.

  • Typescript is to be implemented.

Approach

  • Components are modulized where base/core components (view/text/image etc) are built and more complicated components (collections) built on top of these.

  • Base components can be used on their own to allow greater flexibility in the event the user wishes to create their own custom collections.

  • Limit styles allowed to only ones that are needed. As more are needed they can be added.

  • For web components a new file is created for each base component where it maps styles to web values. Style is removed from props before being passed to the Dom.

  • Web components implement styled-components library to eliminate the need to use inline styling as react-native-web does.

  • Collections pass down multiple objects as props to override the style for each base element used.

About

A proof of concept to build a reusable component library for native and web.


Languages

Language:TypeScript 67.6%Language:Objective-C 14.0%Language:Python 7.0%Language:HTML 5.3%Language:Java 4.7%Language:JavaScript 1.4%