Modal Recipe | Screen Transitions

Goal

This recipe builds a nested modal flow that can turn drag-to-dismiss on and off per nested screen while the modal still reacts to the user's pull gesture.

Use this pattern when a modal represents a flow the user should intentionally finish or exit, such as onboarding, account setup, checkout, or any multi-step setup. The modal can still acknowledge a pull gesture, but the resisted motion communicates that the flow is not casually dismissible.

Route Shape

TEXT

1app/
2  example/
3    _layout.tsx
4    index.tsx
5    modal/
6      _layout.tsx
7      index.tsx
8      b.tsx

The parent stack owns the modal presentation. The nested modal stack owns the screens inside that modal. Each nested screen can update the parent modal's gestureEnabled option when it receives focus.

Parent Layout

app/example/_layout.tsx

1import { interpolate } from "react-native-reanimated";
2import type { ScreenTransitionConfig } from "react-native-screen-transitions";
3import Transition from "react-native-screen-transitions";
4import { BlankStack } from "@/layouts/blank-stack";
5
6const modalOptions: ScreenTransitionConfig = {
7  gestureEnabled: true,
8  gestureTracking: "always",
9  gestureDirection: "vertical",
10  screenStyleInterpolator: ({
11    layouts: {
12      screen: { height },
13    },
14    progress,
15    focused,
16    active,
17    current,
18  }) => {
19    "worklet";
20
21    const isGestureDisabled = !current.options.gestureEnabled;
22
23    const translateY = focused
24      ? interpolate(progress, [0, 1], [height, 0], "clamp")
25      : 0;
26
27    const gestureSensitivity = isGestureDisabled
28      ? interpolate(progress, [0, 0.25], [1, 0.1], "clamp")
29      : 1;
30
31    const gestureReleaseVelocityScale = isGestureDisabled ? 0 : 1;
32
33    const contentStyle = {
34      transform: [{ translateY }],
35      maxHeight: focused ? height * 0.9 : undefined,
36      marginTop: focused ? "auto" : undefined,
37    } as const;
38
39    const backdropStyle = focused
40      ? {
41          backgroundColor: "#00000050",
42          opacity: active.progress,
43        }
44      : undefined;
45
46    return {
47      options: {
48        gestureSensitivity,
49        gestureReleaseVelocityScale,
50      },
51      content: { style: contentStyle },
52      backdrop: { style: backdropStyle },
53    };
54  },
55  transitionSpec: {
56    open: Transition.Specs.DefaultSpec,
57    close: Transition.Specs.DefaultSpec,
58  },
59};
60
61export default function ExampleLayout() {
62  return (
63    <BlankStack>
64      <BlankStack.Screen name="index" />
65      <BlankStack.Screen name="modal" options={modalOptions} />
66    </BlankStack>
67  );
68}

What The Animation Is Communicating

There are a couple of moving pieces in this interpolator, so it is worth calling out what each one is doing.

The modal starts with gestureEnabled: true, so the first modal screen can be dismissed normally. gestureTracking: "always" stays static on the parent modal route, which means gesture values are still tracked after a nested screen disables dismissal.

gestureSensitivity is what gives the disabled modal its resistance. When current.options.gestureEnabled is false, the interpolator lowers sensitivity as the modal gets closer to its settled state. That makes the pull feel damped instead of linear: the user can tug on the modal, but the modal communicates that it does not want to leave.

gestureReleaseVelocityScale is more about feel than correctness. Setting it to 0 prevents a quick downward swipe from carrying too much release energy into the disabled state. The modal would still avoid dismissal without this, but the resistance can feel too extreme or springy when the user flings hard.

The maxHeight and marginTop values make the modal a real bottom-aligned card instead of a full-height screen that only appears offset. That matters because the nested modal screens use the custom IOSSlide() animation, which adds border radius during the page slide. If the parent modal content stayed full height and only moved with translateY, the rounded bottom edge would sit outside the visible area and the nested slide could look like it is overflowing. Giving the modal an actual height * 0.9 layout box keeps the rounded card shape visible while the nested pages animate inside it.

Launcher Screen

