refactor(container): use shared value

Author: sjwall

lib/src/components/Container.tsx

@@ -2,7 +2,6 @@ import React, {
   Children,
   cloneElement,
   useMemo,
-  useRef,
   type FC,
   type PropsWithChildren,
   type ReactElement,
@@ -68,17 +67,17 @@ const Container: FC<ContainerProps> = ({children}) => {
     ]
   }, [children])
 
-  const heightCollapsed = useRef<number>(50)
-  const heightExpanded = useRef<number>(50)
-  const heightKnob = useRef<number>(50)
+  const heightCollapsed = useSharedValue<number>(0)
+  const heightExpanded = useSharedValue<number>(0)
+  const heightKnob = useSharedValue<number>(0)
   const heightOffset = useSharedValue<number>(0)
   const pressed = useSharedValue<boolean>(false)
   const expanded = useSharedValue<boolean>(false)
 
   const animateHeightStyles = useAnimatedStyle(() => ({
     height:
-      (expanded.value ? heightExpanded.current : heightCollapsed.current) +
-      heightKnob.current +
+      (expanded.value ? heightExpanded.value : heightCollapsed.value) +
+      heightKnob.value +
       heightOffset.value,
   }))
 
@@ -88,7 +87,7 @@ const Container: FC<ContainerProps> = ({children}) => {
         opacity: expanded.value ? 0 : 1,
       }
     }
-    const heightDiff = heightExpanded.current - heightCollapsed.current
+    const heightDiff = heightExpanded.value - heightCollapsed.value
     const diff = (1 / heightDiff) * Math.abs(heightOffset.value)
     return {
       opacity: expanded.value ? diff : 1 - diff,
@@ -102,7 +101,7 @@ const Container: FC<ContainerProps> = ({children}) => {
           <SectionContainer
             style={styles.containerExpanded}
             onLayout={(e) => {
-              heightExpanded.current = e.nativeEvent.layout.height
+              heightExpanded.value = e.nativeEvent.layout.height
             }}>
             {expandedChildren}
           </SectionContainer>
@@ -111,7 +110,7 @@ const Container: FC<ContainerProps> = ({children}) => {
           <SectionContainer
             style={animateCollapsedStyles}
             onLayout={(e) => {
-              heightCollapsed.current = e.nativeEvent.layout.height
+              heightCollapsed.value = e.nativeEvent.layout.height
             }}>
             {collapsedChildren}
           </SectionContainer>
@@ -125,7 +124,7 @@ const Container: FC<ContainerProps> = ({children}) => {
             heightExpanded={heightExpanded}
             heightKnob={heightKnob}
             onLayout={(e) => {
-              heightKnob.current = e.nativeEvent.layout.height
+              heightKnob.value = e.nativeEvent.layout.height
             }}
             pressed={pressed}
             expanded={expanded}>

lib/src/components/KnobContainer.tsx

@@ -14,9 +14,9 @@ export type KnobContainerProps = PropsWithChildren<{
   accessibilityHint?: ViewProps['accessibilityHint']
   accessibilityLabel?: ViewProps['accessibilityLabel']
   expanded: SharedValue<boolean>
-  heightCollapsed: RefObject<number>
-  heightExpanded: RefObject<number>
-  heightKnob: RefObject<number>
+  heightCollapsed: SharedValue<number>
+  heightExpanded: SharedValue<number>
+  heightKnob: SharedValue<number>
   heightOffset: SharedValue<number>
   onLayout?: ViewProps['onLayout']
   pressed: SharedValue<boolean>
@@ -42,18 +42,18 @@ const KnobContainer: FC<KnobContainerProps> = ({
       base.value = offset.value !== 0 ? offset.value : 0
     })
     .onChange((event) => {
-      const maxDragDistance = heightExpanded.current! - heightCollapsed.current!
+      const maxDragDistance = heightExpanded.value! - heightCollapsed.value!
       offset.value =
         base.value +
         (expanded.value
           ? Math.min(Math.max(event.translationY, -maxDragDistance), 0)
           : Math.min(Math.max(0, event.translationY), maxDragDistance))
       heightOffset.value = expanded.value
-        ? offset.value - heightCollapsed.current!
+        ? offset.value - heightCollapsed.value!
         : offset.value
     })
     .onFinalize(() => {
-      const maxDragDistance = heightExpanded.current! - heightCollapsed.current!
+      const maxDragDistance = heightExpanded.value! - heightCollapsed.value!
       const toggleLimit = maxDragDistance / 2
       expanded.value = +offset.value > toggleLimit
       offset.value = withClamp(
@@ -69,7 +69,7 @@ const KnobContainer: FC<KnobContainerProps> = ({
     })
 
   const handleTapEnd = () => {
-    const maxDragDistance = heightExpanded.current! - heightCollapsed.current!
+    const maxDragDistance = heightExpanded.value! - heightCollapsed.value!
     expanded.value = !expanded.value
     offset.value = withClamp(
       {min: 0, max: maxDragDistance},