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?
// 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.
I solved the problem using a React Navigation property:
cardStyle: { shadowColor: 'transparent' }
const Routes = StackNavigator({
Identify: { screen: IdentifyRoutes },
}, {
headerMode: 'none',
cardStyle: { shadowColor: 'transparent' },
});