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:

react-native-true-sheet/ios/TrueSheetView.swift

Lines 195 to 207 in d73a397

	func setContentHeight(_ height: NSNumber) {
	// Exclude bottom safe area for consistency with a Scrollable content
	let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow })
	let bottomInset = window?.safeAreaInsets.bottom ?? 0
	let contentHeight = CGFloat(height.floatValue) - bottomInset
	guard viewController.contentHeight != contentHeight else {
	return
	}
	viewController.contentHeight = contentHeight
	configurePresentedSheet()
	}

[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 !