Problem: actionsheet changes flatlist on initial render

[AlexCernik]

Every time I open the application and go to this screen, it jumps to the top; it only happens once each time I open the application.

The problem occurs when I have this

<Actionsheet useRNModal snapPoints={[70]} isOpen={state} onClose={handleClose}>
  <ActionsheetBackdrop />
  <ActionsheetContent className='px-2' >
    <ActionsheetDragIndicatorWrapper className='mb-2'>
      <ActionsheetDragIndicator />
    </ActionsheetDragIndicatorWrapper>
    <ActionsheetSectionHeaderText className='text-sm'>Configuración</ActionsheetSectionHeaderText>
    ...
  </ActionsheetContent>
</Actionsheet>

Video: https://drive.google.com/file/d/1-DLniSA2bVKEfeBkAz5wojvsLyj2ZfSW/view?usp=sharing

But the problem doesn't occur if I have this.

{state &&
  <Actionsheet useRNModal snapPoints={[70]} isOpen={true} onClose={handleClose}>
    <ActionsheetBackdrop />
    <ActionsheetContent className='px-2' >
      <ActionsheetDragIndicatorWrapper className='mb-2'>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetSectionHeaderText className='text-sm'>Configuración</ActionsheetSectionHeaderText>
      ...
    </ActionsheetContent>
  </Actionsheet>
}

Video: https://drive.google.com/file/d/15geBLDDjHb8VOdUJ5JYTBzd9z-2n18np/view?usp=sharing

[Sanchitv3]

Hi @AlexCernik , Thanks for reporting this.

We’re looking into the issue and will get back to you soon with an update.

[Sanchitv3]

Hi @AlexCernik , Could you please let me know what version of gluestack-ui you are currently working with?

[AlexCernik]

Hi @AlexCernik , Could you please let me know what version of gluestack-ui you are currently working with?

Hi, sorry for my late reply, I'm using these versions

"@gluestack-ui/core": "3.0.19",
"@gluestack-ui/utils": "3.0.21",
"@legendapp/motion": "2.5.3",

[Sanchitv3]

Hi @AlexCernik, thanks for sharing the versions and the videos.

We looked into the issue from our end, but to properly debug and verify the root cause, we’ll need a reproducible example of the complete screen setup — not just the Actionsheet component in isolation.

It would be really helpful if you could share:

• A minimal reproducible example
• The FlatList setup
• The parent screen structure/state handling around the Actionsheet

Since the issue seems related to the initial render/layout cycle, having the surrounding screen context will help us test and narrow it down accurately.

[wangfengming]

https://github.com/gluestack/gluestack-ui/blob/main/packages/gluestack-core/src/actionsheet/creator/ActionsheetContent.tsx

In this file, animatedViewSheetHeight is the rendered height of Animated.View at 100% height, but before the onLayout callback completes, animatedViewSheetHeight=0, such as when StyledActionsheetContent executes onLayout earlier, contentSheetAnimatePosition will be negative, causing the render to be at the top of the screen. Expect the initial value of animatedViewSheetHeight to be windowHeight, so even if onLayout has issues, the content will still be rendered off-screen.

[wangfengming]

I tested it. When there are multiple line charts on a page, rendering performance may cause occasional actionSheets to appear at the top of the page when opened, then go to the bottom.
After modifying the corresponding code for node_modules gluestack-core, this issue no longer occurred.

- const [animatedViewSheetHeight, setAnimatedViewSheetHeight] = React.useState(0);
+ const [animatedViewSheetHeight, setAnimatedViewSheetHeight] = React.useState(windowHeight);

@Sanchitv3

[Sanchitv3]

Thanks for investigating and sharing the fix @wangfengming!

We've tested the change on our end as well, and it appears to resolve the issue. We'll include this fix in the next package release so users won't need to patch node_modules manually.

Really appreciate you taking the time to track this down and report back with a solution. 🙌

[Sanchitv3]

Just released @gluestack-ui/core@3.0.23 with the fix!

[wangfengming]

👏🏻👍🏻