Search code examples
react-nativeshadowiphone-x

How to remove internal shadow of React Native StackNavigator when using safeAreaView together


I'm using import { SafeAreaView } from 'react-native'; for new iPhone X development, but I'm getting a boring shadow inside the area. How can I remove it?

The image is here

// Code

import { SafeAreaView } from 'react-native';

<SafeAreaView style={styles.safeArea}>
 ...
</SafeAreaView>


// Style
safeArea: {
  flex: 1,
  backgroundColor: colors.background,
},

UPDATE: I figured out that's probably some kind of conflict with the StackNavigator ( with headerMode: 'none'). When I don't have safeAreaView in my code, stack hide the header correctly.

UPDATE 2: @Julien Malige, that's the point I am. Tks enter image description here


Solution

  • I solved the problem using a React Navigation property:

    cardStyle: { shadowColor: 'transparent' }

    const Routes = StackNavigator({
      Identify: { screen: IdentifyRoutes },
    }, {
      headerMode: 'none',
      cardStyle: { shadowColor: 'transparent' },
    });