Navigation Bar - React Native - navigationbar

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:
Install package.
npm install react-native-navigation-bar --save
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