react-native-router-flux can't change background color

Question

. 。 Answers to this question are eligible for a +200 reputation bounty. gwalshington wants to to this question. 。

I recently upgrade all my dependencies, and now the background of my app is permanently grey on every page.

I can not figure out why, but have narrowed it down to the fact that react-native-router-flux is not recognizing backgroundColor properties that used to work.

I've tried to put it everywhere, but none of these solutions work:

App.js

    return (
    <View style={{
        alignContent: 'center',
        justifyContent: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
        backgroundColor: 'pink'
      }}>
      <StatusBar hidden={true} />
      <Provider store={store}>
        <Router sceneStyle={{backgroundColor: 'pink'}} />
      </Provider>
    </View>
)

And in Router.js

const RouterComponent = () => {
  return (
    <Router sceneStyle={{backgroundColor: 'pink'}}>
      <Scene key="root" duration={0} sceneStyle={{backgroundColor: 'pink'}}>
          <Scene key="main" sceneStyle={{backgroundColor: 'pink', alignItems: 'center', justifyContent: 'center'}} hideNavBar={true}>
            <Scene key="dashboard" component={DashboardContainer} hideNavBar={true} initial sceneStyle={{backgroundColor: 'pink'}} />
          </Scene>
        </Scene>
    </Router>
  )
}

I've pretty much added backgroundColor: 'pink' everywhere the docs suggest. What am I not understanding?

"react-native-router-flux": "^4.3.1", "react-native": "0.68.2", "react": "17.0.2",

PS. I know I can set the color on each component individually, but before I updated this, I could set the background color across the app, and this is what I want to do.

Answer 1

I didn't use react-native-router-flux, but the simple way is: make a custom component like below and use it every where:

const MyCustomView = props => {
 return(
   <View style={{backgroundColor:'pink'}}>
    {children}
   </View>
  );
 }
 export default MyCustomView;