[React-Native] Animation - 2 / 기초 ProgressBar

간단 한 Prograssbar

 

import React, {useState, useEffect} from 'react';
import {SafeAreaView, Animated, StatusBar, Text, Button} from 'react-native';

const ProgressBar = props => {
  const [value] = useState(new Animated.Value(props.value));

  useEffect(() => {
    Animated.timing(value, {
      toValue: props.value,
      duration: Math.random() * 3000,
    }).start();
  }, [props.value, value]);

  const width = value.interpolate({
    inputRange: [0, 80],
    outputRange: ['0%', '100%'],
  });

  return (
    <Animated.View
      style={{
        width: width,
        height: 30,
        backgroundColor: 'green',
      }}>
      <Text>{props.value}</Text>
    </Animated.View>
  );
};
const App: () => React$Node = () => {
  const [value, setValue] = useState(0);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ProgressBar value={value} />
        <ProgressBar value={value} />
        <ProgressBar value={value} />
        <Button title="Click" onPress={() => setValue(0)} />
        <Button title="Click" onPress={() => setValue(100)} />
      </SafeAreaView>
    </>
  );
};

export default App;

 

Animated에는 여러 메소드가 존재한다. 대표적으로

- timing

- spring

- decay가 있다.