Button

A customizable button component to trigger an action or event.

Galaxy Button

A button with a solid background, used for primary actions. This variant takes 3 props: type, label, onPress.

Preview

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

const Button = ({ type = "default", label = "Galaxy Button", onPress }) => {
  const buttonStyles = {
    default: {
      bgColor: "bg-black",
      textColor: "text-white",
      border: "",
    },
    destructive: {
      bgColor: "bg-red-500",
      textColor: "text-white",
      border: "",
    },
    outline: {
      bgColor: "bg-transparent",
      textColor: "text-black",
      border: "border border-black",
    },
    disabled: {
      bgColor: "bg-gray-400",
      textColor: "text-gray-200",
      border: "",
    },
  };

  const { bgColor, textColor, border } =
    buttonStyles[type] || buttonStyles.default;

  return (
    <Pressable
      className={`py-2 px-4 rounded-md flex items-center justify-center w-52 ${bgColor} ${border}`}
      onPress={type !== "disabled" ? onPress : null}
      disabled={type === "disabled"}
    >
      <Text className={`text-base ${textColor}`}>{label}</Text>
    </Pressable>
  );
};

export default Button;

Usage Example

import React from "react";
import { View } from "react-native";
import Button from "./components/Button/GalaxyButton";

const App = () => {
  return (
    <View>
      <Button />
      {/*
      <Button type="destructive" label="Delete" />
      <Button type="outline" label="Outline Button" />
      <Button type="disabled" label="Disabled" />
      */}
    </View>
  );
};

export default App;

Earth Button

A button with an icon, used for secondary actions. This variant takes 5 props: type, label, icon, iconColor, onPress.

Preview

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

const Button = ({ label = "Earth Button", type = "default", icon = "alien-outline", iconColor, onPress }) => {
  const buttonStyles = {
    default: {
      bgColor: "bg-black",
      textColor: "text-white",
      border: "border border-black",
      iconColor: "white",
    },
    destructive: {
      bgColor: "bg-red-500",
      textColor: "text-white",
      border: "border border-red-700",
      iconColor: "white",
    },
    outline: {
      bgColor: "bg-transparent",
      textColor: "text-black",
      border: "border border-black",
      iconColor: "black",
    },
    disabled: {
      bgColor: "bg-gray-400",
      textColor: "text-gray-200",
      border: "border border-gray-500",
      iconColor: "gray",
    },
  };

  const { bgColor, textColor, border } =
    buttonStyles[type] || buttonStyles.default;

  return (
    <Pressable
      className={`py-2 px-4 rounded-md flex flex-row items-center justify-center w-52 ${bgColor} ${border}`}
      onPress={type !== "disabled" ? onPress : null}
      disabled={type === "disabled"}
    >
      <Text className={`text-base mr-1 ${textColor}`}>{label}</Text>
      {icon && (
        <MaterialCommunityIcons
          name={icon}
          size={20}
          color={iconColor || buttonStyles[type].iconColor}
        />
      )}
    </Pressable>
  );
};

export default Button;

Usage Example

import React from "react";
import { View } from "react-native";
import Button from "./components/Button/EarthButton";

const App = () => {
  return (
    <View>
      <Button />
      {/*
      <Button type="destructive" label="Delete" icon="trash-can-outline" />
      <Button type="outline" label="Outline Button" icon="pencil-outline" />
      <Button type="disabled" label="Disabled" />
      <Button label="Custom Icon" icon="rocket-launch-outline" iconColor="blue" />
      */}
    </View>
  );
};

export default App;