How react-native-renimated work on android inside true-sheet

[hoangman1108]

it is swipe to confirm with animated

it working on IOS devices but android cannot action
"@lodev09/react-native-true-sheet": "3.5.1",

my code:

import type { TextStyle, ViewStyle } from "react-native"
import { ActivityIndicator, Dimensions } from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import Animated, {
  Extrapolate,
  interpolate,
  interpolateColor,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated"

import { Text } from "@/components"
import { ArrowRightIcon } from "@/components/icon-component"
import { hapticImpact } from "@/services/haptics-helper"
import type { ThemedStyle } from "@/theme"
import { useAppTheme } from "@/utils/useAppTheme"

const TextAnimated = Animated.createAnimatedComponent(Text)

const BUTTON_WIDTH = Dimensions.get("window").width - 32
const BUTTON_HEIGHT = 56
const BUTTON_PADDING = 0
const BORDER_RADIUS = 16
const SWIPEABLE_DIMENSIONS = BUTTON_HEIGHT - 2 * BUTTON_PADDING

const H_WAVE_RANGE = SWIPEABLE_DIMENSIONS + 2 * BUTTON_PADDING
const H_SWIPE_RANGE = BUTTON_WIDTH - 2 * BUTTON_PADDING - SWIPEABLE_DIMENSIONS

interface SwipeButtonProps {
  onToggle?: (isToggled: boolean) => void
  loading?: boolean
  textConfirm: string
  textSwipe: string
}
export const SwipeButton = memo(({ onToggle, loading, textConfirm, textSwipe }: SwipeButtonProps) => {
  const X = useSharedValue(0)
  const [toggled, setToggled] = useState(false)

  const {
    theme: { colors },
    themed,
  } = useAppTheme()

  const handleComplete = (isToggled: boolean) => {
    if (isToggled !== toggled) {
      setToggled(isToggled)
      onToggle?.(isToggled)
    }
  }

  /**
   * Gesture (Reanimated v3 compatible)
   */
  const panGesture = Gesture.Pan()
    .enabled(!loading)
    .onUpdate((e) => {
      let newValue = toggled ? H_SWIPE_RANGE + e.translationX : e.translationX

      if (newValue < 0) newValue = 0
      if (newValue > H_SWIPE_RANGE) newValue = H_SWIPE_RANGE

      const threshold = BUTTON_WIDTH / 2 - SWIPEABLE_DIMENSIONS / 2
      const wasBelow = X.value < threshold
      const isAbove = newValue >= threshold

      if (wasBelow && isAbove) {
        runOnJS(hapticImpact)("medium")
      }

      X.value = newValue
    })
    .onEnd(() => {
      const threshold = BUTTON_WIDTH / 2 - SWIPEABLE_DIMENSIONS / 2

      if (X.value < threshold) {
        X.value = withSpring(0)
        runOnJS(handleComplete)(false)
      } else {
        X.value = withSpring(H_SWIPE_RANGE)
        runOnJS(handleComplete)(true)
      }
    })

  /**
   * Animated styles
   */
  const InterpolateXInput = [0, H_SWIPE_RANGE]

  const AnimatedStyles = {
    colorWave: useAnimatedStyle(() => ({
      width: H_WAVE_RANGE + X.value,
    })),

    textSlide: useAnimatedStyle(() => ({
      transform: [
        {
          translateX: interpolate(X.value, InterpolateXInput, [-BUTTON_WIDTH, 0], Extrapolate.CLAMP),
        },
      ],
    })),

    swipeable: useAnimatedStyle(() => ({
      backgroundColor: interpolateColor(X.value, [0, H_SWIPE_RANGE], [colors.black, colors.black]),
      transform: [{ translateX: X.value }],
    })),

    swipeText: useAnimatedStyle(() => ({
      opacity: interpolate(X.value, InterpolateXInput, [0.7, 0], Extrapolate.CLAMP),
      transform: [
        {
          translateX: interpolate(
            X.value,
            InterpolateXInput,
            [0, BUTTON_WIDTH / 2 - SWIPEABLE_DIMENSIONS],
            Extrapolate.CLAMP
          ),
        },
      ],
    })),
  }

  return (
    <Animated.View style={themed($swipeCont)}>
      {/* Wave background */}
      <Animated.View style={[AnimatedStyles.colorWave, $colorWave, { backgroundColor: colors.black }]} />

      {/* Center text */}
      <Animated.View style={[$textContainer, AnimatedStyles.colorWave]}>
        <TextAnimated
          preset="sm"
          style={[$textStyle, { color: colors.white }, AnimatedStyles.textSlide]}
          text={textConfirm}
          weight="semibold"
        />
      </Animated.View>

      {/* Swipe knob */}
      <GestureDetector gesture={panGesture}>
        <Animated.View style={[$swipeable, AnimatedStyles.swipeable]}>
          {loading ? (
            <ActivityIndicator color={colors.white} size="small" />
          ) : (
            <ArrowRightIcon color={colors.white} preset="icon24" strokeWidth={3} />
          )}
        </Animated.View>
      </GestureDetector>

      {/* Hint text */}
      <TextAnimated preset="md/S" style={[$swipeText, AnimatedStyles.swipeText]}>
        {textSwipe}
      </TextAnimated>
    </Animated.View>
  )
})

const $swipeCont: ThemedStyle<ViewStyle> = ({ semantic }) => ({
  height: BUTTON_HEIGHT,
  width: BUTTON_WIDTH,
  backgroundColor: semantic.bg.fillNeutral.defaultLight,
  borderRadius: BORDER_RADIUS,
  padding: BUTTON_PADDING,
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "row",
  position: "relative",
})

const $colorWave: ViewStyle = {
  position: "absolute",
  left: 0,
  height: BUTTON_HEIGHT,
  borderRadius: BORDER_RADIUS,
}

const $swipeable: ViewStyle = {
  position: "absolute",
  left: BUTTON_PADDING,
  height: SWIPEABLE_DIMENSIONS,
  width: SWIPEABLE_DIMENSIONS,
  borderRadius: BORDER_RADIUS,
  zIndex: 3,
  justifyContent: "center",
  alignItems: "center",
}

const $swipeText: TextStyle = {
  alignSelf: "center",
  zIndex: 2,
  color: "#BABABA",
}

const $textContainer: ViewStyle = {
  position: "absolute",
  left: 0,
  width: "100%",
  height: "100%",
  justifyContent: "center",
  alignItems: "center",
  overflow: "hidden",
}

const $textStyle: TextStyle = {
  textAlign: "center",
  width: BUTTON_WIDTH,
}

[lodev09]

Try wrap TrueSheet content with GestureHandlerRootView
See https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation#android

[hoangman1108]

Thanks, it works after wrapping with GestureHandlerRootView.

I forgot that the presented modal is not inside the app root, so the gesture handler needs to be defined again within the modal content.

However, on Android, swiping inside the sheet still affects TrueSheet, making gestures harder to control. I’m not sure if there’s a way to disable animations or gesture interactions after the sheet has fully opened—keeping animations only for open and close, and locking the sheet in a fixed position with no further animations or swipe response.

[hoangman1108]

One more question: the extra padding/empty space at the bottom of the sheet can’t be disabled, right? And we also can’t change the vertical position of the screen content panel relative to the bottom, correct?

[lodev09]

However, on Android, swiping inside the sheet still affects TrueSheet, making gestures harder to control. I’m not sure if there’s a way to disable animations or gesture interactions after the sheet has fully opened—keeping animations only for open and close, and locking the sheet in a fixed position with no further animations or swipe response.

I think there's an option in RNGH for you to do that, it's like a gesture offset X and Y or something, I forgot the api.

One more question: the extra padding/empty space at the bottom of the sheet can’t be disabled, right? And we also can’t change the vertical position of the screen content panel relative to the bottom, correct?

Yes, you can't. That is liquid glass effect. You can, however, disable Liquid Glass but the whole app will be affected. See https://sheet.lodev09.com/guides/liquid-glass#using-uidesignrequirescompatibility.

You can also try backgroundColor="transparent".

[lodev09]

Forgot to ask, are you referring to the extra space at the bottom that makes the sheet "float"? Or the bottom inset padding? If literal padding, try insetAdjustment="never" prop

[hoangman1108]

thanks