app/example/index.tsx

1import { router } from "expo-router";
2import { Button, View } from "react-native";
3import { useTheme } from "@/theme";
4
5export default function ExampleIndex() {
6  const theme = useTheme();
7
8  return (
9    <View
10      style={{
11        flex: 1,
12        alignItems: "center",
13        justifyContent: "center",
14        backgroundColor: theme.bg,
15      }}
16    >
17      <Button title="Open Modal" onPress={() => router.push("/example/modal")} />
18    </View>
19  );
20}

app/example/modal/_layout.tsx

1import { View } from "react-native";
2import { BlankStack } from "@/layouts/blank-stack";
3import {
4  IOS_SLIDE_BORDER_RADIUS,
5  IOSSlide,
6} from "@/lib/screen-transitions/ios-slide";
7import { useTheme } from "@/theme";
8
9export default function ModalLayout() {
10  const theme = useTheme();
11
12  return (
13    <View
14      style={{
15        flex: 1,
16        backgroundColor: theme.bg,
17        borderRadius: IOS_SLIDE_BORDER_RADIUS,
18        borderCurve: "continuous",
19        overflow: "hidden",
20      }}
21    >
22      <BlankStack>
23        <BlankStack.Screen name="index" />
24        <BlankStack.Screen name="b" options={{ ...IOSSlide() }} />
25      </BlankStack>
26    </View>
27  );
28}

The nested stack is wrapped in the rounded modal surface. The b screen uses the regular iOS slide helper so navigation inside the modal stays separate from the parent modal presentation.

Dismissable Screen

app/example/modal/index.tsx

1import { router, useFocusEffect, useNavigation } from "expo-router";
2import { useCallback } from "react";
3import { Button, Text, View } from "react-native";
4import { useTheme } from "@/theme";
5
6export default function ModalIndex() {
7  const theme = useTheme();
8  const navigation = useNavigation();
9
10  useFocusEffect(
11    useCallback(() => {
12      navigation.getParent().setOptions({
13        gestureEnabled: true,
14      });
15    }, [navigation])
16  );
17
18  return (
19    <View
20      style={{
21        flex: 1,
22        alignItems: "center",
23        justifyContent: "center",
24      }}
25    >
26      <Button title="Go to B" onPress={() => navigation.navigate("b")} />
27      <Text style={{ fontSize: 11, opacity: 0.5, color: theme.text }}>
28        This screen is currently dismissable.
29      </Text>
30    </View>
31  );
32}

When the first modal screen is focused, it enables dismissal on the parent modal route.

Disabled Screen

app/example/modal/b.tsx

1import { router, useFocusEffect, useNavigation } from "expo-router";
2import { useCallback } from "react";
3import { Button, Text, View } from "react-native";
4import { useTheme } from "@/theme";
5
6export default function ModalIndex() {
7  const theme = useTheme();
8  const navigation = useNavigation();
9
10  useFocusEffect(
11    useCallback(() => {
12      navigation.getParent()?.setOptions({
13        gestureEnabled: false,
14      });
15    }, [navigation])
16  );
17
18  return (
19    <View
20      style={{
21        flex: 1,
22        alignItems: "center",
23        justifyContent: "center",
24        backgroundColor: theme.bg,
25      }}
26    >
27      <Button title="Go back" onPress={router.back} />
28      <Text style={{ fontSize: 11, opacity: 0.5, color: theme.text }}>
29        This screen is currently not dismissable
30      </Text>
31    </View>
32  );
33}

When b is focused, it disables dismissal on the parent modal route. Because the parent route has gestureTracking: "always", the modal can still track the pull and apply the disabled resistance from the parent interpolator.

Closing Thoughts

This recreates the iOS 26 modal look and behavior on iOS and Android.

The parent modal owns the presentation, gesture tracking, and resistance tuning. The nested screens only decide whether the parent modal can dismiss while they are focused. That split keeps the recipe predictable: screen focus updates gestureEnabled, and the parent interpolator turns the resolved option into the enabled or disabled modal feel.

The result is a modal that can be dismissable when it should leave, resistant when it should stay, and responsive to touch the whole time.