DOCSEARCHbyAlgolia
Submit Docs

TrueSheet Documentation

website·Indexed 32 days ago

https://sheet.lodev09.com

A native bottom sheet experience for React Native apps with full web support. Features include Fabric (New Architecture) support, integration with React Navigation and react-native-reanimated v4, and native keyboard handling. Documentation covers installation for React Native 0.80 and 0.82, migration guides for v3 and v4, and advanced guides for side sheets, stacking, and edge-to-edge display.

Tokens
42.2K
Snippets
255
Records
313
Agent score
59%

What's inside TrueSheet

  1. Overview of the React Native Bottom Sheet library

    This library provides a fully native bottom sheet experience for React Native applications. It is built on the Fabric architecture for high performance and avoids JavaScript-based hacks by implementing logic in the native realm. Key capabilities include native accessibility/screen reader support, built-in keyboard handling with automatic adjustments, and full web support out of the box.

  2. Overview of the Native Bottom Sheet for React Native

    This library provides a fully native bottom sheet experience for React Native applications. It is built on the Fabric architecture (React Native's new architecture) to ensure maximum performance and avoids JavaScript-based hacks by implementing logic in the native realm. It supports iOS, Android, and Web out of the box.

  3. Requirements for migrating to TrueSheet v3

    TrueSheet v3 is built exclusively for React Native's New Architecture (Fabric). The old Paper architecture is no longer supported. To use v3, you must meet the following requirements:

    • React Native >= 0.76 (Expo SDK 52+)
    • New Architecture enabled (this is the default in React Native 0.76+)

  4. Requirements for TrueSheet v3

    TrueSheet v3 is built exclusively for React Native's New Architecture (Fabric). The old Paper architecture is no longer supported. To use v3, you must meet the following requirements:

    • React Native >= 0.76 (Expo SDK 52+)
    • New Architecture enabled (this is the default in React Native 0.76+)

  5. Key features and integrations of the Bottom Sheet library

    The bottom sheet library includes the following technical features and integrations:

    • Performance: Powered by Fabric (React Native's new architecture).
    • API Flexibility: Supports both imperative methods and lifecycle events.
    • Visuals: Includes 'Liquid Glass' support for iOS 26+.
    • Animation: First-class support for react-native-reanimated.
    • Navigation: Includes a built-in sheet navigator for integration with React Navigation.
    • Platform Support: Native iOS, Android, and Web.

  6. Migrate from TrueSheet v2 to v3

    Migrating to v3 requires enabling the Fabric (New Architecture) in React Native and updating the package.

    Installation:

    • Update package: npm install @lodev09/react-native-true-sheet@^3.0.0
    • iOS: Clean Pods, Podfile.lock, and build, then run pod install.
    • Android: Run ./gradlew clean in the android folder.

    Breaking Code Changes:

    • Prop Renames:
      • sizes $\rightarrow$ detents
      • initialIndex $\rightarrow$ initialDetentIndex
      • initialIndexAnimated $\rightarrow$ initialDetentAnimated
      • FooterComponent $\rightarrow$ footer
      • onPresent $\rightarrow$ onDidPresent
      • onDismiss $\rightarrow$ onDidDismiss
      • onSizeChange $\rightarrow$ onDetentChange
      • dimmedIndex $\rightarrow$ dimmedDetentIndex
    • Removals:
      • Remove edgeToEdge, scrollRef (iOS), contentContainerStyle, and grabberProps.
    • Value Changes:
      • Detent percentage strings must be fractional numbers (e.g., change "50%" to 0.5).

  8. Migrate TrueSheet props from v2 to v3

    Several props have been renamed or removed in v3 to improve clarity and align with the New Architecture. Note that contentContainerStyle and edgeToEdge have been removed entirely.
    // ❌ v2
<TrueSheet
  sizes={['auto', '50%', '100%']}
  initialIndex={1}
  initialIndexAnimated={false}
  contentContainerStyle={styles.container}
  FooterComponent={<MyFooter />}
  edgeToEdge
  onPresent={(e) => console.log(e.nativeEvent)}
  onDismiss={() => console.log('dismissed')}
  onSizeChange={(e) => console.log(e.nativeEvent)}
/>

// ✅ v3
<TrueSheet
  detents={['auto', 0.5, 1]}
  initialDetentIndex={1}
  initialDetentAnimated={false}
  footer={<MyFooter />}
  onDidPresent={(e) => console.log(e.nativeEvent)}
  onDidDismiss={() => console.log('dismissed')}
  onDetentChange={(e) => console.log(e.nativeEvent)}
/>

  9. Handle keyboard visibility in TrueSheet

    TrueSheet provides native keyboard avoidance on both iOS and Android. When a TextInput inside the sheet is focused, the sheet automatically adjusts its position to keep the input visible above the keyboard. No additional configuration is required for basic usage.
    const App = () => {
  return (
    <TrueSheet ref={sheet} detents={['auto']}>
      <View style={{ padding: 16 }}>
        <TextInput
          placeholder="Type something..."
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 }}
        />
      </View>
    </TrueSheet>
  )
}

  11. Prerequisites for installing @lodev09/react-native-true-sheet

    To use @lodev09/react-native-true-sheet, ensure your environment meets the following requirements:

    • React Native: Version 0.82 or higher.
    • Architecture: New Architecture must be enabled (this is the default in React Native 0.76+).
    • Xcode: Version 26.1 or higher (required for liquid glass support).

    Important Compatibility Note: This package is NOT compatible with Expo Go. You must use Expo CNG (Continuous Native Generation) instead.

  12. Install TrueSheet AI coding skill

    You can add a reusable AI capability (skill) to your project to provide your AI coding agent with specific knowledge about TrueSheet patterns and usage, reducing the need for manual explanations.
    npx skills add lodev09/react-native-true-sheet