react native animation
// user this lib
//https://github.com/oblador/react-native-animatable
Example :
import * as Animatable from 'react-native-animatable';
<Animatable.Text animation={fadeIn} >Fade me in</Animatable.Text>
<Animatable.View animation={fadeIn} >Fade me in</Animatable.View>
//Avialable animation
//https://github.com/oblador/react-native-animatable#animatableexplorer-examplereact native animated
//to use Animated you need to do the following.
import React, {useRef, useEffect} from "react";
import { Animated} from "react-native";
export default function App() {
const yourname = useRef(new Animated.Value(0)).current;
//we use a useEffect hooks to start the animation so that it startes every
//time element renders
useEffect(() => {
Animated.timing(translation, {
toValue: 50,
//you can use delay and duration.
/* delay: 2000,
duration: 1000, */
useNativeDriver: true,
//use .start() to start the animation
}).start();
}, []);
return(
<Animated.View
style={{
width: 100,
height: 100,
backgroundColor: "yellow",
transform: [{ translateX: yourname }],
}}
/>
);
}
//if you want to use a button you need to do this
//cange your react-native import to this.
import {Animated, TouchableOpacity, Text} from "react-native";
//and then insted of a useEffect we make a function
const animate = () => {
Animated.timing(translation, {
toValue: 100,
easing: Easing.bounce,
/* delay: 2000, */
duration: 1000,
useNativeDriver: true,
}).start();
};
//then do the same as before but add
<TouchableOpacity onPress={() => animate()}>
<Text>Start</Text>
</TouchableOpacity>
//under <Animated.View />Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
