React Native + Tailwind CSS 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>
  );
}