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
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',
],
};
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,
},
});
Here is the github link with the complete application:
Top comments (0)