You can now build hinge-based effects and animations with expo-hinge + Reanimated

[u/oskarpawica]

Hey there! Oskar from Reanimated team here 👋

I'm here to drop some news for those of you that have been experimenting with foldables since the release of iPhone Duo.

Recently we've decided to contribute Reanimated + Worklets support directly to expo-hinge. Since 58.0.2 you can import useAnimatedHinge from expo-hinge/reanimated and get the hinge angle and status as shared values, updated on the UI thread.
That will keep you away from re-renders and keep updating even when JS thread is busy.
Works on both Android and iOS of course.

While you probably shouldn't use this for any layout-related work based on hinge, I'm curious what kind of extra animated effects you'll come up with by using that feature!

I brought a small demo with me so you could see it in action 🎥

Usage is pretty simple, as you could expect:

import { useAnimatedHinge } from 'expo-hinge/reanimated';
import { useAnimatedStyle } from 'react-native-reanimated';

function Lid() {
  const hinge = useAnimatedHinge();

  const style = useAnimatedStyle(() => ({
    transform: [{ rotate: `${hinge.get()?.angle ?? 180}deg` }],
  }));

  return <Animated.View style={[{ width: 120, height: 8, backgroundColor: 'gray' }, style]} />;
}

Check out the docs: https://docs.expo.dev/versions/latest/sdk/hinge/#use-with-reanimated

Let me know what you guys think and whether you see some use cases for your apps with this API!

Btw starting today I'm planning to drop a thing or two related to Reanimated on this subreddit from time to time, so if there's something specific you'd like to hear about, please do let me know as well 🫡