Reactnative-ui-bootstrap NPM

reactnative-ui-bootstrap

Apply bootstrap style like website to your react-native project. Easy use for developers move from web-development to react-native development. Ready-made components help you save time in styling components. Enjoy!

New update 💛

Support more break-point: sm,md,lg,xl.

Feel free to feed back me at GitHub about this update

Installation

Easy installation.

npm install reactnative-ui-bootstrap

Usage

If you are new in web-development, please see Bootstrap Documents. If you've already have experience in web-development, please Enjoy!

How to use class.

import {Div} from 'reactnative-ui-bootstrap'

...
      return(
        <Div className={'row'}>
          <Div className={'col-6 col-md-9'}>
            ...Some content here
          </Div>
        </Div>
      )
...

Components

Some component in reactnative-ui-bootstrap:

Div
Button
Card
Input
Gradient
A
P
AnimatedView
Popup

Default color

'PRIMARY' : '#007bff' 'SECONDARY' : '#6c757d' 'SUCCESS' : '#28a745' 'DANGER' : '#dc3545' 'WARNING' : '#ffc107' 'INFOR' : '#17a2b8' 'LIGHT' : '#f8f9fa' 'DARK' : '#343a40'

Div

Has all default props of View Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.

Button

Has all default props of Button Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
type	"primary"	`string`	Apply Bootstrap button color by default color.
loadingColor	"white"	`string`	Spinner color.
backGround	null	`string`	Custom background color.
disabled	false	`boolean`	Set to `true` to disable button.
radius	0	`number`	Custom button radius.
uppercase	false	`boolean`	Set to `true` to set uppercase text in inside.
lowercase	false	`boolean`	Set to `true` to set lowercase text in inside.
capitalize	false	`boolean`	Set to `true` to set capitalize text in inside.
loading	false	`boolean`	Set to `true` to show loading.
shadow	false	`boolean`	Set to `true` to enable button shadow.
shadowColor	null	`string`	Custom button shadow color.
shadowElevation	false	`number`	Custom button shadow elevation.
shadowWidth	null	`number`	Custom button shadow width.
shadowHeight	false	`number`	Custom button shadow height.
shadowOpacity	null	`number`	Custom button shadow opacity.
shadowRadius	null	`number`	Custom button shadow radius.
round	false	`boolean`	Change button style to round.
transparent	false	`boolean`	Change button style to transparent.
onlyIcon	false	`boolean`	Display only icon in button.
loadingSize	"small"	`string`	Size of loading in button: `small`, `large` or number
opacity	0.8	`number`	Opacity when click into button.
icon	null	`string`	Name of the icon.
iconSize	14	`number`	Size of the icon.
iconFamily	null	`string`	Font family of the icon.
textStyle	{}	`any`	Style apply to content inside.
full	false	`boolean`	Button show full width.

Card

Has all default props of View Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
imageHeader	false	`boolean`	Apply image to top of card. Only visible when prop `imageHeaderSource` has value and this set to `true`
imageHeaderSource	null	`string`	Image header source.
imageHeaderHeight	200	`number`	Image header height.
styleImageHeader	{}	`any`	Image header custom style.
imageBottom	false	`boolean`	Apply image to bottom of card. Only visible when prop `imageBottomSource` has value and this set to `true`
imageBottomSource	null	`string`	Image bottom source.
imageBottomHeight	200	`number`	Image bottom height.
styleImageBottom	{}	`any`	Image bottom custom style.
styleContent	{}	`any`	Custom style content in card.
header	false	`boolean`	Apply header on top of card. Only visible when prop `headerContent` has value and this set to `true`
headerContent	null	`any`	Content apply to header. (String or Component are accepted)
headerTextStyle	{}	`any`	Style apply to header when `headerContent` is string
footer	false	`boolean`	Apply footer on top of card. Only visible when prop `footerContent` has value and this set to `true`
footerContent	null	`any`	Content apply to footer. (String or Component are accepted)
footerTextStyle	{}	`any`	Style apply to footer when `footerContent` is string

Input

Has all default props of TextInput Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
border	true	`boolean`	Apply border style to input
underline	false	`boolean`	Apply underline style to input
round	false	`boolean`	Apply round style to input
borderless	false	`boolean`	Apply borderless style to input
outLineColor	'#c3c3c3'	`string`	Border color of input
hightLightColor	'#2fbec3'	`string`	Border color of input when input is focused
placeholderTextColor	'#959595'	`string`	Placeholder color of input
descriptionInBottom	null	`string`	Description in bottom of input
descriptionInBottomStyle	{}	`any`	Style of description in bottom
label	null	`string`	Label on top of input
labelStyle	{}	`any`	Style of label
inputStyle	{}	`any`	Custom style of input
iconFront	null	`any`	Icon component
iconBack	null	`any`	Icon component

Gradient

Has all default props of View Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space. `className` not stable in this component
height	80	`number`	Apply height to component
width	80	`number`	Apply width to component
horizontal	true	`boolean`	Direction of gradient is horizontal. Set to `false` to get vertical direction
firstColor	"#c94b4b"	`string`	First gradient color
secondColor	"#4b134f"	`string`	Second gradient color
revert	false	`boolean`	Set to `true` to revert gradient direction
contentStyle	{}	`any`	Style of content

A

Has all default props of TouchableOpacity Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
href	null	`string`	Link will open in browser.

P

Has all default props of Text Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
h1	false	`boolean`	Scale font size to h1.
h2	false	`boolean`	Scale font size to h2.
h3	false	`boolean`	Scale font size to h3.
h4	false	`boolean`	Scale font size to h4.
h5	false	`boolean`	Scale font size to h5.
p	false	`boolean`	Scale font size to p.
color	null	`string`	Set text color.
bold	false	`boolean`	Set text bold.
italic	false	`boolean`	Set text italic.
center	false	`boolean`	Set text center.
size	null	`number`	Set text size.

AnimatedView

Has all default props of Modal Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
animatePropertyName	null	`array`	Array of style props want to animate. Example `[{property: 'marginTop',startValue: -10, endValue: 15, animateDuration: 1000, animationDelay: 500 , easing: 'bounce'}]` animationDelay should start from `500`. If want to 2 animations start at the same time, you should set `animationDelay` have same value. All animation easing support: `'bounce','cubic','back','elastic','ease','inOut','in','out','sin','linear','quad'`
shouldStartAnimation	false	`boolean`	Set to `true` to start animation.

Popup

Has all default props of View Component.

Prop	Default	Type	Description
className	""	`string`	Apply Bootstrap file by apply classes above. Separate by space.
showPopup	false	`any`	Set to `true` to show popup.
styleContent	{}	`any`	Style of content.
popUpWidth	(width*2)/3 (width of screen)	`number`	Width of popup.
exitWithOutsideClick	true	`boolean`	Set to `false` to disable exit pop up when click outside of popup.
popupBackground	'#00000033'	`string`	Background color of outside
popUpPosition	'middle'	`string`	Position of popup. Support position: `'middle', 'bottom','top'`
customExitButton	null	`any`	Component to replace default exit button.