How to change default background colour in React Native

Question

I recently updated from RN 0.60 to 0.65, and after hours of debugging I can get my app to build and run again. However, for some reason the background colour of my app has changed from white to gray.

I'm using react-native-router-flux for navigation, but either the styling is broken in the latest react-native release, or I'm missing something obvious.

Here's how it has always been set up:

const RouterComponent = () => {
  const sceneConfig = {
    cardStyle: {
      backgroundColor: 'white',
    },
  };

  return (
    <Router {...sceneConfig}/>
    [...]
    </Router>

This no longer does anything. Here's what else I've tried:

• Directly adding style properties to <Router> using sceneStyle, as recommended in the docs
• Directly adding style properties to each individual scene by using style property

Neither of these approaches work, and I'm now stuck with an app that has a gray background (#f2f2f2) on every screen. I'm not even sure if this is an issue with react-native-router-flux but it definitely seems like the most likely cause.

Digging through the issues on the Github repo, I found one person flagging that this could be an incompatibility with react-native-screens, which seems to have been added to my project as a result of the upgrade to RN 0.65. This is a shot in the dark, as I'm not even sure what that library is used for.

Has anyone managed to change the background colour of their app on RN 0.65 and react-native-router-flux v4.3.0?

Edit:

Here's an example of how I tried to style individual scenes, which didn't work:

          <Scene
            title={'Profile'}
            renderTitle={() => <View />}
            // Neither of the below options has any effect
            sceneStyle={{backgroundColor: 'red'}}
            style={{backgroundColor: 'red'}}
            key="profile"
            hideNavBar
            icon={TabIcon}
            iconName="account-circle-outline"
            back={false}
            component={Profile}
          />

Answer 1

I suggest you create a wrapper component and wrap your pages on it to easily manage the specification.

this is the way I use it in my applications:

const MainView = ({children}) => {
  return (
    <View style={styles.container}>{children}</View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ff0",
  },
});

Now, use this component in other screens, for example in the HomeScreen:

const HomeScreen = () => {
  // rest of the codes ...

  return (
    <MainView>
      // rest of the codes ...
    </MainView>
  )
}

You can even pass the container style through props to the MainView instead of creating the style on it. in this way, you can pass different styles in different screens.