How would you approach animating with Restyle?

[Kristofer Giltvedt Selbekk]

I love Restyle, and we're basing our component library on it. However, how do you go about implementing animations? I couldn't find any resources on how to set up animations with it online, or in the docs.

Could somebody give me some pointers? 🙏🏻

[Aron Berezkin]

You can createAnimatedComponent and provide animated styles, for example

import { createBox, createText } from '@shopify/restyle';
import { Animated } from 'react-native';
import type { Theme } from './theme';

export const Box = createBox<Theme>();
export const Text = createText<Theme>();
export const AnimatedBox = Animated.createAnimatedComponent(Box);
export const AnimatedText = Animated.createAnimatedComponent(Text);

[Kristofer Giltvedt Selbekk]

Oh okay, that makes sense I guess – but how can I then transition from one variant to the next, for instance?

[Ahmed Eid]

I assume you would need to get the primitive value from the theme object.

[Kristofer Giltvedt Selbekk]

Thanks!