Does v3 is supported also on react-native v0.77?

[oferRounds]

I know this RN version is not supported, this why I open my question-issue here. Feel free to close it if you feel it’s not relevant based on our RN version

Bottom sheet shows empty content on every presentation in v3.0.0-beta.2

Description

After upgrading from react-native-true-sheet v2 to v3.0.0-beta.2, bottom sheets exhibit the following behavior:

1. First tap: The background dims (indicating the sheet is being presented), but the sheet itself doesn't appear or appears with no visible content
2. Second and subsequent taps: When the sheet does open, it consistently displays empty content every time - the content is never visible

Environment

• @lodev09/react-native-true-sheet: 3.0.0-beta.3
• React Native: 0.77.3
• Platform: iOS (not tested on android
• New Architecture: Enabled (newArchEnabled=true)
• Detents tested: ['auto'], ['auto', 'large'] (issue may occur with other detent configurations as well)

Root Cause Analysis

The issue appears to be related to v3's lazy loading mechanism:

1. When present() is called, the sheet uses lazy loading:

   • Sets shouldRenderNativeView: true
   • Waits for onMount event
   • Calls TrueSheetModule.presentByRef()

2. The timing between when the native module presents the sheet and when the content is actually rendered/measured appears to be misaligned, resulting in:

   • The sheet presenting before content is available (empty content)
   • Content never becoming visible even after the sheet is fully presented

3. After dismissal, onDidDismiss sets shouldRenderNativeView: false (line 228 in TrueSheet.tsx), destroying the native view and causing the issue to repeat on every subsequent present.

Expected Behavior

The sheet should present with its content visible on every present() call, just like in v2.

Actual Behavior

• First tap: Background dims but sheet may not appear
• Subsequent taps: Sheet opens but always shows empty content - children are never visible

Minimal Reproduction

import { useRef } from 'react';
import { View, Button, Text } from 'react-native';
import { TrueSheet } from '@lodev09/react-native-true-sheet';

export default function App() {
const sheet = useRef(null);

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Open Sheet" onPress={() => sheet.current?.present()} />

  <TrueSheet
    ref={sheet}
    detents={['auto']}
    cornerRadius={24}
  >
    <View style={{ padding: 20, backgroundColor: 'red' }}>
      <Text>This content is never visible</Text>
      <Text>The sheet appears empty every time</Text>
    </View>
  </TrueSheet>
</View>

);
}### Notes

• The issue occurs with auto detent, but may also occur with other detent configurations
• Adding a background color to the content confirms the content is not being rendered at all (not just invisible)
• This is a regression from v2 where the same code worked correctly

Suggested Fix

The lazy loading mechanism needs to ensure that:

1. Content is fully rendered and measured before presentByRef() is called
2. Or, provide an option to disable lazy loading for users who need reliable content rendering
3. Or, keep the native view rendered after dismiss to avoid re-triggering lazy loading on every present

Additional Context

This issue makes v3 unusable for apps migrating from v2, as the bottom sheet content is never visible. The lazy loading optimization appears to have broken the core functionality of displaying content in the sheet.

[lodev09]

@oferRounds hey! thank you for testing it out. Can you please provide a repro that I can checkout? Thank you!

[lodev09]

I just updated example to load 200 items in a scrollview with images/text. it takes few ms (dev mode) to open but content is sure there.

[oferRounds]

@lodev09 sorry for my delay! And amazing work with v3.0 release!

have you tired to build it with rn 0.77? I think it will be easily reproduce there. I also noticed that with your latest change, it does not get build with 0.77 (with the attached error). I was able to patch the library, and fixed the yoga error, but the problem still remains (was working on v2)

true_sheet.mp4

[lodev09]

Yeah it's due to version 77 missing that yoga code for Fabric. We use that to layout the sheet. Try upgrading RN to 78 or 79

[lodev09]

Let's try this PR if this fixes it:
#260

[oferRounds]

Thank you @lodev09!
So I’ve upgraded to 3.0.2, and:

1. I still get this different build error (see screenshot). I can fix it (according to Xcode suggestion)
2. But even after the fix, the behaviour still remains the same – the sheet is empty

---

Regarding the upgrade – I wish we could upgrade, we currently dependant on react-native-navigation, which does not yet support higher RN versions

[lodev09]

did you do pod install?

[oferRounds]

Yes, i have. It installed the native pod version of 3.0.2

[oferRounds]

@lodev09 any idea if one of the latest fixes on the repo might solve the issue?

[oferRounds]

ok I was able to download it by referencing the commit. Trying now

[oferRounds]

I fixed the build issue, but it now crashes on launch

[lodev09]

Can you create an issue with a repro? Thread is getting bigger and confusing. Thanks!

[oferRounds]

I have created it here because when opening a new issue it requires to mark your RN version as supported – which is not on my case

But anyhow, the original missing content issue is fixed! I needed to add patch though to make the app run. I’ll add in the issues

[lodev09]

That's okay. I already changed minimum version to RN 0.76 (expo 52) so any issues that falls into that version, I'll try to fix