change Scene background color in react-native-router-flux

Question

This is the code I have in my router.js file (taken from react-native-router-flux docs section):

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';
import PageTwo from './PageTwo';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

How do I change the background color of the "header" (where "go back" arrow appears in the above image)?

I tried this way (adding sceneStyle={{ backgroundColor: 'red'}}):

<Scene key="pageTwo" component={PageTwo} title="PageTwo" sceneStyle={{ backgroundColor: 'red'}} />

but it seems to not be working.

FYI:

"react-native": "0.34.1",
"react-native-router-flux": "^3.35.0"

Answer 1

As described in the library API docs, you have to use navigationBarStyle property in order to change header style.

Try this instead :

<Scene key="pageTwo" component={PageTwo} title="PageTwo" navigationBarStyle={{ backgroundColor: 'red'}} />