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

Consider adding some code. https://stackoverflow.com/help/mcve — Palpatim, Jul 12 '17 at 14:23

Rachel Gallen · Answer 1 · 2017-07-14T10:33:07.917

4

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.

edited Jul 14 '17 at 10:33

answered Jul 14 '17 at 10:25

Rachel Gallen

27,943
21
72
81

1

https://github.com/vjeux/react-native/commit/be46ccf4c415f82d1b50bdfa3739543b6288aba9 – Rachel Gallen Jul 14 '17 at 10:29
1

Well, the problem occurs with react-navigation (https://github.com/react-community/react-navigation) not with the react navigator. – Bernat Jul 14 '17 at 15:01
@Bernat ah, i see, will investigate further so.. did you try applying the transition style in the react native? did it have any effect? – Rachel Gallen Jul 14 '17 at 15:38
@Bernat i found an article about custom transitions here https://www.trustedhousesitters.com/engineering/code/react-native-navigation-custom-scene-screen-transitions-and-interpolations/ – Rachel Gallen Jul 14 '17 at 16:08
@Bernat there is more detailed info about the react navigation 'transitioner' component here https://reactnavigation.org/docs/views/transitioner (but i know.. you've probably read it!.. thought i'd post it anyway/might be helpful to others) – Rachel Gallen Jul 14 '17 at 16:13
@Bernat eureka! this other SO answer (which also references the article i mentioned a few minutes ago) https://stackoverflow.com/a/43981835/1675954 seems to have figured this exact issue out.. there's a comment at the end that says "figured it out: import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator' and then default: CardStackStyleInterpolator.forHorizontal(sceneProps)" - try that! – Rachel Gallen Jul 14 '17 at 16:17
I've been able to create the custom transition configuration and apply it to my StackNavigation. Any idea on how to modify the white color? – Bernat Jul 19 '17 at 07:51
@Bernat the answer to how to modify the color is in my answer.. did you not apply the style? If you're looking to modify the header title or tint color, well you have this coded (as #fff) in your question - just change it! – Rachel Gallen Jul 20 '17 at 05:59
http://www.colorhexa.com/ , https://www.w3schools.com/html/html_colors.asp : color pickers – Rachel Gallen Jul 20 '17 at 06:04
I don't see in your answer how to change the (white) background color of the controller when pushing or pulling it, the problem is not with the colors and how to use them – Bernat Jul 20 '17 at 10:11

score 1 · Answer 2 · answered May 07 '18 at 14:57

1

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

answered May 07 '18 at 14:57

NULL SWEΔT

1,827
2
11
13

score 1 · Answer 3 · edited May 25 '21 at 12:16

1

I solved it simply by adding

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

right above my <Stack.Navigator/>

edited May 25 '21 at 12:16

Tomerikoo

18,379
16
47
61

answered May 25 '21 at 11:19

k_krrs

139
7

score 0 · Answer 4 · answered Aug 21 '23 at 07:09

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;

score -1 · Answer 5 · answered Jul 12 '17 at 18:55

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.

Well, it does work for modals, but not for Stack transitions. Any idea how to change those too? — Bernat, Jul 13 '17 at 11:12

Transition background color in React Navigation

Environment

Some code I use to create the StackNavigation

5 Answers5