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

Enjoy AlienUI? Give it a star on Github ⭐

Breadcrumb

A customizable breadcrumb component with different variants for navigation.

Galaxy Breadcrumb

A breadcrumb for navigation, in the galaxy.

Preview

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const Breadcrumb = () => {
  return (
    <View className="flex flex-row items-center">
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Home</Text>
      </TouchableOpacity>
      <Ionicons
        name="chevron-forward"
        size={12}
        color="black"
        className="mx-1 mt-[6px]"
      />
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Nebula</Text>
      </TouchableOpacity>
      <Ionicons
        name="chevron-forward"
        size={12}
        color="black"
        className="mx-1 mt-[6px]"
      />
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Galaxy</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Breadcrumb;

Usage Example

import React from "react";
import { View } from "react-native";
import Breadcrumb from "./components/Breadcrumb/GalaxyBreadcrumb";

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

export default App;

Earth Breadcrumb

A breadcrumb for navigating on the earth surface.

Preview

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

const Breadcrumb = () => {
  return (
    <View className="flex flex-row items-center">
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Home</Text>
      </TouchableOpacity>
      <MaterialCommunityIcons
        name="slash-forward"
        size={12}
        color="black"
        className="mx-1 mt-1"
      />
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Nebula</Text>
      </TouchableOpacity>
      <MaterialCommunityIcons
        name="slash-forward"
        size={12}
        color="black"
        className="mx-1 mt-1"
      />
      <TouchableOpacity>
        <Text className="text-gray-600 text-sm">Galaxy</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Breadcrumb;

Usage Example

import React from "react";
import { View } from "react-native";
import Breadcrumb from "./components/Breadcrumb/EarthBreadcrumb";

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

export default App;