fix: accept interpolated and derived values for from

Author: satya164

README.md

@@ -25,10 +25,15 @@ A component that converts between an [`Animated.Value`][animated.value] and a [`
 
 It accepts the following props:
 
-- `from`
-- `to`
+- `from`: Value to read and observe changes from.
 
-The `from` and `to` props need to be a pair of [`Animated.Value`][animated.value] and [`SharedValue`][reanimated.sharedvalue] or vice versa. The value passed to `from` will be used to update the value passed to `to`.
+  `Animated.Node` - `Animated.Value` and result of modifications such as interpolation (`Animated.AnimatedInterpolation`), addition (`Animated.AnimatedAddition`), etc.
+
+  `SharedValue<number>` or `DerivedValue<number>`
+
+- `to`: Value to update when the `from` value changes.
+
+  `Animated.Value` or `SharedValue<number>`
 
 Usage:
 

example/ios/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
-  - AnimatedObserver (0.1.0):
+  - AnimatedObserver (0.2.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2789,7 +2789,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  AnimatedObserver: cce34fdba81fb2efd6cc290484a7214a97dbe8db
+  AnimatedObserver: 6303ec1cf6156d60d8b5865b8ac3e6aa3918b132
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6

example/src/Examples.tsx

@@ -11,8 +11,10 @@ import {
   AnimatedObserver,
 } from 'react-native-animated-observer';
 import Reanimated, {
+  interpolate,
   useAnimatedRef,
   useAnimatedStyle,
+  useDerivedValue,
   useScrollOffset,
   useSharedValue,
   type SharedValue,
@@ -21,19 +23,33 @@ import Reanimated, {
 export function AnimatedToReanimated() {
   const { width } = useWindowDimensions();
 
+  const scrollWidth = useScrollWidth();
+
   const positionAnimated = useState(() => new Animated.Value(0))[0];
   const positionReanimated = useSharedValue(0);
 
+  const positionAnimatedInterpolated = positionAnimated.interpolate({
+    inputRange: [0, scrollWidth - width],
+    outputRange: [1, 0],
+  });
+
+  const positionReanimatedInterpolated = useSharedValue(scrollWidth);
+
   return (
     <View style={styles.container}>
       <AnimatedConverter from={positionAnimated} to={positionReanimated} />
+      <AnimatedConverter
+        from={positionAnimatedInterpolated}
+        to={positionReanimatedInterpolated}
+      />
+      <ProgressBarReanimated value={positionReanimatedInterpolated} />
       <Boxes
         animatedValue={positionAnimated}
         sharedValue={positionReanimated}
       />
       <Animated.ScrollView
         horizontal
-        contentContainerStyle={[styles.content, { width: width * 2 - 130 }]}
+        contentContainerStyle={[styles.content, { width: scrollWidth }]}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { x: positionAnimated } } }],
           { useNativeDriver: true }
@@ -47,21 +63,38 @@ export function AnimatedToReanimated() {
 
 export function ReanimatedToAnimated() {
   const { width } = useWindowDimensions();
+
+  const scrollWidth = useScrollWidth();
   const scrollRef = useAnimatedRef();
 
-  const positionAnimated = useState(() => new Animated.Value(0))[0];
   const positionReanimated = useScrollOffset(scrollRef);
+  const positionAnimated = useState(() => new Animated.Value(0))[0];
+
+  const positionReanimatedInterpolated = useDerivedValue(() => {
+    return interpolate(
+      positionReanimated.value,
+      [0, scrollWidth - width],
+      [1, 0]
+    );
+  });
+
+  const positionAnimatedInterpolated = useState(() => new Animated.Value(1))[0];
 
   return (
     <View style={styles.container}>
       <AnimatedConverter from={positionReanimated} to={positionAnimated} />
+      <AnimatedConverter
+        from={positionReanimatedInterpolated}
+        to={positionAnimatedInterpolated}
+      />
+      <ProgressBarAnimated value={positionAnimatedInterpolated} />
       <Boxes
         animatedValue={positionAnimated}
         sharedValue={positionReanimated}
       />
       <Animated.ScrollView
         horizontal
-        contentContainerStyle={[styles.content, { width: width * 2 - 130 }]}
+        contentContainerStyle={[styles.content, { width: scrollWidth }]}
         // @ts-expect-error the types are wrong
         ref={scrollRef}
       >
@@ -133,10 +166,43 @@ function Boxes({
   );
 }
 
+function ProgressBarAnimated({ value }: { value: Animated.Node }) {
+  const { width } = useWindowDimensions();
+
+  return (
+    <View style={styles.progressBar}>
+      <Animated.View
+        style={[
+          styles.progress,
+          {
+            transform: [{ translateX: Animated.multiply(value, -width) }],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+function ProgressBarReanimated({ value }: { value: SharedValue<number> }) {
+  const { width } = useWindowDimensions();
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: value.get() * -width }],
+    };
+  });
+
+  return (
+    <View style={styles.progressBar}>
+      <Reanimated.View style={[styles.progress, animatedStyle]} />
+    </View>
+  );
+}
+
 function ObserverDisplay({
   value,
 }: {
-  value: number | Animated.Value | SharedValue<number>;
+  value: number | Animated.Node | Omit<SharedValue<number>, 'set'>;
 }) {
   const [displayValue, setDisplayValue] = useState(0);
 
@@ -153,6 +219,12 @@ function ObserverDisplay({
   );
 }
 
+function useScrollWidth() {
+  const { width } = useWindowDimensions();
+
+  return width * 2 - 130;
+}
+
 function useInterval(callback: () => void, delay: number = 1000) {
   const callbackRef = useRef(callback);
 
@@ -204,9 +276,17 @@ const styles = StyleSheet.create({
     color: 'white',
   },
   reanimated: {
-    backgroundColor: '#f78c6c',
+    backgroundColor: '#FF1744',
   },
   animated: {
-    backgroundColor: '#82aaff',
+    backgroundColor: '#304FFE',
+  },
+  progressBar: {
+    height: 3,
+    overflow: 'hidden',
+  },
+  progress: {
+    height: '100%',
+    backgroundColor: '#212121',
   },
 });

src/index.tsx

@@ -9,7 +9,7 @@ import Reanimated, {
 import { default as ObserverView } from './AnimatedObserverViewNativeComponent';
 
 type AnimatedObserverProps = {
-  value: Animated.Value | SharedValue<number> | number;
+  value: Animated.Node | Omit<SharedValue<number>, 'set'> | number;
   onValueChange: NonNullable<
     | React.ComponentProps<typeof ObserverView>['onValueChange']
     | React.ComponentProps<typeof AnimatedObserverViewInternal>['onValueChange']
@@ -33,6 +33,7 @@ export function AnimatedObserver({
         // @ts-expect-error - component has incorrect type for value prop
         <ReanimatedObserverViewInternal tag={tag} value={value} />
       ) : (
+        // @ts-expect-error - isSharedValue won't return proper type for derived value
         <AnimatedObserverViewInternal tag={tag} value={value} />
       )}
       {typeof onValueChange === 'function' ? (
@@ -60,6 +61,7 @@ export function AnimatedConverter(props: AnimatedConverterProps) {
   }
 
   if (!isSharedValue<number>(props.from) && isSharedValue<number>(props.to)) {
+    // @ts-expect-error - isSharedValue won't return proper type for derived value
     return <AnimatedToReanimated from={props.from} to={props.to} />;
   }
 
@@ -69,7 +71,7 @@ export function AnimatedConverter(props: AnimatedConverterProps) {
 }
 
 type AnimatedToReanimatedProps = {
-  from: Animated.Value;
+  from: Animated.Node;
   to: SharedValue<number>;
 };
 
@@ -104,7 +106,7 @@ function AnimatedToReanimated({
 }
 
 type ReanimatedToAnimatedProps = {
-  from: SharedValue<number>;
+  from: Omit<SharedValue<number>, 'set'>;
   to: Animated.Value;
 };