Introducing AlienX extension – The next evolution of UI development.Check it out on VS Code

Enjoy AlienUI? Give it a star on Github ⭐

Progress

A customizable progress bar component for tracking task progression.

Galaxy Progress Bar

A default galactic progress bar.

Preview

Steps

import React from "react";
import { View } from "react-native";
import { FontAwesome, MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";

const ProgressBar = () => {
  return (
    <View>
      <View className="h-2 w-[90%]  bg-gray-300 rounded-lg overflow-hidden">
        <View className="h-full w-1/2 bg-black" />
      </View>
      <View className="flex-row justify-between mt-4">
        <View className="flex-1 items-center">
          <FontAwesome name="info-circle" size={24} color="black" />
        </View>
        <View className="flex-1 items-center">
          <MaterialCommunityIcons name="map-marker" size={24} color="black" />
        </View>
        <View className="flex-1 items-center">
          <AntDesign name="creditcard" size={24} color="#A1A1AA" />
        </View>
      </View>
    </View>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import { View } from "react-native";
import ProgressBar from "./components/ProgressBar/GalaxyProgressBar";

const App = () => {
  return (
    <View>
      <ProgressBar />
    </View>
  );
};

export default App;

Earth Progress Bar

A progress bar showing progression on the earth surface.

Preview

import React from "react";
import { View } from "react-native";

const ProgressBar = () => {
  return (
    <View>
        <View className="mt-4 h-2 w-[90%]  rounded-full bg-gray-200 overflow-hidden">
          <View className="h-full w-2/3 rounded-full bg-black"></View>
        </View>
    </View>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import { View } from "react-native";
import ProgressBar from "./components/ProgressBar/EarthProgressBar";

const App = () => {
  return (
    <View>
      <ProgressBar />
    </View>
  );
};

export default App;

Mars Progress Bar

A progress bar showing progression on mars.

Preview

Details
Address
Payment
import React from "react";
import { View, Text } from "react-native";
import { FontAwesome } from "@expo/vector-icons";

const ProgressBar = () => {
  return (
    <View className="my-5">
      <View className="relative w-[90%]  mt-4 h-1.5 bg-gray-200 rounded-lg">
        <View className="absolute inset-0 flex flex-row justify-between -top-4">
          <View className="flex-1 items-start">
            <View className="w-9 h-9 p-2 rounded-full bg-black justify-center items-center mb-2">
              <FontAwesome name="check-circle" size={20} color="white" />
            </View>
            <Text className="text-xs font-medium text-black">Details</Text>
          </View>
          <View className="flex-1 items-center">
            <View className="w-9 h-9 p-2 rounded-full bg-black justify-center items-center mb-2">
              <FontAwesome name="check-circle" size={20} color="white" />
            </View>
            <Text className="text-xs font-medium text-black">Address</Text>
          </View>
          <View className="flex-1 items-end">
            <View className="w-9 h-9 p-2 rounded-full bg-gray-400 justify-center items-center mb-2">
              <FontAwesome name="check-circle" size={20} color="white" />
            </View>
            <Text className="text-xs font-medium text-gray-500">Payment</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default ProgressBar;

Usage Example

import React from "react";
import { View } from "react-native";
import ProgressBar from "./components/ProgressBar/MarsProgressBar";

const App = () => {
  return (
    <View>
      <ProgressBar />
    </View>
  );
};

export default App;