Transition background color in React Navigation

Viewed 4177

When transitioning from one Screen to another (either using card or modal mode), there's a white background that transitions its alpha from 0 o 1, during the screen to screen animation.

I'd like to know how to change the color, if possible.

enter image description here


Environment

  • React Native Navigation version: 1.0.0-beta.11
  • React Native version: 0.45.1
  • Platform: iOS and Android
  • Device: iOS 10.3, iPhone 6

Some code I use to create the StackNavigation

Note: The modal background color was solved by @Jason Gaare's answer https://stackoverflow.com/a/45065542/976655, the problem now persists on the StackNavigation

let navOptions = {
    headerMode: 'screen',
    navigationOptions: ({navigation}) => ({
        headerTintColor: '#fff',
        headerStyle: {
            backgroundColor: '#1A1A1A',
        },
        headerTitleStyle: {
            color: '#fff',
            fontFamily: 'my-font'
        },
        headerLeft: (<ImageBtn
                        buttonStyle={{ .. }}
                        buttonHighlightStyle={{}}
                        source={ myImage }
                        imageStyle={{ ... }}
                        callback={navigation.goBack.bind(this, null)} />)
    })
};

const MyTab = StackNavigator({
    MyScreen1: {screen: MyScreen1},
    MyScreen2: {screen: MyScreen2},
    MyScreen3: {screen: MyScreen3},
    MyScreen4: {screen: MyScreen4},
}, navOptions);
4 Answers

I solved this issue by adding this to my StackNavigator:

cardStyle: {
  backgroundColor: 'rgba(0,0,0,0)',
  opacity: 1,
},

Now the transition is completely transparent. I'm using "react-navigation": "^1.5.11".

I solved it simply by adding

 <View style={{ 
    position: 'absolute',
    height: '100%', 
    width: '100%', 
    backgroundColor: <whatever-color-you-want> 
 }}/>

right above my <Stack.Navigator/>

Related