React Native Animations Example
June 05, 20221/**
2 * Sample React Native App
3 * https://github.com/facebook/react-native
4 *
5 * @format
6 * @flow strict-local
7 */
8
9import React, {Node, useEffect, useState} from 'react';
10import {Animated, StyleSheet} from 'react-native';
11
12const styles = StyleSheet.create({
13 container: {
14 flex: 1,
15 alignItems: 'center',
16 justifyContent: 'center',
17 },
18 box: {
19 height: 100,
20 width: 100,
21 },
22});
23
24const App: () => Node = () => {
25 const [animation, setAnimation] = useState(new Animated.Value(0));
26
27 useEffect(() => {
28 Animated.timing(animation, {
29 toValue: 1,
30 duration: 5000,
31 useNativeDriver: false,
32 }).start();
33 }, []);
34
35 const bgStyle = {
36 backgroundColor: animation.interpolate({
37 inputRange: [0, 1],
38 outputRange: ['rgba(255,99,71, 1)', 'rgba(255,99,71, 0)'],
39 }),
40 };
41 const boxStyle = {
42 backgroundColor: animation.interpolate({
43 inputRange: [0, 1],
44 outputRange: ['rgb(99,71,255)', 'rgb(255,99,71)'],
45 }),
46 };
47
48 return (
49 <Animated.View style={[styles.container, bgStyle]}>
50 <Animated.View style={[styles.box, boxStyle]} />
51 </Animated.View>
52 );
53};
54
55export default App;
![](https://storage.googleapis.com/images-for-cms/original_images/000078110010_Large.jpeg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=fileuploads%40com-cjoshmartin.iam.gserviceaccount.com%2F20250218%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20250218T072509Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=8d355ead0700f533a1a22b37e64caf35a1552bb7ed557e02fb734d3e743b7a39184df0084479344dfaa24136554eea90222c32b5b5cc7bc7cb94d2b91a66bd3eea92d4382c744a9bf643ef4aba327b08f9be58f31dcae599c999e4c3c1ddc6aa49ef46f0523503264087168b13d4876c149897823262b047d8f180b0b6b37fc4482a364089b6734f1186a77dda75782975aaa7e7d08178901804bde9dbf0f94508d31e8f0eadadff7f80f47df385dee1f8a9bb3967357903ac855171417f2b3399e26aea4c522585767d9ee7435020f68b1b99b165c5cbf465b6723a205deec7e3ad7e8ba744b566d4745dace4955c84e53ba5b17cafb42b57d94b4554d6af54)
Josh Martin
Full Stack Engineer and Maker
contact@cjoshmartin.com
Chicago, IL
Hello, I am Josh, I am a full-stack developer specializing in developing for Web and Mobile in React, React Native, Node.js, and Django. I used to work at Amazon in the advertising sales Performance department as a Frontend Engineer...
I have a degree from Purdue University in Computer Engineering with the use of my degree and passions I can offer support more than just Web and Mobile development. I can assist with any need related to hardware integration with internet-enabled devices or design needs in CAD and manufacturing.