React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.
In this article, we will see how to create an Animated Progress bar in React-Native.
Required Dependency:
npm install react-native-animated-progress
Syntax:
<ProgressBar
progress={*}
height={*}
backgroundColor="*"
/>
Props in Animated Progress Bar:
- height: It is used to set the height of the progress bar.
- backgroundColor: It is used to set the color of progressbar.
- animated: This prop takes a boolean value for enabling or disabling animation.
- indeterminate: It takes a boolean value to Set the bar to animate constantly as a loading progress.
- progress: It Chooses the point where the progress should animate to, based on the progress bar width.
- trackColor:Sets the color of the progress bar track.
To create a React-Native App, we will use the Expo CLI version that will much smoother to run your React Native applications.
Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.
Below is the step by step implementation of the above approach.
Step 1: Open your terminal and run the below command.
npm install -g expo-cli
Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.
expo init "projectName"
Step 3: Now go into the created folder and start the server by using the following command.
cd "projectName"
Project Structure: It will look like the following.
Below is implementation of code. In App.js file, we firstly a simple progress bar then create an animated progress bar. We will also change background of progress bar using backgroundColor. We have also setup color to that part of progress bar which is not yet completed using trackColor prop,
JavaScript
import React from 'react'; import { View, Text } from 'react-native'; import ProgressBar from 'react-native-animated-progress'; const App = () => { return ( <View> <Text style={{ marginBottom: 20 }}> Progress without animation </Text> <ProgressBar progress={30} height={7} backgroundColor="#4a0072" animated={false} /> <Text>{'\n'} {'\n'}</Text> <Text style={{ marginBottom: 20 }}> Progress with animation and increased height </Text> <ProgressBar progress={60} height={7} backgroundColor="green" /> <Text>{'\n'} {'\n'}</Text> <Text style={{ marginBottom: 20 }}>With indeterminate</Text> <ProgressBar indeterminate="true" backgroundColor="#4a0072" /> <Text>{'\n'} {'\n'}</Text> <Text style={{ marginBottom: 20 }}> With TrackColor (that shows remaining part) </Text> <ProgressBar progress={60} height={7} backgroundColor="green" trackColor="yellow" /> </View> ); }; export default App; |
Step to run application: To execute React-Native Program use the following command.
npm start web
Output:
