how to use "useAnimatedProps" or display a sharedValue in the render without runOnJS with setState?

[andrewdang17]

I'm a little confused on the documentation and wondering I am understanding it correctly. I want to be able to pass a sharedValue to a react component and have that component re-render if the sharedValue is updated from the parent component, and also display that sharedValue as well. It seems like animatedProps would work but it doesn't. Here's simplified code of a component I am building that is basically a draggable status bar (broken up into chunks) that change color as you drag it as well as displaying the progress.

import React, { FC, useEffect } from "react"
import { Center, Flex, HStack, Skeleton, Text } from "native-base"
import { PanGestureHandler, PanGestureHandlerGestureEvent } from "react-native-gesture-handler"
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  useDerivedValue,
  useAnimatedProps,
} from "react-native-reanimated"

const ProgressBar = () => {
  const translateX = useSharedValue(0)
  const percentProgressed = useDerivedValue(() => {
    return -(translateX.value / 100)
  })
  const animatedProps = useAnimatedProps(() => {
    return { percentProgressed: percentProgressed.value }
  })

  const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, ContextType>({
    onStart: (_event, context) => {
      context.translateX = translateX.value
    },
    onActive: (event, context) => {
      translateX.value = context.translateX + event.translationX
    },
  })

  const translateXStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    }
  })

  return (
    <PanGestureHandler onGestureEvent={panGesture}>
      <Animated.View
        style={[translateXStyle]}
      >
        <HStack flexDirection="row" space={1} >
          {[1,2,3,4,5,6,7,8,9,10].map((n: number, i: number) => {
            const barPercent = (i + 1) / 100
            const backgroundColor = barPercent > percentProgressed.value ? "gray" : "black"
            return (
              <Animated.View
                key={i}
                style={[
                  {
                    backgroundColor,
                    height: 10,
                    width: 5,
                  },
                ]}
              />
            )
          })}
        </HStack>
        <Text>Percent: {percentProgressed.value}</Text>
      </Animated.View>
    </PanGestureHandler>
  )
}

percentProgressed.value which is a derivedValue cannot be shown in render, and animatedProps also does not appear to update if I access the return value. I could use save the state of the progressuseState in the onActive with runOnJs, but this is actually really slow and lags on physical devices (works fine on the simulator though with no lag). Any ideas on how I'd accomplish this?