3

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.

gwalshington
  • 1,418
  • 2
  • 30
  • 60
  • What were the previous versions of the libs? It'd be great if you could create an [MRE](https://stackoverflow.com/help/minimal-reproducible-example). Sometimes, you figure out the issue while isolating it. – diedu Aug 24 '22 at 02:09
  • It looks like an unsolved bug https://github.com/aksonov/react-native-router-flux/issues/3740 not much can do – diedu Aug 28 '22 at 03:04

1 Answers1

-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;
MehdiNasiriPoor
  • 314
  • 2
  • 13