Customizing default navigation bar of react-native-router-flux - react-native

Question

I am using react native router flux for navigation in my react native project. Router flux has a default navBar.
Is there a way to customize the navBar? like, changing colour of text and background.
I tried editing the file in node_modules/react-native-router-flux/src/navBar.js but it doesn't seem to work.
Please help me.

Answer 1

In your Router.js file where you create your scenes give a navBar property like for eg:
navBar={NavBar} and here my NavBar is actually a NavBar.js file in which I have customized the navigation bar
just have a look on my codes if that helps u
Router.js file:
import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import mainScreen from './components/mainScreen';
import challengeScreen from './components/challengeScreen';
import NavBar from './components/NavBar';
const RouterComponent = () => {
return (
<Router>
<Scene key="root">
<Scene key="homeScreen" component={mainScreen} hideNavBar={1} />
<Scene
key="screen2" component={challengeScreen} navTransparent={1}
navBar={NavBar}
/>
</Scene>
</Router>
);
};
export default RouterComponent;
NavBar.js file
import {
View, Image, StatusBar, TouchableWithoutFeedback
} from 'react-native';
import React, { Component } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';
class NavBar extends Component {
render() {
return (
<View style={styles.backgroundStyle}>
<StatusBar />
<View style={{ flexDirection: 'row' }}>
<TouchableWithoutFeedback onPress={() => Actions.homeScreen()}>
<Image
source={require('./Images/back-arrow.png')}
style={styles.backarrowStyle} />
</TouchableWithoutFeedback>
<Image
source={require('./Images/help.png')}
style={styles.helpStyle} />
<Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
</View>
</View>
);
}
}
const styles = {
backgroundStyle: {
backgroundColor: 'transparent'
},
backarrowStyle: {
resizeMode: 'contain',
flexDirection: 'row',
width: 50,
height: 50,
left: 0,
justifyContent: 'flex-start'
},
helpStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
left: 220,
justifyContent: 'flex-end',
position: 'relative'
},
settingStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
justifyContent: 'flex-end',
position: 'relative',
left: 210
}
};
export default NavBar;
This helped me to customize navigation bar
hope that it helps you

Answer 2

You should add navigationBarStyle property for customizing navigation bar.You can review following code:
<Scene key="key1" icon={TabIcon} title="book-open">
<Scene key="key2" hideNavBar={false}
navigationBarStyle={{backgroundColor:'transparent',marginTop:8, borderBottomWidth:0}}
component={TestComponent}
title=""/>
</Scene>
Also this subject is mentioned in here.https://github.com/aksonov/react-native-router-flux/issues/160

Answer 3

There is a working example in the examples folder of the react-native-router-flux repository.
For instance, your custom navbar would be:
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React from 'react';
import { Actions } from 'react-native-router-flux';
const styles = StyleSheet.create({
container: {
height: Platform.OS === 'ios' ? 64 : 54,
flexDirection: 'row',
paddingTop: 20,
},
navBarItem: {
flex: 1,
justifyContent: 'center',
},
});
export default class CustomNavBar extends React.Component {
// constructor(props) {
// super(props)
// }
_renderLeft() {
if (Actions.currentScene === 'customNavBar1') {
return (
<TouchableOpacity onPress={() => console.log('Hamburger button pressed')} style={[styles.navBarItem, { paddingLeft: 10 }]}>
<Image
style={{ width: 30, height: 50 }}
resizeMode="contain"
source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png' }}
/>
</TouchableOpacity>
);
}
return (
<TouchableOpacity onPress={Actions.pop} style={[styles.navBarItem, { paddingLeft: 10 }]}>
<Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://image.flaticon.com/icons/png/512/0/340.png' }} />
</TouchableOpacity>
);
}
_renderMiddle() {
return (
<View style={styles.navBarItem}>
<Text>{this.props.title}</Text>
</View>
);
}
_renderRight() {
return (
<View style={[styles.navBarItem, { flexDirection: 'row', justifyContent: 'flex-end' }]}>
<TouchableOpacity onPress={() => console.log('Share')} style={{ paddingRight: 10 }}>
<Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/share-512.png' }} />
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log('Search')} style={{ paddingRight: 10 }}>
<Image style={{ width: 30, height: 50 }} resizeMode="contain" source={{ uri: 'https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic//search1600.png' }} />
</TouchableOpacity>
</View>
);
}
render() {
let dinamicStyle = {};
if (Actions.currentScene === 'customNavBar1') {
dinamicStyle = { backgroundColor: 'red' };
} else {
dinamicStyle = { backgroundColor: 'yellow' };
}
return (
<View style={[styles.container, dinamicStyle]}>
{this._renderLeft()}
{this._renderMiddle()}
{this._renderRight()}
</View>
);
}
}
It works perfectly for me. Just don't forget to set the navBar property of your Scene or Stack:
<Scene navBar={CustomNavBar} key='myKey' component={MyComponent} />

Answer 4

react-native-router-flux provide some api to do this, take a look at https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md, maybe titleStyle and navigationBarStyle are what you need.