DEV Community

Marcos Taylor
Marcos Taylor

Posted on

Animation with react-native-reanimated


Documentation - Animation (Beginner)
React Native - CLI

Introduction
This is a document for beginners to be able to use simple animations in everyday life. This document will have a simple code that will also be available on github.

Installation
To install the animation package is simple:

yarn add react-native-reanimated
or
npm install react-native-reanimated
Enter fullscreen mode Exit fullscreen mode

Use this command in your terminal.

Right after the installation it is necessary to install via cocoapods using the pods install command inside the /ios folder. After installation it is necessary to insert the plugin in the babel.config.js file:

module.exports = {
…
plugins: [
…
         'react-native-reanimated/plugin',
     ],  
};
Enter fullscreen mode Exit fullscreen mode

possible error
When it was used, an error was installed when I was revived stating that the previous step occurred that being done, even if it is done, a cache error can occur, it is resolved yarn start --reset-cache

The code that was used to open the menu using Reanimated

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
 interpolate,
 runOnJS,
 useAnimatedStyle,
 useSharedValue,
 withSpring,
 withTiming,
} from 'react-native-reanimated';
import {
 Container,
 Content,
 Blackout,
 TopClose,
 CloseItem,
 Image,
} from './styles';

export const ModalSettings: React.FC<any> = ({setOpenModalFunction}) => {
 const offset = useSharedValue(900);

 const animatedStyles = useAnimatedStyle(() => ({
   transform: [{translateY: offset.value}],
   opacity: interpolate(offset.value, [0, -280], [1, 0.5]),
 }));

 offset.value = withSpring(20);

 const animatedAndClose = () => {
   offset.value = withTiming(
     1200,
     {
       duration: 800,
     },
     () => {
       'worklet';

       runOnJS(setOpenModalFunction)();
     },
   );
 };

 return (
   <Blackout>
     <Container>
       <Animated.View style={[animatedStyles, styles.animated]}>
         <Content>
           <TopClose onPress={animatedAndClose}>
             <CloseItem />
           </TopClose>
           <Image
             source={{
               uri: 'https://cdn.dribbble.com/users/745861/screenshots/7889509/media/5891d9d48179ca0b3a8fcdf178db8737.png',
             }}
           />
         </Content>
       </Animated.View>
     </Container>
   </Blackout>
 );
};

const styles = StyleSheet.create({
 animated: {
   flex: 1,
 },
});
Enter fullscreen mode Exit fullscreen mode

Here is the github link with the complete application:

Image description

Open here github

Discussion (0)