Untitled

import { Feather, FontAwesome } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React, { useState } from "react";
import { Image, Pressable, PressableProps, StyleProp, View, ViewStyle } from "react-native";
import { IconButton } from "react-native-paper";
import WR_Icon from "../components/core/WR_Icon";
import Colors from "../constants/Colors";
import LoginScreen from "../screens/LoginScreen";
import PersonalProfileScreen from "../screens/PersonalProfileScreen";
import ReadingsScreen from "../screens/ReadingsScreen";
import TabOneScreen from "../screens/TabOneScreen";
import WideScreen from "../screens/WideScreen";
import { RootTabParamList } from "../types";
import ReadingDetails from "../screens/opera-details/details";

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */
const BottomTab = createBottomTabNavigator<RootTabParamList>();
const bottomTabHeight = 78;

export default function BottomTabNavigator(colorScheme) {

  const [options, setOptions] = useState(false)

  // setOptions((value) => !value)

  return (
    <BottomTab.Navigator
      initialRouteName="Wide"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: Colors.dark.tint,
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: Colors.primary.dark,
          height: bottomTabHeight,
        },
      }}
    >
      <BottomTab.Screen
        name="Wide"
        component={WideScreen}
        options={{
          title: "WideScreen",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="image" />
          ),
        }}
      />

      <BottomTab.Screen
        name="Readings"
        component={ReadingsScreen}
        options={{
          headerShown: false,
          title: "Readings",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="book" />
          ),
        }}
      />
      <BottomTab.Screen
        name="TabOne"
        component={TabOneScreen}
        options={{
          headerShown: false,
          title: "Add",
          tabBarButton: (props) => (
            <TabBarButton name="plus" onPress={() => { setOptions(!options) }} style={{
              transform: [{ rotate: options ? '45deg' : '90deg' }],
            }} />
          ),
        }}
      />
      <BottomTab.Screen
        name="Login"
        component={ReadingDetails}
        options={{
          headerShown: false,
          title: "Login",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="layers" />
          ),
        }}
      />
      <BottomTab.Screen
        name="PersonalProfile"
        component={PersonalProfileScreen}
        options={{
          headerShown: false,
          title: "Personal Profile",
          tabBarIcon: ({ focused }) => (
            <TabBarIconProfile focused={focused}></TabBarIconProfile>
          ),
        }}
      />
    </BottomTab.Navigator>
  );
}

/**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 */

const activeTabBottomIndicatorWidth = 5;

function TabBarIcon(props: {
  name: React.ComponentProps<typeof Feather>["name"];
  focused: boolean;
}) {
  return (
    <View
      style={[
        { height: "100%", width: "100%", justifyContent: "center" },
        props.focused
          ? {
            borderBottomColor: Colors.primary.blue,
            borderBottomWidth: activeTabBottomIndicatorWidth,
          }
          : {},
      ]}
    >
      <WR_Icon
        color={Colors.neutral.white}
        size={25}
        style={[
          { left: 25 },
          props.focused ? { marginBottom: -activeTabBottomIndicatorWidth } : {},
        ]}
        name={props.name}
      />
    </View>
  );
}

type PropsTabBar = {
  name: React.ComponentProps<typeof FontAwesome>["name"];
  onPress: () => void;
  style: StyleProp<ViewStyle> | any,
}

function TabBarButton({ name, onPress, style }: PropsTabBar) {

  const { transform, ...containerStyle } = style

  const buttonSize = 70;
  return (
    <Pressable
      onPress={onPress}
      style={[{
        width: buttonSize,
        height: buttonSize,
        marginTop: -buttonSize / 2,
        borderRadius: buttonSize / 2,
        backgroundColor: Colors.primary.blue,
        justifyContent: "center",
        alignContent: "center",
        alignItems: "center",
      }, {
        ...containerStyle
      }]}
    >
      <IconButton
        size={24}
        iconColor='white'
        icon="plus"
        style={{
          transform
        }}
      />
    </Pressable>
  );
}

function TabBarIconProfile(props: { focused: boolean }) {
  return (
    <View
      style={[
        {
          position: "relative",
          height: "100%",
          width: "100%",
          justifyContent: "center",
        },
        props.focused
          ? {
            borderBottomColor: Colors.primary.blue,
            borderBottomWidth: activeTabBottomIndicatorWidth,
          }
          : {},
      ]}
    >
      <Image
        source={require("../assets/images/avatar-6.png")}
        style={[
          {
            position: "absolute",
            resizeMode: "contain",
            height: bottomTabHeight * 0.66,
            alignSelf: "center",
          },
          props.focused ? {} : {},
        ]}
      />
    </View>
  );
}