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

Feature/22 reanimated connector #23

Merged
merged 12 commits into from
Dec 15, 2021
Merged

Conversation

chrfalch
Copy link
Contributor

@chrfalch chrfalch commented Dec 14, 2021

Added implementation according to #22

The integration add listeners to shared values so that when a value changes the SkiaView / Canvas is repainted.

The integration does not add a hard dependency on Reanimated. If Reanimated is installed, the hook should work - if not it should emit a warning.

The solution has been tested both with and without reanimated installed.

The integration is implemented as the hook useSharedValueEffect:

/**
 * Connects a shared value from reanimated to a SkiaView or Canvas
 * so whenever the shared value changes the SkiaView will redraw.
 * @param ref Reference to the SkiaView or Canvas
 * @param value Shared value to add change listeners for
 * @param values Additional (optional) shared values to add change listeners for
 */
export const useSharedValueEffect = <T = number>(
  ref: RefObject<SkiaView>,
  value: SharedValueTypeWrapper<T>,
  ...values: SharedValueTypeWrapper<T>[]
) => void

closes #22

@chrfalch chrfalch requested a review from wcandillon December 14, 2021 12:39
- Added documentation page
- Updated animation docs with twoslash
@wcandillon
Copy link
Contributor

Great, Would it be ok to add reanimated and gesture handler as the dep to the example project and add a demo of the feature or would it have some potential unintentional side-effects?

This branch doesn't pass the typescript due to #21

@wcandillon
Copy link
Contributor

If we had reanimated 2 a dep of the documentation, would the two slash examples work? No strong opinion there.

interpolate,
useProgress,
} from "@shopify/react-native-skia";

const myComponent = () => {
const progress = useProgress();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here we use useProgress without prior mentioning.
Do we want to expose it?
It feels almost identical to remotion useFrame() which is the single hook you need to build any animation in remotion. However, our case is a bit different since we have nondeterministic animations and side-effects to animations (such as stopping/pausing).

Copy link
Contributor Author

@chrfalch chrfalch Dec 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, useFrame is a bit different than useProgress - since useFrame actually gives you the frame number and not the time passed since start.

@chrfalch
Copy link
Contributor Author

If we had reanimated 2 a dep of the documentation, would the two slash examples work? No strong opinion there.

Maybe could just mark the whole animation page as "in progress"/"subject to change" to send a strong signal about this not being ready and final? And then decide about animations when we've released the alpha?

@wcandillon
Copy link
Contributor

👍🏻 my only review comment is #25.
Then we can merge it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Reanimated connector
3 participants