Auto height wrong on Ipad

[flodlc]

Hi, great work with this package 👏

I face an issue with auto height on ipad. I tried to remove all the logic and it becomes clear that the behavior differs from iphone.

Here is the code related to the screenshots bellow:

<TrueSheet
        dimmed={true}
        initialIndexAnimated={true}
        initialIndex={0}
        sizes={["auto"]}
        grabber={false}
      >
        <Box>
          <Box p="6">
            <Box h="48" bg="red100"></Box>
          </Box>
        </Box>
      </TrueSheet>

As you can see, auto height works great on iphone (there is no safe area on purpose) but on ipad the content is cropped. If I try with a larger height, same result the content is cropped at the bottom. Actually it's same with a scrollview too, it always makes it scroll a bit.

I would love some help from on this point, thanks !

[lodev09]

Ah, might be due to this code: https://github.com/lodev09/react-native-true-sheet/blob/d73a39743ce902e6f72773872701c4233f6eb8bb/ios/TrueSheetView.swift#L195-L207

[flodlc]

Thanks for the quick answer ! Is it something easily fixable in the next release ? I noticed other height issues, would you like me to list them ? I feel that fixing these issues might make react-native-true-sheet the reference package in terms of modal/bottom-sheet for react-native. It's really a pain to manage modals on react-native and it gives me hope 🙏

[flodlc]

The biggest pain I have right now with react-native-true-sheet are:

• the auto height not always working (sometimes it's wrong or the modal disappears.
• scrollable={true} with a fixed modal header, I know the floatable header hack but it does not feel intuitive, sometimes the header size can be unpredictable and when it works, the scroll indicator goes under the fixed header.

[flodlc]

Other found issue:

When rnts is used with a ScrollView inside and auto height, only the first rendered height is used. Upcoming height changes inside the scrollView are ignored which makes in my case a small Modal that scrolls a lot to display the content. it happens to me when I load data in the modal and display a spinner while loading.

Here is the code that reproduces the issue: In this exemple, the red View displays with 1000ms delay. The modal does not grows when it appears.

const App = () => {
  const ready = useDelayed(true, 1000);
  const scrollRef = useRef();

  return <TrueSheet
        dimmed={true}
        initialIndexAnimated={true}
        initialIndex={0}
        sizes={["auto"]}
        grabber={false}
        scrollRef={scrollRef}
      >
        <ScrollView ref={scrollRef}>
          <View style={{ background: 'blue', height: 50 }}  />
          {ready && <View style={{ background: 'red', height: 60 }} />}
        </ScrollView>
   </TrueSheet>
}

I hope it helps !