Auto size is calculated wrongly on the first render

[haivle]

Hi, thank you for your great project. I encountered this bug when using your lib in my project. The layout height is always rendered wrongly on the first open. Please find the screen recording attached

https://github.com/lodev09/react-native-true-sheet/assets/52659811/bd052bd3-62de-4c43-a21a-1ada64cd27fd

Sample code

<TrueSheet>
   <View style={{minHeight: 40}}>
       <FastImage source={bannerImage} style={[styles.image, { height: bannerHeight }]} />
   </View
</TrueSheet>

[lodev09]

Try this:

<TrueSheet>
  <FastImage source={bannerImage} style={[styles.image, { height: bannerHeight }]} />
</TrueSheet>

[lodev09]

Also, avoid flex style on the views within the sheet. See here

[haivle]

Thank you, we are not using flex in this case. Do you think of any other reasons that can cause the issue?

[lodev09]

Can you paste here the value of styles.image and bannerHeight?

[haivle]

Here's the full code

return (
    <TrueSheet
      ref={modal}
      scrollRef={scrollview}
      grabber={showHandle}
      dimmed
      sizes={sizes}
      cornerRadius={tokens.number('borderRadius.lg')}
      dismissible={dismissible}
      onDismiss={onClose}
      FooterComponent={
        !hideFooter ? (
          <FooterComponent
            isLoading={isLoading}
            primaryLabel={primaryButton?.label}
            onPrimaryPress={handlePrimaryPress}
            secondaryLabel={secondaryButton?.label}
            onSecondaryPress={handleSecondaryPress}
          />
        ) : undefined
      }
      {...otherProps}
    >
      {/* Content area */}
      <Content ref={scrollview} nestedScrollEnabled>
        {/* Header */}
        <FastImage source={bannerImage} style={[styles.image, { height: bannerHeight }]} />}
      </Content>
    </TrueSheet>

//...
const styles = StyleSheet.create({
  image: {
    width: '100%',
    borderTopLeftRadius: tokens.number('borderRadius.lg'),
    borderTopRightRadius: tokens.number('borderRadius.lg'),
  },
)}

I notice that if I remove FooterComponent, the issue happens less often. I am also not using flex in FooterComponent

[lodev09]

Hmm seems ok to me.. Is there a way you could create a reproducible example using the example project in this repo? I'll take a look

[haivle]

Quick question, can we improve this rendering issue by explicitly call viewRef.measureLayout() before presenting the sheet? rather than relying on onLayout callback?

[lodev09]

For sure.. Feel free to submit PR. I would still need an example to test it though.

[lodev09]

Hey @haivle, did you get a chance to fix this issue on your end?

[haivle]

@lodev09 sorry I was busy with something else. I will try to create an example project this week and let you know.