Skip to main content

Reanimated

TrueSheet has first-class support for react-native-reanimated v4.

Requirements
  • react-native-reanimated: ^4.0.0
  • react-native-worklets (peer dependency of Reanimated v4)
reanimated

Usage​

1. Add the Provider​

Manages shared values for Reanimated integration.

import { ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet'

function App() {
  return (
    <ReanimatedTrueSheetProvider>
      <YourApp />
    </ReanimatedTrueSheetProvider>
  )
}

2. Use ReanimatedTrueSheet​

Animated sheet component that syncs position automatically. with all props from TrueSheet.

import { ReanimatedTrueSheet } from '@lodev09/react-native-true-sheet'

function MyScreen() {
  const sheetRef = useRef<TrueSheet>(null)

  return (
    <ReanimatedTrueSheet
      ref={sheetRef}
      detents={[0.3, 0.6, 1]}
      initialDetentIndex={1}
    >
      <Text>Sheet Content</Text>
    </ReanimatedTrueSheet>
  )
}
info

Note that the onPositionChange prop event now runs on the UI thread (worklet). If you override this prop, make sure to add the 'worklet' directive to your handler.

3. Access Sheet Position​

Use the useReanimatedTrueSheet hook to access the sheet's position.

import { useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'

function MyComponent() {
  const { animatedPosition } = useReanimatedTrueSheet()

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -animatedPosition.value }]
  }))

  return (
    <Animated.View style={animatedStyle}>
      <Text>This moves with the sheet</Text>
    </Animated.View>
  )
}

Examples​

See the example app for complete implementations.