rn-bottombar/TriosBB.js

react-native-bottombar A customizable react-native-bottombar component for React Native projects. Use this open source library in your fresh React Native project for instant startup.

import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Image, Text } from "react-native";

const TriosBottomBar = ({
  HomeText,
  EmailText,

  ProfileText,
  tab1Image,
  tab2Image,
  tab3Image,
  tab1Component,
  tab3Component,
  tab2Component,
  tab5Component,
  bottomBarItemStyle,
  bottomBarImageStyle,
  BottomTextStyle,
  bottomBarStyle,
  bottomBarContainerStyle,
  // activeImageStyle,
  useBottomText,
  centerBtnStyle,
}) => {
  const [activeTab, setActiveTab] = useState("home");

  const handleTabPress = (tabName) => {
    setActiveTab(tabName);
  };
  const [htmlState, setHtmlState] = useState("");
  const onhandle = (html) => {
    switch (html) {
      case "profile":
        return setHtmlState(
          tab3Component ? tab3Component : defaultTab("Tab 1")
        );

      case "home":
        return setHtmlState(tab2Component);
      case "email":
        return setHtmlState(tab1Component);

      default:
        setHtmlState("home");
    }
    return setHtmlState;
  };
  console.log(htmlState, "htmlState===>");
  const defaultTab = (props) => {
    return (
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <Text>{props.tabNumber}</Text>
      </View>
    );
  };
  return (
    <View style={[styles.bottomBarContainer, bottomBarContainerStyle]}>
      <Text>{htmlState}</Text>
      <View style={[styles.bottomBar, bottomBarStyle]}>
        <TouchableOpacity
          style={[styles.bottomBarItem, bottomBarItemStyle]}
          onPress={() => {
            handleTabPress("email");
            onhandle("email");
          }}
        >
          <Image
            source={
              tab1Image &&
              typeof tab1Image === "string" &&
              tab1Image.startsWith("http")
                ? { uri: tab1Image }
                : tab1Image
                ? tab1Image
                : require("../assets/email.png")
            }
            style={[
              styles.bottomBarImage,
              bottomBarImageStyle,
              activeTab === "email" && [styles.activeImage],
            ]}
          />

          {[
            useBottomText ? (
              <Text key={4} style={[styles.text, BottomTextStyle]}>
                {EmailText ? EmailText : "Email"}
              </Text>
            ) : null,
          ]}
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.bottomBarItem, bottomBarItemStyle]}
          onPress={() => {
            onhandle("home");
            handleTabPress("home");
          }}
        >
          <View
            style={[
              {
                backgroundColor: "white",
                height: 38,
                width: 45,
                borderRadius: 70,
                alignItems: "center",
                justifyContent: "center",
                aspectRatio: 1,
              },
              centerBtnStyle,
            ]}
          >
            <Image
              source={
                tab2Image &&
                typeof tab2Image === "string" &&
                tab2Image.startsWith("http")
                  ? { uri: tab2Image }
                  : tab2Image
                  ? tab2Image
                  : require("../assets/home.png")
              }
              style={[
                styles.bottomBarImage,
                bottomBarImageStyle,
                activeTab === "home" && [styles.activeImage],
              ]}
            />
          </View>
          {[
            useBottomText ? (
              <Text key={3} style={[styles.text, BottomTextStyle]}>
                {HomeText ? HomeText : "Home"}
              </Text>
            ) : null,
          ]}
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.bottomBarItem, bottomBarItemStyle]}
          onPress={() => {
            handleTabPress("user");
            onhandle("profile");
          }}
        >
          <Image
            resizeMode="contain"
            source={
              tab3Image &&
              typeof tab3Image === "string" &&
              tab3Image.startsWith("http")
                ? { uri: tab3Image }
                : tab3Image
                ? tab3Image
                : require("../assets/user.png")
            }
            style={[
              styles.bottomBarImage,
              bottomBarImageStyle,
              activeTab === "user" && [styles.activeImage],
            ]}
          />

          {[
            useBottomText ? (
              <Text key={3} style={[styles.text, BottomTextStyle]}>
                {ProfileText ? ProfileText : "Profile"}
              </Text>
            ) : null,
          ]}
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  bottomBarContainer: {
    flex: 1,
    justifyContent: "flex-end",
  },
  bottomBar: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    backgroundColor: "#EB5914",
    height: 53,
    borderTopColor: "#e5e5e5",
    width: "80%",
    alignSelf: "center",
    marginBottom: 7,
    borderRadius: 10,
    // marginLeft: 30,
    shadowColor: "#EB5914",
    shadowOffset: {
      width: 0,
      height: -3,
    },
    shadowOpacity: 0.3,
    shadowRadius: 5,
    elevation: 7,
    opacity: 1,
  },
  bottomBarItem: {
    alignItems: "center",
  },
  bottomBarImage: {
    width: 22,
    height: 22,
    marginBottom: 5,
    alignItems: "center",
  },
  activeImage: {},
  text: {
    color: "black",
    fontSize: 12,
  },
});

export default TriosBottomBar;