Introduction
Authentication
Core
A selection of React Native Progress Bar components built with Tailwind CSS
These examples require the Tailwind React Native Classnames package.
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