react-native-html-tag

So you are a web developer who is familier with the HTML tags and stuffs. Now you are exploring react-native to get into mobile app development. Wise choice indeed! But you cannot get along the react-native's native render system, Using View, Text, Scrollview etc are very annoying for the first time users. But you should get along with the terminology!

If you are in a rush, then check this package. You write your normal html tags, and this package will covert the tags for you. But yes, you have to use Capital Tag like, Div, P, Body, H1, H2 ...... you get the point! (React native doesn't support lowercase component name!)

Instalation

npm install --save react-native-html-tag

Use

import {Body, Section, Div} from 'react-native-html-tag'

Make sure to import the tag you are using from the package.

Overview (v0.0.1)

Body Puts all child components into a ScrollView. A Scrollable Div in HTML term!

Section Puts all Child components into a View with flex:1

Div

Puts all Child components into a View. Also you can just write strings inside a Div, this package took care of Text strings must be rendered within a <Text> component error. But be careful on using that. using Text or P/H1/H2/H3/H4/H5 tag is recommended here.

You can add overflow / overflow={true} / overflow='auto' to make a Div scrollable

P

Works just like Normal html <p> tag.

H1

Works just like Normal html <h1> tag.

H2

Works just like Normal html <h2> tag.

H3

Works just like Normal html <h3> tag.

H4

Works just like Normal html <h4> tag.

H5

Works just like Normal html <h5> tag.

Add your own styles if you want on the tags using React's default StyleSheet property