<<< Go back

June 5, 2022

React Native Animations example

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Node, useEffect, useState} from 'react';
import {Animated, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: 100,
    width: 100,
  },
});

const App: () => Node = () => {
  const [animation, setAnimation] = useState(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: false,
    }).start();
  }, []);

  const bgStyle = {
    backgroundColor: animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['rgba(255,99,71, 1)', 'rgba(255,99,71, 0)'],
    }),
  };
  const boxStyle = {
    backgroundColor: animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['rgb(99,71,255)', 'rgb(255,99,71)'],
    }),
  };

  return (
    <Animated.View style={[styles.container, bgStyle]}>
      <Animated.View style={[styles.box, boxStyle]} />
    </Animated.View>
  );
};

export default App;
1F48D778-78F1-4233-9663-E3A8378082E8

Josh Martin

Full Stack Engineer

Chicago, IL

Josh is a software engineer and consultant. He writes software in Go, python, javascript. Additionally, he has experience writing using Django, React.JS, React Native, Vue, Kubernetes, Docker.

Hire him as your next Consultant or New Hire!