Documentação - Animação (Iniciante)
React Native - CLI
Introdução
Este é um documento para iniciantes conseguirem fazer a utilização de animações simples no dia a dia. Este documento terá um código simples que também estará disponível no github.
Instalação
Para fazer a instalação do pacote de animação é simples:
yarn add react-native-reanimated
ou
npm install react-native-reanimated
Utilize esse comando no seu terminal.
Logo após a instalação é necessário instalar via cocoapods utilizando comando pods install dentro da pasta /ios. Após a instalação é necessário inserir o plugin no arquivo babel.config.js
module.exports = {
…
plugins: [
…
'react-native-reanimated/plugin',
],
};
Possível error
Quando estava instalando ocorreu um erro quando fui utilizar o reanimated informando que o passo anterior tem que ser feito, mesmo sendo feito pode ocorre um erro de cache, é simples resolver yarn start --reset-cache
O código que foi utilizado para abertura do menu utilizando o 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,
},
});
Segue o link do github com o aplicação completa:
Top comments (0)