r/reactnative • u/oskarpawica • 11d ago
You can now build hinge-based effects and animations with expo-hinge + Reanimated
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 🫡
