Customizing Modal

[naro-code-lab]

Hello,

How can I customize the height of a modal?

I want my modal to occupy only half of the screen.

[jennyckaplan]

Adding to this, what would be the equivalent of creating a half screen modal with expo router? Here's a react navigation example I'm referencing and trying to reproduce:
https://snack.expo.dev/@nazrdogan/react-navigation-half-modal?platform=ios

Is there a useCardAnimation equivalent for expo router? Is there a simpler way to implement a transparent modal with expo router with nice animations?

I don't really see a difference in the modal appearance when I change the presentation mode to transparentModal:

      <Stack.Screen
        name="modal"
        options={{
          headerShown: false,
          presentation: "transparentModal",
        }}
      />

[the-sowhat-dev]

Something like this can work, it is not perfect but it works (consider using window height instead of a hardcoded minHeight value).

      <Stack.Screen
        name="(details)"
        options={{
          headerShown: false,
          presentation: "modal",
          contentStyle: {
            minHeight: 500,
            position: "absolute",
            bottom: 0,
            left: 0,
            right: 0,
            borderRadius: 12,
          },
        }}
      />

[ayoubElomari]

Hi, thank you for the code, but is there to make the previous page show as the content behind the modal?

[the-sowhat-dev]

Hey!
I found another way but I didn't post it here. Here is what I do:
Let's say you have the page half-modal.tsx you want to occupy only the half of the screen. This half-modal.tsx has to be defined in your _layout.tsx like this:

import { Stack } from "expo-router";

// layout.tsx
  
      <Stack>
        <Stack.Screen
          name="half-modal"
          options={{
            presentation: "modal",
            headerShown: false, // optionnal
            contentStyle: { backgroundColor: "transparent" },
          }}
        />
     </Stack>

Then, in the hald-modal.tsx file you render it like this:

// half-modal.tsx

import { useRouter } from "expo-router";
import { View, Text, ScrollView, Pressable, StyleSheet, useWindowDimensions } from "react-native";
  
const Page = () => {
  const router = useRouter();
  const { height } = useWindowDimensions();

  return (
    <View style={{ flex: 1 }}>
      {/* user can click on backdrop to dismiss the modal */}
      <Pressable style={{ flex: 1 }} onPress={router.back} /> 

      <View style={[styles.content, { height: height / 2 }]}>
           <Text>your content</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  content: {
    left: 0,
    right: 0,
    bottom: 0,
    position: "absolute",
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: 16,
  },
});