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

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

• javascript
• reactjs
• react-native
• react-navigation

• 4 Consider adding some code. stackoverflow.com/help/mcve – Palpatim Commented Jul 12, 2017 at 14:23
• yes, show the code – YaSh Chaudhary Commented Jul 17, 2017 at 13:12

5 Answers 5

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.

I solved it simply by adding

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

right above my <Stack.Navigator/>

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".

work for me

import React from 'react';
import { View, Text } from 'react-native';
    
    const MyScreen = () => {
      return (
        <View>
          <Text>Screen Content</Text>
        </View>
      );
    };
    
    MyScreen.navigationOptions = {
      cardStyle: { backgroundColor: '#F0F0F0' }, 
    };
    
    export default MyScreen;


import { createStackNavigator } from '@react-navigation/stack';
import MyScreen from './MyScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: { backgroundColor: '#F0F0F0' },
      }}
    >
      <Stack.Screen name="Home" component={MyScreen} />
      {/* Add more screens */}
    </Stack.Navigator>
  );
};

export default AppNavigator;

Look in AppDelegate.m:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Example"
                                           initialProperties:nil
                                               launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

Try altering the backgroundColor on rootview! That may help you accomplish your goal.