React-native-router-flux: Unable to change default background color of gray

[d7laungani]

I added a margin to the tabview page from the example and the color behind is gray I inspected the element and it is part of the Animated component of the card in the stack navigator. I have been unable to modify the background to white. I have tried changing the style using the getSceneStyle property of the router but it still does not work. The code I have implemented is shown below.

<Router createReducer={reducerCreate} hideNavBar  getSceneStyle={getSceneStyle}>
            <Scene key="root" hideNavBar={true} style={{backgroundColor: 'white'}} >
                <Scene key="launch" component={InitialScreen} initial hideNavBar style={{ backgroundColor:'white'}}/>
                <Scene key="login" component={Login} title="Login" duration={1}/>
                <Scene key="register" component={Register} duration={1}/>
                <Scene key="tabbar" hideNavBar tabs={true} style={{backgroundColor: 'white'}} >
                    <Scene key="tab1"  initial title="Home" hideNavBar>
                        <Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />
                        <Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:'black'}} hideNavBar={false}/>
                    </Scene>
                    <Scene key="tab2"  title="Stores" hideNavBar={true}>
                        <Scene key="tab2_1" component={TabView} title="Tab #2_1" onLeft={()=>alert("Left button!")} leftTitle="Left"/>
                        <Scene key="tab2_2" component={TabView} title="Tab #2_2"/>
                    </Scene>
                    <Scene key="tab3" title="Share" component={TabView}  hideNavBar={true} />
                    <Scene key="tab4"  title="My Accoount" hideNavBar={true}>
                        <Scene key="tab4_1" component={ProfilePage} title="My Account" />
                        <Scene key="tab4_2" component={ProfileUpdatePage} title="Tab #4_2"/>
                    </Scene>
                </Scene>
            </Scene>

    </Router>
)

const getSceneStyle = () => ({
      backgroundColor: 'white',
      shadowOpacity:1,
      shadowRadius: 3,
})

[luco]

You can use this:

cardStyle: {
            backgroundColor: 'white'
      }

On your scenes config.

[aksonov]

I will add support of getSceneStyle for upcoming release. Try cardStyle as @luco suggested

[Amin52J]

@aksonov The cardStyle solution that @luco suggested doesn't solve the issue, any other suggestions?

[luco]

How are you setting your scenes configs?

[Amin52J]

you can check it out in the issue I opened before: #2039

[Amin52J]

I also noticed that barButtonTextStyle, barButtonIconStyle and leftButtonIconStyle don't work either.

[luco]

Try this way:

 var sceneConfig = {
      cardStyle: {
            backgroundColor: 'white'
      }
}

<Scene key="home" {...sceneConfig}>
                          <Scene key="homeMain" component={Home}/>
                        </Scene>

It should work.

[appdevtim]

I know this issue was closed a few weeks ago, but I am having the same issue since upgrading to version 4 and haven't been able to find a solution. Can someone explain to me how sceneConfig works? I can't seem to make that solution work for me. I am currently

[d7laungani]

do what @luco did exactly. An additional thing i had to do is also add the {...sceneconfig} line to all other routes beneath it too.

[mcneilsimon]

@luco worked for me too, can you explain as to how this works though? As in where does the cardStyle come from

[jairbj]

@d7laungani , I've added this style to my router component and it has solved for me.

Example:

const RouterComponent = () => {
  return (
    <Router {...sceneConfig} >
      <Stack key="auth" hideNavBar >
        <Scene key="login" component={LoginForm}/>
      </Stack>
    </Router>
  );
};

var sceneConfig = {
  cardStyle: {
    backgroundColor: 'white'
  }
}

[kallayyash]

use : headerTintColor="black"