rn-bottombar/CurvedBottomBar.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 {
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  Text,
  ImageBackground,
} from "react-native";

const CurvedBottomTabBar = ({
  centerIcon,
  onPress,
  useText,
  tab1Component,
  tab2Component,
  tab3Component,
  tab4Component,
  tab5Component,
  tab1Image,
  tab2Image,
  tab3Image,
  tab4Image,
  tab5Image,
  bottomBarStyle,
  bottomBarItemStyle,
  centerIconViewStyle,
  BottomTextStyle,
  centerIconStyle,
  SearchText,
  ProfileText,
  EmailText,
  SettingText,
}) => {
  const [htmlState, setHtmlState] = useState("");

  const onhandle = (html) => {
    switch (html) {
      case "profile":
        return setHtmlState(tab1Component);
      case "search":
        return setHtmlState(tab2Component);
      case "home":
        return setHtmlState(tab3Component);
      case "email":
        return setHtmlState(tab4Component);
      case "setting":
        return setHtmlState(tab5Component);
      default:
        setHtmlState("home");
    }
    return setHtmlState;
  };
  console.log(htmlState, "htmlState===>");

  return (
    <View style={styles.container}>
      <Text>{htmlState}</Text>
      <View style={[styles.bottomBar, bottomBarStyle]}>
        <TouchableOpacity
          onPress={() => {
            onPress;
            onhandle("home");
          }}
        >
          <View style={[styles.centerIcon, centerIconViewStyle]}>
            <ImageBackground source={centerIcon} style={[centerIconStyle]}>
              <Image
                source={
                  tab3Image &&
                  typeof tab3Image === "string" &&
                  tab3Image.startsWith("http")
                    ? { uri: tab3Image }
                    : tab3Image
                    ? tab3Image
                    : require("../assets/home.png")
                }
                style={{ height: 24, width: 24 }}
              />
            </ImageBackground>
          </View>
        </TouchableOpacity>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            height: 65,
            width: "100%",
            alignItems: "center",
          }}
        >
          <View>
            <TouchableOpacity
              onPress={() => {
                onPress;
                onhandle("profile");
              }}
            >
              <Image
                source={
                  tab1Image &&
                  typeof tab1Image === "string" &&
                  tab1Image.startsWith("http")
                    ? { uri: tab1Image }
                    : tab1Image
                    ? tab1Image
                    : require("../assets/user.png")
                }
                style={[styles.bottomBarItem, bottomBarItemStyle]}
              />
              {[
                useText ? (
                  <Text style={[styles.text, BottomTextStyle]}>
                    {ProfileText ? ProfileText : "Profile"}
                  </Text>
                ) : null,
              ]}
            </TouchableOpacity>
          </View>

          <View>
            <TouchableOpacity
              onPress={() => {
                onPress;
                onhandle("search");
              }}
            >
              <Image
                source={
                  tab2Image &&
                  typeof tab2Image === "string" &&
                  tab2Image.startsWith("http")
                    ? { uri: tab2Image }
                    : tab2Image
                    ? tab2Image
                    : require("../assets/search-interface-symbol.png")
                }
                style={[styles.bottomBarItem, bottomBarItemStyle]}
              />
              {[
                useText ? (
                  <Text style={[styles.text, BottomTextStyle]}>
                    {SearchText ? SearchText : "Search"}
                  </Text>
                ) : null,
              ]}
            </TouchableOpacity>
          </View>
          <View>
            <TouchableOpacity
              onPress={() => {
                onPress;
                onhandle("email");
              }}
            >
              <Image
                source={
                  tab4Image &&
                  typeof tab4Image === "string" &&
                  tab4Image.startsWith("http")
                    ? { uri: tab4Image }
                    : tab4Image
                    ? tab4Image
                    : require("../assets/email.png")
                }
                style={[
                  styles.bottomBarItem,
                  bottomBarItemStyle,
                  { marginLeft: 45 },
                ]}
              />
              {[
                useText ? (
                  <Text
                    style={[styles.text, BottomTextStyle, { marginLeft: 45 }]}
                  >
                    {EmailText ? EmailText : "Email"}
                  </Text>
                ) : null,
              ]}
            </TouchableOpacity>
          </View>
          <View>
            <TouchableOpacity
              onPress={() => {
                onPress;
                onhandle("setting");
              }}
            >
              <Image
                source={
                  tab5Image &&
                  typeof tab5Image === "string" &&
                  tab5Image.startsWith("http")
                    ? { uri: tab5Image }
                    : tab5Image
                    ? tab5Image
                    : require("../assets/setting.png")
                }
                style={[styles.bottomBarItem, bottomBarItemStyle]}
              />
              {[
                useText ? (
                  <Text style={[styles.text, BottomTextStyle]}>
                    {ProfileText ? ProfileText : "Profile"}
                  </Text>
                ) : null,
              ]}
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 100,
  },
  centerIcon: {
    position: "absolute",
    top: -25,
    left: "50%",
    marginLeft: -25,
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: "grey",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,
    elevation: 8,
  },
  tabs: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
    height: 70,
  },

  bottomBar: {
    backgroundColor: "#EB5914",
    paddingHorizontal: 14,
  },
  bottomBarItem: {
    height: 22,
    width: 22,
    alignSelf: "center",
  },
  text: {
    color: "black",
  },
});

export default CurvedBottomTabBar;