Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Animated.useCode hook as an alternative to Animated.Code #237

Merged
merged 2 commits into from
Apr 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,21 @@ block([
}/>
```

## `Animated.useCode`

The `useCode` hook acts as an alternative to the `Animated.Code` component.
```js
Animated.useCode(node, deps)
```
It's passed an animated node and an array of dependencies, and updates that node both when the component mounts and every time a value in that array changes. It does nothing on versions of React Native that don't support hooks (<0.59).
```js
const [offset, setOffset] = React.useState(20);
Animated.useCode(
set(transX1, add(_transX, offset)),
[offset]
);
```

## Event handling with reanimated nodes

`react-native-reanimated`'s new syntax is possible to be used with `Animated.event`. Instead of providing only a mapping from event fields to animated nodes, it is allowed to write a function that takes reanimated values map as an input and return a block (or any other reanimated function) that will be then used to handle the event.
Expand Down
6 changes: 6 additions & 0 deletions react-native-reanimated.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,12 @@ declare module 'react-native-reanimated' {
config: DecayConfig,
): BackwardCompatibleWrapper;

// hooks
export function useCode(
exec: AnimatedNode<number>,
deps: Array<any>,
): void

// configuration

// `addWhitelistedNativeProps` will likely be removed soon, and so is
Expand Down
1 change: 1 addition & 0 deletions src/derived/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export { default as min } from './min';
export { default as onChange } from './onChange';
export { default as floor } from './floor';
export { default as ceil } from './ceil';
export { default as useCode } from './useCode';
15 changes: 15 additions & 0 deletions src/derived/useCode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { always } from '../base';

function useCode(exec, deps) {
if (typeof React.useEffect === 'function') {
React.useEffect(() => {
const animatedAlways = always(exec);
animatedAlways.__attach();
return () => {
animatedAlways.__detach();
};
}, deps);
}
}
export default useCode;