How to get a blured/ transparent background for stackPresentation: "modal"

[sebastianknopp]

I want to use stackPresentation: "modal" and have a semi-transparent or blured background, so you can see the screen below.

I understand that transparent backgrounds can be achieved by using stackPresentation: "transparentModal", but the presentation is a different one compared to 'modal'. I want to have the same presentation/ behaviour like 'modal' but with a transparent/ blured background.

How can this be achived?

Thanks a lot!

[sebqq]

Did you try to use "transparentModal" option?

Actually, For me it is working for iOS, but on Android I'm not able to see underlaying screen when stackPresentation is set to "transparentModal" either.

[sebastianknopp]

@sebinq thanks a lot for your fast reply.

I guess I didn't explain well enough what I mean. Please have a look at the attached screenshots.

You can easily see how changing stackPresentation from modal to transparentModal changes the complete presentation and not only the background-transparency as one would expect.

I am trying to get the very same behavior as modal has but with a transparent background. This means, the modal has rounded corners, a top margin and the screen in the background appears a bit small smaller/ zoomed out. Just as you can see on the attched screenshots.

Let me know if something is unclear.

[sebqq]

I dont know if you’re able to achieve this from JS code. Did you try to change default background color for screen in your stack?

There is a possibility that you will need to adjust backgroundColor from native code in order to make the very first view transparent.

In other words, If native View has some default background color and stacked JS view is just drawing on it, then I think there is no way to set it from JS side.

But thats just my point of view and I may not be right.

[WoLewicki]

As you can read here https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreen.m#L345 and here https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreen.m#L76, these are the options available for stackPresentation. You can check them and/or read how each of them works to achieve the desired behavior. The modal presentation is resolved to UIModalPresentationAutomatic from iOS 13, and according to https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc it resolves to UIModalPresentationPageSheet in most of the cases. And I am afraid there is no option to make it transparent, but please let me know here if you find something.

[WoLewicki]

@sebastianknopp I looked a bit deeper into it and you can achieve it by applying backgroundColor: 'transparent' here: https://github.com/software-mansion/react-native-screens/blob/master/src/native-stack/views/NativeStackView.tsx#L75. Does it solve your issue?

[sebastianknopp]

@WoLewicki This works! But it is not simply applying backgroundColor: 'transparent'. One needs to use the Themes-System and set the background through the theme to 'transparent'.

Anyway, it works! Thanks a lot!

Here is what I did:

function RootStackNavigation() {
  const MyTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: 'transparent'
    },
  };

  return(
    <NavigationContainer theme={MyTheme}>
      <RootStack.Navigator 
        mode="modal" 
      >
        <RootStack.Screen name="Main" 
          component={MainStackNavigation}
          options={{
            headerShown: false,
          }}
        />
        <MainStack.Screen 
          name="DetailsModal"
          component={DetailsModalScreen} 
          options={{
            stackPresentation: 'modal'
          }}
        />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

[FarouqGov]

Can you tell me How did u use this code please ?