React-Native ProgressBar with Animated

Syntax

The ProgressBar component can be created using the Animated module in React-Native.

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

const ProgressBar = ({ progress, height, barColor, fillColor }) => {
  const [animation, setAnimation] = useState(new Animated.Value(0));

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

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

  return (
    <View style={[styles.container, { height, backgroundColor: fillColor }]}>
      <Animated.View style={[styles.inner, { height, width, backgroundColor: barColor }]} />
      <Text style={styles.label}>{`${progress}%`}</Text>
    </View>
  );
};

export default ProgressBar;

const styles = StyleSheet.create({
  container: {
    borderWidth: 2,
    borderColor: '#F0F0F0',
    borderRadius: 5,
    flexDirection: 'row',
    alignItems: 'center',
  },
  inner: {
    borderRadius: 5,
    backgroundColor: '#B8E0CE',
  },
  label: {
    fontSize: 16,
    color: '#696969',
    marginLeft: 10,
  },
});

Example

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import ProgressBar from './ProgressBar';

export default function App() {
  const [progress, setProgress] = useState(0);

  return (
    <View style={styles.container}>
      <ProgressBar
        progress={progress}
        height={20}
        barColor="#6A85B6"
        fillColor="#F0F0F0"
      />
      <Text style={{ marginVertical: 10, fontSize: 24 }}>{`${progress}%`}</Text>
      <StatusBar style="auto" />

      <View style={{ flexDirection: 'row' }}>
        <View style={styles.button}>
          <Button title="+" onPress={() => setProgress(Math.min(progress + 10, 100))} />
        </View>
        <View style={styles.button}>
          <Button title="-" onPress={() => setProgress(Math.max(progress - 10, 0))} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginHorizontal: 10,
  },
});

Output

The ProgressBar component renders a styled progress bar with animated transitions. When the progress prop changes, the progress bar will smoothly animate to the new value.

Explanation

The ProgressBar component accepts several props, including progress, height, barColor, and fillColor. The progress prop is used to determine the current progress of the bar, while the height, barColor, and fillColor props are used to style the appearance of the component.

The component uses the useEffect hook to create a new animation instance whenever the progress prop changes. This animation uses the interpolate function to map the progress prop to a width value between 0% and 100%. As the animation progresses, the width value will smoothly transition from the current value to the new value specified in progress.

Use

The ProgressBar component can be used in any React Native application to display progress bars with animated transitions. The component can be fully customized with props for height, bar color, and fill color.

Important Points

• The ProgressBar component uses the Animated module in React-Native to create smooth transitions between progress values.
• The interpolate function is used to map the progress value to a range of width values.
• The useEffect hook is used to create a new animation instance whenever the progress prop changes.

Summary

The ProgressBar component is a customizable, animated progress bar in React Native. By using the Animated module and the interpolate function, the component can smoothly transition between progress values. The useEffect hook is used to create a new animation instance whenever the progress value changes. The ProgressBar component can be fully customized with props for height, bar color, and fill color.