Transparent background for header using createStackNavigator, React Native

Question

I created a project using CRNA that uses React-Navigation. In one of the screen I have a background image that cover the entire screen and I want to including the header.

Like this image :

Should I just hide the header and use a View that contains the element that I want? If yes will this cause any trouble in case of deep linking?

Solution

React Navigation offers a cool props called headerTransparent that can be used in order to render something under the header.

So the code at the should look like this :

static navigationOptions = {
    headerTransparent: true
  }

when i set headerTransparent=true , my back button in header is not working..you have any solution regarding this. — MAhipal Singh, Oct 04 '18 at 11:16
Can you share your code? and remember is headerTransparent : true not headerTransparent = true! — t97, Oct 05 '18 at 08:39
In case anyone else cannot get headerTransparent to work: Make sure you are not using in your code as this will prevent the header from overlapping your content :) — Green, Apr 30 '23 at 20:22

Abraham · Answer 1 · 2021-01-31T01:12:05.520

43

Right now with React Navigation 5 we can do something like this:

{
    headerShown: true,
    headerTransparent: true,
}

For example:

const Screen = ({ navigation }) => {
  navigation.setOptions({
    headerShown: true,
    headerTransparent: true,
  });

  return (
    <View>
      <Text>Render your component</Text>
    </View>
  );
};

edited Jan 31 '21 at 01:12

answered May 11 '20 at 04:58

Abraham

8,525
5
47
53

4

Hi, how to make the transparent header to transition to opaque when scrolling bottom? – kaizen Aug 19 '20 at 08:17
Where are you even placing that const?? That looks very wrong! – showtime Jan 30 '21 at 00:16

score 12 · Answer 2 · answered Feb 22 '20 at 22:27

12

this worked for me :

navigationOptions: {
  ...
  headerTransparent: true,
  headerStyle: {
      backgroundColor: 'transparent',
      ...
  }
}

answered Feb 22 '20 at 22:27

Shayan Moghadam

1,860
2
10
19

score 9 · Accepted Answer · edited Jul 18 '19 at 13:13

To achieve this effect you need to follow those steps:

Change the style of the navigation header with absolute position, transparent background and no border.
Use ImageBackground component as parent component for your screen with the image that you want to use as background.
Add padding top to this ImageBackground to fix the overlapping.

So your code should looks something similar to this:

import React, {Component} from 'react';
import {
  StyleSheet,
  Button,
  ImageBackground,
  Platform,
} from 'react-native';
import {
  createStackNavigator,
} from 'react-navigation';


class HomeScreen extends Component {
  render() {
    return (
        <ImageBackground
            style={styles.container}
            source={require('./images/bg.png')}
        >
          <Button
              onPress={() => {}}
              title="Just a button"
          />
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 60 : 80,
  }
});

const App = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      headerStyle: {
        position: 'absolute',
        backgroundColor: 'transparent',
        zIndex: 100,
        top: 0,
        left: 0,
        right: 0,
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 0,
      }
    },
  }
})

export default App;

Thank you for you answer it somehow helped me to get the solution. — t97, Sep 24 '18 at 18:12
You will need to add "headerTransparent: true" at the same level as "headerStyle". — Andrew, Sep 10 '20 at 18:11
@Naoufal please update the answer to include `headerTransparent: true` in the `navigationOptions` — mxdi9i7, Mar 07 '21 at 21:40
I used this with a mish-mash of other code to have the desired effect. — Wylie, Jul 21 '22 at 15:16

score 5 · Answer 4 · answered Nov 09 '21 at 14:45

If using React Navigation 6.x, the option is the same headerTransparent:

             <Stack.Screen
                  name="BottomTab"
                  component={BottomTabNavigator}
                  options={{
                    headerTransparent: true,
                  }}
              />

score 4 · Answer 5 · answered Nov 16 '19 at 09:10

4

Solution:

navigationOptions: {
    headerTransparent: {
      position: 'absolute',
      backgroundColor: 'transparent',
      zIndex: 100,
      top: 0,
      left: 0,
      right: 0
    }

answered Nov 16 '19 at 09:10

Ali Akram

4,803
3
29
38

This is what is used for react navigation v5 – JimmyWj4EHiM Feb 20 '20 at 22:20
2

doesnt work for me on android.. (works only on ios) – Timur Ridjanovic Feb 16 '21 at 05:07

score 3 · Answer 6 · answered Dec 17 '21 at 10:56

You need to use headerTransparent and headerShadowVisible otherwise if you just use headerTransparent a shadow will be left. This works with React Navigation 6.x. See de docs here https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

<Stack.Screen name='Main' component={Main} 
    options={{ 
        title: 'MainPage',
        headerTransparent: true,
        headerShadowVisible: false
    }} 
/>

score 1 · Answer 7 · answered Jan 21 '20 at 15:53

I have achieved it setting the navigation options like this:

BirdDetails.navigationOptions = () => {
  return {
    ...NavStyle,
    headerStyle: {
      backgroundColor: 'transparent',
    },
    headerTransparent: {
      position: 'absolute',
    },
    headerLeft: <Back></Back>,
    headerRight: <HeaderDetailsRight></HeaderDetailsRight>,
  };
};

score 1 · Answer 8 · answered Apr 12 '20 at 09:37

With V5

<NavigationContainer>
        <Stack.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerShown: true,
                headerTransparent:true
            }}
        >
            <Stack.Screen name="Home" component={HomeScreen}/>
            <Stack.Screen name="Detail" component={DetailScreen}/>
            <Stack.Screen name="Setting" component={SettingScreen}/>
        </Stack.Navigator>
    </NavigationContainer>

score 0 · Answer 9 · answered Jun 01 '21 at 12:51

0

this worked for me:

headerStyle: {elevation:0, backgroundColor:"transparent"}

set elevation to 0 so there is no shadow.

answered Jun 01 '21 at 12:51

Qasim Zubair

177
2
3

score 0 · Answer 10 · answered Jul 26 '21 at 17:03

I did it this way, it has one flaw though, in the the background color must be hard-coded. This approach is specifically for ScrollView and starts out transparent becoming opaque (keeping the original text).

Since this was designed for native stack navigator to leverage iOS' large text the headerHeight also needs to be adjusted to the proper values.

  const navigation = useNavigation();
  return (
    <ScrollView
      onLayout={(e) => {
        navigation.setOptions({
          headerStyle: {
            backgroundColor: "transparent",
          },
        });
      }}
      onScroll={(e) => {
        const headerOpacity =
          Math.min(
            Math.max(e.nativeEvent.contentOffset.y, 0) / headerHeight,
            1.0
          ) ?? 0.0;
          navigation.setOptions({
            headerStyle: {
              elevation: headerOpacity,
              backgroundColor: `rgba(255,0,0,${headerOpacity})`,
            },
          });
      }}
      scrollEventThrottle={16}
      contentInsetAdjustmentBehavior="never"
    >

score 0 · Answer 11 · answered Aug 31 '23 at 12:45

As of August 2023 and react-navigation v6+, I had to use both headerStyle and headerTransparent:

<Stack.Screen
    name="Home"
    component={Home}
    options={({ navigation }) => ({
        headerStyle: {
            backgroundColor: 'transparent',
        },
        headerTransparent: true,
    })}
/>

Transparent background for header using createStackNavigator, React Native

Solution

11 Answers11