feat(🆕): Add useValues() 🎣 (#126)

.eslintrc

@@ -3,6 +3,7 @@
   "rules": {
     "react-native/no-color-literals": 0,
     "import/prefer-default-export": 0,
-    "import/no-unresolved": 0
+    "import/no-unresolved": 0,
+    "import/export": 0
   }
 }

README.md

@@ -245,6 +245,22 @@ contains(values: Node[], value: Node) => Node
 
 ## Animations
 
+### `useValues(...Default Values[], deps)`
+
+Create animation values which lifecycle is granted by `deps`.
+For instance the code snippet below:
+
+```
+const [toggle, state] = useValues([0, State.UNDETERMINED], []);
+```
+
+is a shortcut for
+
+```
+const [toggle state] = useMemoOne(() => [new Value(0), new Value(State.UNDETERMINED)], []);
+```
+
+
 ### `useTransition(state: any, source: Node, destination: Node, duration: number, easing: EasingFunction): Node`
 
 Returns an animation value that follows a component state.

src/Animations.ts

@@ -137,3 +137,23 @@ export const useToggle = (
   easing: Animated.EasingFunction = Easing.linear
 ) =>
   useTransition(toggle, toggle ? 1 : 0, not(toggle ? 1 : 0), duration, easing);
+
+type Dependencies = readonly unknown[];
+type Atomic = string | number | boolean;
+
+export const useValues = <V extends Atomic>(
+  values: V[],
+  deps: Dependencies
+): Animated.Value<V>[] => useMemoOne(() => values.map(v => new Value(v)), deps);
+
+export const useNamedValues = <V extends Atomic, K extends string>(
+  values: Record<K, V>,
+  deps: Dependencies
+): Record<K, Animated.Value<V>> =>
+  useMemoOne(() => {
+    const result: Record<string, Animated.Value<V>> = {};
+    Object.keys(values).forEach(key => {
+      result[key as K] = new Value(values[key as K]);
+    });
+    return result;
+  }, deps);