Transparent background for header using createStackNavigator, React Native

Solution:

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

To achieve this effect you need to follow those steps:

1. Change the style of the navigation header with absolute position, transparent background and no border.
2. Use ImageBackground component as parent component for your screen with the image that you want to use as background.
3. 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;

this worked for me :

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

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