react-native-navibar

Easy to customize your NavigationBar for ReactNative app.

Getting started

• Install the react-native-navibar from npm

npm install react-native-navibar --save

• Import it in the file where you want to use it

import NaviBar from 'react-native-navibar';

• Add it into the class, for example

export default class SecondVC extends Component {
    render() {
        return (
            <View style = {{flex: 1}}>
                <NaviBar
                    StatusBarStyle = 'default'
                    statusBarBackgroundColor = '#00f'                    
                    
                    naviBackgroundColor = '#fff'
                    titleClickAction = {() => Alert.alert('It\'s facebook logo')}
                    titleImg = {{uri: titleImg}}

                    leftImgBtn1 = {NaviBackIcon}
                    leftBtn1Action = {() => this.props.navigator.pop()}
                    leftImgBtn2 = {{uri: webImg}}
                    leftBtn2Action = {() => Alert.alert('leftBtn2Action')}

                    rightTextBtn1 = 'world'
                    rightTextBtn1Color = '#f00'
                    rightBtn1Action = {() => Alert.alert('rightBtn1Action')}
                    rightImgBtn2 = {{uri: webImg}}
                    rightBtn2Action = {() => Alert.alert('rightBtn2Action')}
                />
                <View style = {{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#726dd1'}}>
                    <Text>I am the SecondVC</Text>
                    <Text>try to click the 'Back' button and push to the first view</Text>
                </View>
            </View>
        );
    }
}

API

| --StatusBar-- |Description | -------------------------- |------------- | StatusBarStyle |'default' or 'light-content' | statusBarBackgroundColor |

| --NaviBar-- |Description | -------------------------- |------------- | naviBackgroundColor |

| --TitleView-- |Description | -------------------------- |------------- | title | | titleClickAction | | titleTextColor | | titleImg |

| --LeftButtonGroup-- |Description | -------------------------- |------------- | leftTextBtn1 | | leftTextBtn1Color | | leftImgBtn1 | | leftBtn1Action | | leftTextBtn2 | | leftTextBtn2Color | | leftImgBtn2 | | leftBtn2Action |

| --RightButtonGroup-- |Description | -------------------------- |------------- | rightTextBtn1 | | rightTextBtn1Color | | rightImgBtn1 | | rightBtn1Action | | rightTextBtn2 | | rightTextBtn2Color | | rightImgBtn2 | | rightBtn2Action |

If any bug found, please submit an issue!