The Sheet component does not open on iOS with the modal={true} attribute

[theyanniss23002]

Current Behavior

The sheet does not open, the entire screen layer freezes, the overlay layer flickers, the application crashes

Expected Behavior

I'm trying to make a sheet full screen using the modal={true} attribute. I also tried to do this with the recommended package for ios react-native-ios-modal version 2.0.0-3

https://github.com/tamagui/tamagui/assets/57316921/beab55ab-e624-4146-bcab-a16d8d52ecfe

https://github.com/tamagui/tamagui/assets/57316921/9d779a46-63b2-4a35-b7ef-6656d91b72ef

Tamagui Version

1.79.1

Platform (Web, iOS, Android)

ios

Reproduction

import React, { useState } from 'react';
import { ModalView } from 'react-native-ios-modal';
import { setupNativeSheet, Sheet } from 'tamagui';
import { Button } from 'shared/config/styled.config';

setupNativeSheet('ios', ModalView);

export const FoodDiaryStatistic = () => {
  const [openSheet, setSheetOpen] = useState(false);

  const handleOpen = () => {
    setSheetOpen(true);
  };

  const snapPoints = [85, 50, 25];

  return (
    <>
      <Sheet
        modal={true}
        native={true}
        snapPoints={snapPoints}
        onOpenChange={setSheetOpen}
        open={openSheet}
        animation="medium"
        zIndex={100_000}
        forceRemoveScrollEnabled={openSheet}
        dismissOnSnapToBottom
      >
        <Sheet.Overlay
          backgroundColor="blue"
          animation="medium"
          enterStyle={{ opacity: 0 }}
          exitStyle={{ opacity: 0 }}
        />
        <Sheet.Handle />
        <Sheet.Frame
          backgroundColor="red"
          justifyContent="center"
          alignItems="center"
        >
          <Button onPress={() => setSheetOpen(false)}>
            <Button.Text>CLOSE</Button.Text>
          </Button>
        </Sheet.Frame>
      </Sheet>

      <Button onPress={handleOpen}>
        <Button.Text>OPEN</Button.Text>
      </Button>
    </>
  );
};

System Info

This is what system info shows after the application crashes

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   fitfolio                      	       0x10355bf88 static RNIErrorCodeDefaultable.runtimeError.getter + 4 (RNIErrorCodeDefaultable.swift:27)
1   fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
2   fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
3   fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
4   fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
5   fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
6   fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
7   fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
8   fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
9   fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
10  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
11  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
12  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
13  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
14  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
15  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
16  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
17  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
18  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
19  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
20  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
21  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
22  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
23  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
24  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
25  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
26  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
27  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
28  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
29  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
30  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
31  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
32  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
33  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
34  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
35  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
36  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
37  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
38  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
39  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
40  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
41  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
42  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
43  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
44  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
45  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
46  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
47  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
48  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
49  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
50  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
51  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
52  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
53  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
54  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
55  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
56  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44 (RNIErrorCodeDefaultable.swift:28)
57  fitfolio                      	       0x103576844 protocol witness for static RNIErrorCodeDefaultable.runtimeError.getter in conformance RNIModalErrorCode + 12
58  fitfolio                      	       0x10355bfb0 static RNIErrorCodeDefaultable.runtimeError.getter + 44

[theyanniss23002]

@natew are you planning to answer?

[byteab]

you don't need to set modal={true} when native={true} we should handle that internally

[natew]

We need to look into this more

[jckw]

I just contributed to the bounty on this issue:

https://until.dev/bounty/tamagui/tamagui/1913

The current bounty is $30.00 and goes to the repo owner/maintainer if it is closed within 1 month, and decreases after that.

Others can also contribute to the bounty to increase it.

[MusabDev]

We need it to be fixed.....

[byteab]

I wasn't able to re-produce! if you create a reproduction I can check it more

[MusabDev]

@TheEhsanSarshar Steps to reproduce it:

1. Create a new react native project.
2. Integrate and use Tamagui sheet component.
3. Implement a state, you can pass open and setOpen props to the sheet component.
4. Now, on a button click, update the state.

And that is it.