Customize the default navigation bar for React-Native-Router-Flux

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 (
 
< br /> 
  key="screen2" component={challengeScreen} navTransparent={1}
 navBar={NavBar}
 />

 
 );
};
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 {< br /> render() {
 return (

 
 
  Actions.homeScreen()}>
  source={require('./Images/back-arrow.png') }
 style={styles.backarrowStyle} />
 

  source={require('./Images/help.png' )}
 style={styles.helpStyle} />


 source={require('./Images/setting.png')}< br />style={styles.settingStyle} />
 

 );
 }

}
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'
< br /> },
 settingStyle: {
 resizeMode:'contain',
 width: 50,
 height: 50,
 justifyContent:'flex-end', 
 position:'relative',
 left: 210
 }
};


export default NavBar;
This helps me customize the navigation bar. Hope it can help you

I am using react native router flux to navigate in my react native project. Router flux has A default navBar.

Is there a way to customize navBar? For example, change the color of the text and background.

I tried to edit the file in node_modules/react-native-router-flux/src/navBar.js, but it doesn't seem to work.

Please help me.

In the Router.js file where you create the scene, give a navBar attribute, for example:

navBar = (NavBar), here my NavBar is actually a NavBar.js file, I customized the navigation bar in it

If it helps, please check my code

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 (
 

 
  key="screen2" component={challengeScreen} navTransparent={1}
 navBar={NavBar}
 /> 

 
 );
};
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 (

 
 
  Actions.homeScreen()}>
  source={require('./Images/back-arrow.png')}
 style={styles.backarrowStyle} />
 

 < Image
 source={require('./Images/help.png')}
 style={styles.helpStyle} />


 source={require('./Images/setting.png')}
style={styles.settingStyle} />
 

 );
 }

}
const styles = {
 backgroundStyle: {
 backgroundColor:'transparent'
 },
 bac karrowStyle: {
 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 helps me customize the navigation bar. Hope it can help you