react-native-html-tag
Version:
A package for the developers who are more comfortable with using html tags rather than react native tags, you can use html tags on your react native project and this package with convert the code to native react native tags for you. Cheers!
65 lines (33 loc) • 1.91 kB
Markdown
## [react-native-html-tag](https://www.npmjs.com/package/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