diff --git a/.eslintrc b/.eslintrc index 0df6af96..6af0f6f5 100644 --- a/.eslintrc +++ b/.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 } } diff --git a/README.md b/README.md index 6d43e4c4..68ceff92 100644 --- a/README.md +++ b/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. diff --git a/src/Animations.ts b/src/Animations.ts index 599f4d00..70b3c7db 100644 --- a/src/Animations.ts +++ b/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 = ( + values: V[], + deps: Dependencies +): Animated.Value[] => useMemoOne(() => values.map(v => new Value(v)), deps); + +export const useNamedValues = ( + values: Record, + deps: Dependencies +): Record> => + useMemoOne(() => { + const result: Record> = {}; + Object.keys(values).forEach(key => { + result[key as K] = new Value(values[key as K]); + }); + return result; + }, deps);