Transition background color in React Navigation

Question

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.

---

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);

Answer 1

The issue you refer to (#563) was closed in April 2015 by updating the default transition color from #555555 to transparent. A transition color may be applied by setting a background style in the navigator like so:

<Navigator
  style={{flex: 1}} // style for the navigator container
  transitionerStyle={{backgroundColor: 'black'}} // style applied to the scenes container
 ...

It's unsuprising that you were unaware of this fix; someone ('alvaromb') commented on the fixed issue over a year later, in May 2016, remarking "Shouldn't this be documented?" so evidently users are unaware of this.

Apparently, a similar background-color issue (and other issues) was fixed in version 4 of react-native-router-flux (released July 8th 2017), presumably by same/similar code-update.