6

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

0xTheL
  • 468
  • 4
  • 12
  • 1
    Have you tried setting the `shadowOpacity` to `0` in the `safeArea` style object? – Eduardo Macêdo Jan 21 '18 at 03:53
  • 1
    I'll try!, but I think my main problem after fight with that, is the stackNavigator... I set it to headerMode: 'none'. When I try it without safeAreaView, everything goes fine, but when safeAreaView is there, the headerMode: 'none' stops hide the header. – 0xTheL Jan 21 '18 at 03:59
  • Nothing changed with shadowOpacity on SafeAreaView – 0xTheL Jan 21 '18 at 12:32
  • Unrelated to the question: how did you do the `backgroundColor: colors.background,` thing? – MoralCode Jul 02 '18 at 20:06
  • Nevermind found it... https://github.com/spencercarli/react-native-meteor-boilerplate/blob/master/RNApp/app/config/styles.js – MoralCode Jul 02 '18 at 21:51

1 Answers1

23

I solved the problem using a React Navigation property:

cardStyle: { shadowColor: 'transparent' }

const Routes = StackNavigator({
  Identify: { screen: IdentifyRoutes },
}, {
  headerMode: 'none',
  cardStyle: { shadowColor: 'transparent' },
});
0xTheL
  • 468
  • 4
  • 12