title: How can I make the custom navigation bar transparent in RNRF
body: <p>I have tried all the options in react-native-router-flux like: <code>navigationBarStyle</code> or <code>navTransparent</code> and also
  <code>navigationBarStyle={[STYLES.navBar]}</code>
  all of these are not working while trying to make the custom navigation bar transparent Is there any ways to make it transparent using react-navigation and should I change from react-native-router-flux to react-navigation to do this I have posted it as an issue in Git Hub 
  here is the link :<a href="https://github.com/aksonov/react-native-router-flux/issues/2132" rel="nofollow noreferrer">Github issue #2132</a></p>
  
  <p>since I found it hard using react-navigation I have switched to RNRF is there any solution to make the custom navBar transparent other than switching from RNRF to RN or is it a bug in RN</p>
  
  <p><a href="https://i.stack.imgur.com/HZGsi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZGsi.jpg" alt="this is what my navBar looks like now "></a></p>
  
  <p>here's the code that i use in my NavBar.js file :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
   View, Image, StatusBar, TouchableWithoutFeedback
  } from 'react-native';
  import React, { Component } from 'react';
  import { Actions } from 'react-native-router-flux';
  
  class NavBar extends Component {
    render() {
      return (
        &lt;View style={styles.backgroundStyle}&gt;
        &lt;StatusBar /&gt;
        &lt;View style={{ flexDirection: 'row' }}&gt;
        &lt;TouchableWithoutFeedback onPress={() =&gt; Actions.pop()}&gt;
        &lt;Image
      source={require('./Images/back-arrow.png')}
      style={styles.backarrowStyle} /&gt;
        &lt;/TouchableWithoutFeedback&gt;
  
        &lt;Image
    source={require('./Images/help.png')}
    style={styles.helpStyle} /&gt;
  
  
    &lt;Image
  source={require('./Images/setting.png')}
  style={styles.settingStyle} /&gt;
      &lt;/View&gt;
  &lt;/View&gt;
      );
    }
  
  }
  const styles = {
    backgroundStyle: {
   backgroundColor: 'transparent',
    },
    backarrowStyle: {
      resizeMode: 'contain',
      flexDirection: 'row',
      width: 55,
      height: 55,
      left: 0,
      justifyContent: 'flex-start'
    },
    helpStyle: {
      resizeMode: 'contain',
        width: 50,
        height: 50,
        left: 210,
        justifyContent: 'flex-end',
        position: 'relative'
  
    },
    settingStyle: {
      resizeMode: 'contain',
      width: 50,
      height: 50,
      justifyContent: 'flex-end',
    position: 'relative',
    left: 210
  }
  };
  
  
  export default NavBar;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is my Router.js file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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';
  import Toss from './components/Toss';
  
  const RouterComponent = () =&gt; {
    return (
      &lt;Router&gt;
  &lt;Scene key="root"&gt;
      &lt;Scene key="homeScreen" component={MainScreen} hideNavBar={1} /&gt;
      &lt;Scene
       key="screen2" component={ChallengeScreen}
       navBar={NavBar}
          /&gt;
      &lt;Scene
       key="screen3" component={Toss}
     navBar={NavBar}
          /&gt;
  &lt;/Scene&gt;
      &lt;/Router&gt;
    );
  };
  export default RouterComponent;</code></pre>
  </div>
  </div>
  </p>