Navigation Bar - React Native

Question

I am creating a mobile application with React Native and I decided to use a navigation bar that comes from the site ' https://github.com/beefe/react-native-navigation-bar ', but I do not know how to use it in my code.

I would like you to send me examples of the navigation bar of the site ' https://github.com/beefe/react-native-navigation-bar '.

Answer 1

This document is clearly shows how to use this component. Just 2 steps:

1. Install package.

    npm install react-native-navigation-bar --save

2. Import and use. Change attributes the way you like.

    import React, { Component } from 'react'; import { Text, View } from 'react-native'; import NavigationBar from 'react-native-navigation-bar'; export default class Example extends Component { render() { return ( <View> <NavigationBar title='Main title' height={50} leftButtonTitle='back' rightButtonTitle='forward' /> <Text>ABC</Text> </View> ); } }

Answer 2

I think you should use a plugin: navigationbar-react-native

First, if you use react-navigation you should hide header-bar and use custom header-bar

 export const RootStack = createStackNavigator( { App: { screen: AppComponent, navigationOptions: { header: null, }, }, }, { initialRouteName: 'App', } );

1, Install package

npm i navigationbar-react-native --save

2, Using

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,Image, View, TouchableOpacity, } from 'react-native'; import NavigationBar from 'navigationbar-react-native'; const ComponentLeft = () => { return( <View style={{ flex: 1, alignItems: 'flex-start'}} > <TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}> <Image source={require('./img/ic_back.png')} style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }} /> <Text style={{ color: 'white', }}>Back Home</Text> </TouchableOpacity> </View> ); }; const ComponentCenter = () => { return( <View style={{ flex: 1, }}> <Image source={require('./img/ic_logo.png')} style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }} /> </View> ); }; const ComponentRight = () => { return( <View style={{ flex: 1, alignItems: 'flex-end', }}> <TouchableOpacity> <Text style={{ color: 'white', }}> Right </Text> </TouchableOpacity> </View> ); }; class App extends Component { render() { return ( <View style={styles.container}> <NavigationBar componentLeft = { () => {<ComponentLeft /> } componentCenter = { () => {<ComponentCenter /> } componentRight = { () => {<ComponentRight /> } navigationBarStyle= {{ backgroundColor: ''#215e79'' }} statusBarStyle = {{ barStyle: 'light-content', backgroundColor: '#215e79' }} /> </View> ); } }

Easy create custom header bar in react native