[ BUG ] dialog not working on ios device (overlay only, no content)

[rwitchell]

Describe the bug

The dialog is working fine on ios simulator, but fails to work correctly on device.
The overlay occurs, but then the content doesn't load.
I've traced it to animated view. When I remove the entering prop inside the DialogOverlayNative function, it works.

export const Home = () => {

return (
    <>
      <ScrollView>
        <StyledView className="flex-1 p-4">
          <StyledView className="mb-4 flex-row flex-wrap gap-2">
            <Dialog>
              <DialogTrigger>
                <Text>Open?</Text>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you absolutely sure?</DialogTitle>
                  <DialogDescription>
                    This action cannot be undone. This will permanently delete your account and
                    remove your data from our servers.
                  </DialogDescription>
                </DialogHeader>
              </DialogContent>
            </Dialog>
          </StyledView>
        </StyledView>
      </ScrollView>
    </>



}

To Reproduce
Steps to reproduce the behavior:

{
"dependencies": {
    "@expo/vector-icons": "14.0.4",
    "@gorhom/bottom-sheet": "5.0.6",
    "@hookform/resolvers": "3.9.1",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-dialog": "1.1.2",
    "@radix-ui/react-label": "2.1.0",
    "@radix-ui/react-radio-group": "1.2.1",
    "@radix-ui/react-select": "2.1.2",
    "@radix-ui/react-separator": "1.1.0",
    "@radix-ui/react-slot": "1.1.0",
    "@radix-ui/react-tooltip": "1.1.3",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-navigation/native": "^7.0.0",
    "@rn-primitives/accordion": "1.1.0",
    "@rn-primitives/alert-dialog": "1.1.0",
    "@rn-primitives/aspect-ratio": "1.1.0",
    "@rn-primitives/avatar": "1.1.0",
    "@rn-primitives/checkbox": "1.1.0",
    "@rn-primitives/collapsible": "1.1.0",
    "@rn-primitives/context-menu": "1.1.0",
    "@rn-primitives/dialog": "1.1.0",
    "@rn-primitives/dropdown-menu": "1.1.0",
    "@rn-primitives/hover-card": "1.1.0",
    "@rn-primitives/label": "1.1.0",
    "@rn-primitives/menubar": "1.1.0",
    "@rn-primitives/navigation-menu": "1.1.0",
    "@rn-primitives/portal": "1.1.0",
    "@rn-primitives/progress": "1.1.0",
    "@rn-primitives/radio-group": "1.1.0",
    "@rn-primitives/select": "1.1.0",
    "@rn-primitives/separator": "1.1.0",
    "@rn-primitives/slot": "1.1.0",
    "@rn-primitives/switch": "1.1.0",
    "@rn-primitives/table": "1.1.0",
    "@rn-primitives/tabs": "1.1.0",
    "@rn-primitives/toggle": "1.1.0",
    "@rn-primitives/toggle-group": "1.1.0",
    "@rn-primitives/tooltip": "1.1.0",
    "@rneui/themed": "4.0.0-rc.8",
    "@shopify/flash-list": "1.7.1",
    "@supabase/supabase-js": "2.46.1",
    "@tanstack/react-table": "8.20.5",
    "class-variance-authority": "0.7.1",
    "clsx": "2.1.1",
    "date-fns": "^4.1.0",
    "expo": "52.0.20",
    "expo-apple-authentication": "~7.1.3",
    "expo-constants": "17.0.3",
    "expo-dev-client": "~5.0.8",
    "expo-font": "13.0.2",
    "expo-haptics": "14.0.1",
    "expo-linking": "7.0.3",
    "expo-router": "4.0.14",
    "expo-splash-screen": "0.29.18",
    "expo-status-bar": "2.0.0",
    "expo-system-ui": "4.0.6",
    "expo-web-browser": "14.0.1",
    "lucide-react": "0.456.0",
    "lucide-react-native": "0.456.0",
    "nativewind": "4.1.23",
    "react": "18.3.1",
    "react-hook-form": "7.54.1",
    "react-native": "0.76.5",
    "react-native-calendars": "1.1307.0",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-modal": "13.0.1",
    "react-native-reanimated": "3.16.5",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "4.1.0",
    "react-native-svg": "15.8.0",
    "react-native-web": "0.19.13",
    "tailwind-merge": "2.5.4",
    "tailwindcss": "3.4.17",
    "tailwindcss-animate": "1.0.7",
    "zod": "3.23.8"
  },
}

1. running: cd ios && pod install && cd .. && run eas-build-pre-install && expo prebuild && expo run:ios --configuration Release -d

Expected behavior
(as expected)

Screenshots

Platform (please complete the following information):

• Type: Device
• OS: ios 18.1.1
• Browser (if applies) [e.g. chrome, safari]

Additional context
(none)

[mAmineSouissi]

i'm having the same issue here.

[rwitchell]

removing the fadein allows the modal to appear, however the content isn't selectable. For example:

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline" className="rounded-full">
      <Text>Level: {filter.levels === 'all' ? 'All' : filter.levels}</Text>
    </Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Select Level</DialogTitle>
    </DialogHeader>
    <Select
      onOpenChange={() => {
        console.log('onOpenChange called')
      }}
      onValueChange={option => {
        console.log('onValueChange called')
        setFilter({ ...filter, levels: option.value })
      }}
      value={{ value: filter.levels, label: filter.levels }}
      defaultValue={{ value: filter.levels, label: filter.levels }}
    >
      <SelectTrigger>
        <SelectValue placeholder={'select a level'} />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem label="All Levels" value="all" />
          <SelectItem label="1" value="1" />
          <SelectItem label="2" value="2" />
        </SelectGroup>
      </SelectContent>
    </Select>
  </DialogContent>
</Dialog>

tapping the select causes the onOpenChange called in the logs, though no DOM change. I haven't had time to do further investigatory work just yet.

[rwitchell]

okay, this is happening because of the reduceMotion ios setting on my device.
there is an entering prop on the selectPrimitive (as well as other RNR components) that is causing the element not to work.

I haven't been able to get the React Native Reanimated's ReduceMotion.Never property or ReduceMotion() chain to work just yet, either.

Overall, this is a bit of a problem for anyone creating apps using these components for devices using the reduceMotion ios setting, so i think a code change to this library should be encouraged to deal with this