React Navigation, How To Place Screens Top On Each Other

Question

I want to achieve a screen like below image.

I have this transition:

const MyTransition = {
  transitionSpec: {
    open: {
      animation: 'timing',
      config: {
        duration: 750,
      },
    },
    close: {
      animation: 'timing',
      config: {
        duration: 750,
      },
    },
  },
  cardStyleInterpolator: ({ current, next, layouts }) => {
    return {
      cardStyle: {
        transform: [
          {
            perspective: 750
          },
          {
            translateY: current.progress.interpolate({
              inputRange: [0,  1],
              outputRange: [height -54,  54],
            }),
          },
          {
            scale: current.progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [1.2, 1, .9],
            }),
          },
    
        ],
      },
      overlayStyle: {
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
    }
  },
}

Navigator:

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    cardOverlayEnabled: true,
    gestureEnabled: true,
    ...MyTransition,
  }}
>
  <Stack.Screen name="ScreenA" component={ScreenA} />
  <Stack.Screen name="ScreenB" component={ScreenB} mode='modal'/>
</Stack.Navigator>

Please see the transition animation here with Loom video

(BTW, can I embed gif/Loom video into question?)

As you can see from the video,

-Screen A has unnessessray top empty space.

-Screen A and Screen B doesn't have top border radius.

(If I use borderRadius, I got this error: Property 'borderRadius' is not supported by native animated module)

-After Screen B opened, cannot see the Screen A under the Screen B.

How can I solve the above issues?

Edit: In case Loom video doesn't open, I am adding images.

score 1 · Accepted Answer · answered Aug 24 '21 at 23:58

1

For React Navigation 6:

<Stack.Navigator
  screenOptions={{
    presentation: "modal",
    gestureEnabled: true,
  }}
>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>

https://reactnavigation.org/docs/stack-navigator#presentation

For React Navigation 5:

import { TransitionPresets } from "@react-navigation/stack";

// ...

<Stack.Navigator
  mode="modal"
  screenOptions={({ route, navigation }) => ({
    gestureEnabled: true,
    cardOverlayEnabled: true,
    headerStatusBarHeight:
      navigation.getState().routes.findIndex(r => r.key === route.key) > 0
        ? 0
        : undefined,
    ...TransitionPresets.ModalPresentationIOS
  })}
>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>;

https://reactnavigation.org/docs/5.x/stack-navigator#pre-made-configs

answered Aug 24 '21 at 23:58

satya164

9,464
2
31
42

Thanks, It did work but I have 3 screens in stack and I only want to apply `TransitionPresets` to one screen. Is that possible? – ilvthsgm Aug 25 '21 at 02:28
1

You can specify it in `options` of the screens you want for v6. But if you use v5, you need to create a separate modal stack for such modals. – satya164 Aug 25 '21 at 09:51
Header has unnecessary padding. `headerStatusBarHeight` is also not working. I got `navigation.getState is not a function` error. Do you know how can I solve this? – ilvthsgm Aug 25 '21 at 19:43
Are you sure you're not on old version? – satya164 Aug 26 '21 at 07:03
Yes, my version is `"@react-navigation/native": "^5.9.4"` – ilvthsgm Aug 26 '21 at 08:20
1

Latest is 5.9.8 – satya164 Aug 26 '21 at 09:14

score 0 · Answer 2 · answered Jun 22 '23 at 00:29

0

  <Stack.Screen 
   name="Profile" 
   component={Profile}   
   options={{
          ...TransitionPresets.ModalSlideFromBottomIOS,
   }}
  />

This fixed the issue...

answered Jun 22 '23 at 00:29

Ahmet Mirzooglu

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 23 '23 at 17:47

React Navigation, How To Place Screens Top On Each Other

2 Answers2