Eyes wide open

Key concepts: Shared values, interpolation.

Resources

Here you'll find all the information you'll need to complete the challenge, fresh from the Reanimated docs.

• Shared Values
• Interpolate

Challenge

As a first challenge, we’ll make Slimy open its eyes!

💡 TIPS && HINTS:

• The eyes are just a circular view (i added the shine for the sake of looks, but it is not really necessary), and you’ll need to animate its style.
• Remember that anything that can be normally found on a stylesheet can be animated.
• You will have to consider using a sharedValue for the “state” of the eyes. Remember that, in animations, a shared value is similar to a useState.
• You will need to use one of the animation helpers (e.g with Spring).

❔ Questions to consider:

• How can you animate the style of a view to look like it is an eye opening or closing?