Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 980
Lucas Silveira Avatar asked Jan 20 '18 22:01

Lucas Silveira


1 Answers

I solved the problem using a React Navigation property:

cardStyle: { shadowColor: 'transparent' }

const Routes = StackNavigator({
  Identify: { screen: IdentifyRoutes },
}, {
  headerMode: 'none',
  cardStyle: { shadowColor: 'transparent' },
});
like image 65
Lucas Silveira Avatar answered Oct 16 '22 16:10

Lucas Silveira