Adding borderTopLeftRadius and borderTopRightRadius on Navigator’s screenOptions cardStyle not working

I've got a nested Stack Navigator that renders various screens. The child screens render a card with a border radius on both the top right and left corners. The underlying card style by default displays its corners. I've styled the underlying navigator card on the screenOptions prop as seen below. However, when navigating from one screen to the other the gesture exposes the stack navigator's card view and the corner has no border-radius and is a less than ideal look/feel.

const SCREEN_OPTIONS: StackNavigationOptions = {
  headerShown: false,
  cardStyle: {
    backgroundColor: 'transparent',
    borderTopLeftRadius: 35,
    borderTopRightRadius: 35,
  },
};

<Navigator screenOptions={SCREEN_OPTIONS}>
  <Screen name={GET_STARTED} component={GetStarted} />
  <Screen name={SIGN_UP_FORM} component={SignUpForm} />
</Navigator>

Inspecting the StackNavigator screenshot

White card not in transition with border radius

White card in transition revealing corner on Navigator StackView

React Native Version - v0.64.1 React Navigation Stack - v5.14.5



Read more here: https://stackoverflow.com/questions/67929542/adding-bordertopleftradius-and-bordertoprightradius-on-navigators-screenoptions

Content Attribution

This content was originally published by smeads at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: