React-native-master-ui NPM

react-native-master-ui

UI for using in your react native projects (Android and IOS).

Install

npm i react-native-master-ui

yarn add react-native-master-ui

Then

npm i react-native-vector-icons
react-native link

yarn add react-native-vector-icons
react-native link

Simple Usage

import React, {Component} from 'react';
import {View,} from 'react-native';
import {CardView, ListItem, Accordion, StarsRate, Button} from 'react-native-master-ui'

export default class App extends Component {
    
    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Button title={'Sample Button'}/>
            </View>
        )
    }
}

Accordion

Accordion Props

Prop	Type	Default	Description
title	string	null	Title of the accordion.
titleStyle	object	{}	Add your custom style for the title.
headerStyle	object	{}	Add your custom style for the header.
containerStyle	object	{}	You can change style accordion.
isRtl	boolean	false	For the languges are right to left (like: farsi,arabic).
isCard	boolean	false	You have two style of accordion (flat,card) .
iconColor	string	"gray"	Color of arrow icon.

Example

import React, {Component} from 'react';
import {View,} from 'react-native';
import {Accordion} from 'react-native-master-ui'

export default class App extends Component {

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Accordion
                    title={"Headline"}
                    titleStyle={{
                        color: 'red'
                    }}
                    headerStyle={{
                        backgroundColor: 'blue'
                    }}
                    containerStyle={{
                        marginTop: 20
                    }}
                    iconColor={"red"}
                    isCard={true}
                    isRtl={false}
                >
                    <View>
                        .... whatever can be here
                    </View>
                </Accordion>
            </View>
        )
    }
}

Buttons

Button Props

Prop	Type	Default	Description
onPress	function()	undefine	The job you want to happen after click.
title	string	null	Title on the Button.
textStyle	object	{}	Add your custom style for title.
status	string	null	Can be one of: "info","info2","success","warning","danger","aqua"
style	object	{}	Add your custom style for button.
isLinear	isLinear	false	Show button with border and opacity background color.
disable	boolean	false	Button not working when click if disable is true.
isLoading	boolean	false	It shows an indicator instead of title until it's true.
indicatorColor	string	"white"	Color of indicator.

Example

import React, {Component} from 'react';
import {View,} from 'react-native';
import {Button} from 'react-native-master-ui'

export default class App extends Component {

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Button
                    onPress={() => alert("Clicked!")}
                    title={'Sample Button'}
                    textStyle={{fontSize: 16}}
                    status={"info"} /// "info","info2","success","warning","danger"
                    style={{
                        marginTop: 5
                    }}
                    isLinear={true}
                    disable={false}
                    isLoading={false}
                    indicatorColor={"black"}
                />
            </View>
        )
    }
}

CardView

CardView Props

Prop	Type	Default	Description
onPress	function()	undefine	The job you want to happen after click on card. (Do'nt use this props if you're card is not clickable!)
avatarImage	string	null	The image top of card. (Does not show if not used)
avatarImageStyle	object	{}	Add your custom style for avatar image.
avatarTitle	string	null	Like names or user name ... . (Does not show if not used)
avatarTitleStyle	object	{}	Add your custom style for avatar title.
image	string	null	The image you want to show. (Does not show if not used)
imageStyle	object	{}	Add your custom style for image.
resizeMode	string	null	Change the resize mode of image for custom purpose.
title	string	null	Title of what ever you want to show. (Does not show if not used)
titleStyle	object	{}	Add your custom style for title.
content	string	null	Description of what ever you want to show. (Does not show if not used)
contentStyle	object	{}	Add your custom style for Description.
numberOfLines	number	null	Number of "content" line you want to show.
isFlat	boolean	false	There is two style "Card" if it's false and "Flat" if it's true.
style	object	{}	Add your custom style for CardView.
isRtlText	boolean	false	For the languges are right to left (like: farsi,arabic).
isRtlAvatar	boolean	false	For the languges are right to left (like: farsi,arabic).

Example

import React, {Component} from 'react';
import {View,} from 'react-native';
import {CardView} from 'react-native-master-ui'

export default class App extends Component {

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <CardView
                    onPress={() => alert('clicked!')}
                    avatarImage={{uri:'image link address'}}
                    avatarImageStyle={{width:20,height:20}}
                    avatarTitle={'UserName'}
                    avatarTitleStyle={{fontSize:10}}
                    image={{uri:'image link address'}}
                    imageStyle={{borderRadius: 5}}
                    resizeMode={'cover'}
                    title={"Title text"}
                    titleStyle={{fontFamily: 'my custom font'}}
                    content={'here is the description'}
                    contentStyle={{fontFamily: 'my custom font'}}
                    numberOfLines={2}
                    isFlat={false}
                    style={{backgroundColor: 'red'}}
                    isRtlText={false}
                    isRtlAvatar={false}
                >
                    <View>whatever can be here(like: buttons, links, texts...)</View>
                </CardView>
            </View>
        )
    }
}

ListItem

ListItem Props

Prop	Type	Default	Description
onPress	function()	undefine	The job you want to happen after click on card.(Do'nt use this props if you're card is not clickable!)
image	string	null	The image you want to show.
imageStyle	object	{}	Add your custom style for image.
title	string	null	Title of what ever you want to show.
titleStyle	object	{}	Add your custom style for title.
content	string	null	Description of what ever you want to show.
contentStyle	object	{}	Add your custom style for Description.
numberOfLines	number	null	Number of "content" line you want to show.
isCard	boolean	false	There is two style "Card" if it's true and "Flat" if it's false.
style	object	{}	Add your custom style for ListItem.
isRtl	boolean	false	For the languges are right to left (like: farsi,arabic).

Example

import React, {Component} from 'react';
import {View,} from 'react-native';
import {ListItem} from 'react-native-master-ui'

export default class App extends Component {

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <ListItem
                    onPress={() => alert('clicked!')}
                    image={{uri:''}}
                    imageStyle={{
                        borderRadius:5
                    }}
                    title={"Title text"}
                    titleStyle={{
                        fontFamily:'my custom font'
                    }}
                    content={'here is the description'}
                    contentStyle={{
                        fontFamily:'my custom font'
                    }}
                    numberOfLines={2}
                    isCard={false}
                    style={{
                        backgroundColor:'red'
                    }}
                    isRtl={false}
                />
            </View>
        )
    }
}

StarRate

StarsRate Props

Prop	Type	Default	Description
onPress	function()	undefine	It will update the star count. if you don't want user able to change count of stars just remove this porps.
starSelected	number	0	Count of selected stars.
starStyle	object	{}	Add your custom style for each star.
starColor	string	"gold"	Color of stars or hearts.
starSize	number	14	Size of stars or hearts.
isHeart	boolean	false	False will show "Stars" and true will show "Hearts"

Example

import React, {Component} from 'react';
import {View,} from 'react-native';
import {StarsRate} from 'react-native-master-ui'

export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            starCount: 3
        }
    }

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <StarsRate
                    onPress={(starCount) => this.setState({starCount})}
                    starSelected={this.state.starCount}
                    starStyle={{
                        margin: 10,
                        backgroundColor: 'white'
                    }}
                    starColor={'red'}
                    starSize={20}
                    isHeart={false}
                />
            </View>
        )
    }
}

MIT Licensed