Tab

A customizable tab navigation component with variants.

Galaxy Tab

A default galactic tab navigator.

Preview

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

const Tab = () => {
  return (
    <View className="flex items-center">
      <View className="flex-row w-11/12 items-center justify-around rounded-full bg-black py-2">
        <View className="bg-white rounded-full w-12 h-12 flex items-center justify-center">
          <AntDesign name="home" size={24} color="#000000" />
        </View>
        <View className="text-white">
          <AntDesign name="contacts" size={24} color="white" />
        </View>
        <View className="text-white">
          <AntDesign name="shoppingcart" size={24} color="white" />
        </View>
        <View className="text-white">
          <AntDesign name="barschart" size={24} color="white" />
        </View>
        <View className="text-white">
          <AntDesign name="setting" size={24} color="white" />
        </View>
      </View>
    </View>
  );
};

export default Tab;

Usage Example

import React from "react";
import { View } from "react-native";
import Tab from "./components/Tab/GalaxyTab";

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

export default App;

Earth Tab

Tab navigator on the earth surface.

Preview

Home

Contact

Cart

Charts

Settings

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

const Tab = () => {
  return (
    <View className="flex items-center">
      <View className="flex-row w-11/12 items-center justify-around rounded bg-black py-4">
        <View>
          <Text className="text-white">Home</Text>
        </View>
        <View>
          <Text className="text-white">Contact</Text>
        </View>
        <View>
          <Text className="text-white">Carts</Text>        
        </View>
        <View>
          <Text className="text-white">Chart</Text>        
        </View>
        <View>
          <Text className="text-white">Settings</Text>        
         </View>
      </View>
    </View>
  );
};

export default Tab;

Usage Example

import React from "react";
import { View } from "react-native";
import Tab from "./components/Tab/EarthTab";

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

export default App;

Jupiter Tab

Tab navigator for jupiter navigation.

Preview

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

const Tab = () => {
  return (
    <View className="flex items-center relative">
      <View className="absolute -top-14 z-10">
        <View className="bg-black rounded-full p-4  mt-14">
          <AntDesign name="appstore-o" size={24} color="white" />
        </View>
      </View>
      <View className="flex-row w-full items-center justify-around bg-zinc-900 rounded-t-3xl px-2 mt-8 relative">
        <View className="absolute -top-14 left-1/2 -translate-x-1/2 w-20 h-20 bg-white rounded-full mt-6" />
        <TouchableOpacity className="flex items-center">
          <View className="bg-transparent p-4 flex-col justify-center items-center">
            <AntDesign name="home" size={24} color="white" />
            <Text className="text-gray-50 text-xs mt-1 text-center">Home</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity className="flex items-center">
          <View className="bg-transparent p-4 flex-col justify-center items-center">
            <AntDesign name="contacts" size={24} color="gray" />
            <Text className="text-gray-400 text-xs mt-1 text-center">
              Contacts
            </Text>
          </View>
        </TouchableOpacity>
        <View className="w-16" />
        <TouchableOpacity className="flex items-center mr-4">
          <View className="bg-transparent p-4 flex-col justify-center items-center">
            <AntDesign name="shoppingcart" size={24} color="gray" />
            <Text className="text-gray-400 text-xs mt-1 text-center">Cart</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity className="flex items-center">
          <View className="bg-transparent p-4 flex-col justify-center items-center">
            <AntDesign name="barschart" size={24} color="gray" />
            <Text className="text-gray-400 text-xs mt-1 text-center">
              Chart
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Tab;

Usage Example

import React from "react";
import { View } from "react-native";
import Tab from "./components/Tab/JupiterTab";

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

export default App;