lodev09 / react-native-true-sheet

The true native bottom sheet experience 💩
https://sheet.lodev09.com
MIT License
523 stars 13 forks source link

[BUG] when dismiss on ios, and reopen, size auto breaks #38

Closed wcastand closed 4 months ago

wcastand commented 4 months ago

Using expo 51 true-sheet: ^0.12.0


// Screen.tsx

export default Screen() {

  const deleteTrueSheetRef = useRef<TrueSheet>(null)

  return (
    <YStack>
      [...screenStuff]
      <BottomSheet ref={deleteTrueSheetRef} name="deleteWallet">
        <YStack flex={1} gap="$lg" p="$base">
          <Heading as="h6">{t("BOTTOM_SHEET_DELETE_TITLE")}</Heading>
          <Body color="$neutral400">{t("BOTTOM_SHEET_DELETE_SUBTITLE")}</Body>
          <XStack gap="$base" jc="space-evenly">
            <Button type="primary-outline" onPress={() => deleteTrueSheetRef.current?.dismiss()} expand>
              <Button.Text>{t("BOTTOM_SHEET_DELETE_BUTTON_CANCEL")}</Button.Text>
            </Button>
            <Button onPress={onDeleteWallet} expand disabled={deleteMutationResult.fetching}>
          {deleteMutationResult.fetching && <Button.Loader />}
          <Button.Text>{t("BOTTOM_SHEET_DELETE_BUTTON_CONFIRM")}</Button.Text>
            </Button>
          </XStack>
        </YStack>
      </BottomSheet>
    </YStack>
}

// BottomSheet.tsx

export const BottomSheet = forwardRef<TrueSheet, TrueSheetProps>(({ children, ...props }, ref) => {
  return (
    <TrueSheet sizes={["auto"]} cornerRadius={24} {...props} ref={ref}>
      <YStack p="$lg">{children}</YStack>
    </TrueSheet>
  )
})

[...delete video example]

wcastand commented 4 months ago

nevermind i think it's because the YStack from tamagui by default have flex:1, which i remember in the doc is a problem overall for auto sizes