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)

How?

1. Add the Provider

Manages shared values for Reanimated integration.

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

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

2. Use ReanimatedTrueSheet

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

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

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 Animated Values

Use the useReanimatedTrueSheet hook to access the sheet's animated values.

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

function MyComponent() {
  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet()

  // Example: Move component based on sheet position
  const positionStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -animatedPosition.value }]
  }))

  // Example: Fade in as sheet expands from index 0 to 1
  const opacityStyle = useAnimatedStyle(() => ({
    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
  }))

  return (
    <Animated.View style={[positionStyle, opacityStyle]}>
      <Text>This moves and fades with the sheet</Text>
    </Animated.View>
  )
}

Available Values

Value	Type	Description
animatedPosition	SharedValue<number>	The current Y position of the sheet relative to the screen.
animatedIndex	SharedValue<number>	The current detent index as a continuous float. Interpolates smoothly between detent indices during drag (e.g., 0.5 when halfway between index 0 and 1).
animatedDetent	SharedValue<number>	The current detent value (0-1 fraction of screen height). Interpolates smoothly between detent values as the sheet is dragged.

Examples

See the example app for complete implementations.