How to make a transparent modal with React Navigation 6 and expo

user_3904557 0
Viewed 1517

I have just upgraded from React navigation 5 to 6 and looked at the doc for transparent modals. Unfortunately, I cannot get the previous screen to show under the modal. Instead, I get a gray background.

I have made a snack with my code to showcase my result: https://snack.expo.dev/@divone/transparent-modal-not-working

What am I doing wrong? I seem to have all the elements listed in the doc for it to work.

I am on the managed workflow of expo SDK 43.

react-navigation expo
1 Answers

This works for me. I had a lot of trouble specifying the background colour without it ignoring transparency and completely covering the background in a solid colour. It seems like you need to specify this information for a group, rather than for the specific screen.

You were also assigning properties which the typescript compiler did not think were valid for React Navigation 6. Check that your text editor is showing the compiler errors as you type.

        <Stack.Group
          screenOptions={{
            presentation: "transparentModal",
            contentStyle: { backgroundColor: "#40404040" },
          }}
        >
          <Stack.Screen key="ModalScreen" name="ModalScreen" component={ModalScreen} />
        </Stack.Group>
user_98783850
Related