React Native + Tailwind CSS Progress Bar

A selection of React Native Progress Bar components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Progress Bar

Progress Bar
import { View } from "react-native";
import tailwind from "twrnc";
export default function Progress() {
return (
<View style={tailwind`flex-1 justify-center px-8 gap-6`}>
<View style={tailwind`h-4 bg-slate-100 rounded-full`}>
<View
style={[tailwind`h-4 bg-blue-400 rounded-full`, { width: "20%" }]}
/>
</View>
<View style={tailwind`h-4 bg-slate-100 rounded-full`}>
<View
style={[tailwind`h-4 bg-green-400 rounded-full`, { width: "40%" }]}
/>
</View>
<View style={tailwind`h-4 bg-slate-100 rounded-full`}>
<View
style={[tailwind`h-4 bg-red-400 rounded-full`, { width: "60%" }]}
/>
</View>
<View style={tailwind`h-4 bg-slate-100 rounded-full`}>
<View
style={[tailwind`h-4 bg-purple-400 rounded-full`, { width: "80%" }]}
/>
</View>
</View>
);
}

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions