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. stackoverflow.com/help/mcve

Palpatim
– Palpatim

2017-07-12 14:23:33 +00:00
Commented Jul 12, 2017 at 14:23 — Palpatim
– Palpatim, Commented Jul 12, 2017 at 14:23
yes, show the code

YaSh Chaudhary
– YaSh Chaudhary

2017-07-17 13:12:07 +00:00
Commented Jul 17, 2017 at 13:12 — YaSh Chaudhary
– YaSh Chaudhary, Commented Jul 17, 2017 at 13:12

Rachel Gallen · Accepted Answer · 2017-07-14 10:33:07Z

4

+50

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, 2017 at 10:33

answered Jul 14, 2017 at 10:25

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Rachel Gallen Over a year ago

github.com/vjeux/react-native/commit/…

Bernat Over a year ago

Well, the problem occurs with react-navigation (github.com/react-community/react-navigation) not with the react navigator.

Rachel Gallen Over a year ago

@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 Over a year ago

@Bernat i found an article about custom transitions here trustedhousesitters.com/engineering/code/…

Rachel Gallen Over a year ago

@Bernat there is more detailed info about the react navigation 'transitioner' component here reactnavigation.org/docs/views/transitioner (but i know.. you've probably read it!.. thought i'd post it anyway/might be helpful to others)

|

Tomerikoo · Accepted Answer · 2021-05-25 12:16:05Z

3

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, 2021 at 12:16

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered May 25, 2021 at 11:19

k_krrs

5455 silver badges14 bronze badges

Comments

NULL SWEΔT · Accepted Answer · 2018-05-07 14:57:23Z

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 7, 2018 at 14:57

NULL SWEΔT

2,0672 gold badges13 silver badges13 bronze badges

Comments

ND verma · Accepted Answer · 2023-08-21 07:09:43Z

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;

Jason Gaare · Accepted Answer · 2017-07-12 18:55:25Z

-1

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.

answered Jul 12, 2017 at 18:55

Jason Gaare

1,52110 silver badges19 bronze badges

1 Comment

Bernat Over a year ago

Well, it does work for modals, but not for Stack transitions. Any idea how to change those too?

Collectives™ on Stack Overflow

Transition background color in React Navigation

Environment

Some code I use to create the StackNavigation

5 Answers 5

10 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Environment

Some code I use to create the StackNavigation

5 Answers 5

10 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related