cally/components/pages/(tablet_pages)/ViewSwitch.tsx

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

const ViewSwitch = () => {
  const [view, setView] = useState<boolean>(false);

  return (
    <View
      row
      spread
      style={{
        borderRadius: 30,
        backgroundColor: "#ebebeb",
        alignItems: "center",
        justifyContent: "center",
        // iOS shadow
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0,
        shadowRadius: 0,
        // Android shadow (elevation)
        elevation: 0,
      }}
      centerV
    >
      <TouchableOpacity
        onPress={() => {
          setView(true);
        }}
      >
        <View
          centerV
          centerH
          height={54}
          paddingH-15
          style={view ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={view ? "white" : "black"} style={styles.switchTxt}>
            Calendar
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          setView(false);
        }}
      >
        <View
          centerV
          centerH
          height={54}
          paddingH-15
          style={!view ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={!view ? "white" : "black"} style={styles.switchTxt}>
            Chores
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default ViewSwitch;

const styles = StyleSheet.create({
  switchBtnActive: {
    backgroundColor: "#ea156c",
    borderRadius: 50,
    width: 110,
  },
  switchBtn: {
    backgroundColor: "#ebebeb",
    borderRadius: 50,
    width: 110,
  },
  switchTxt: {
    fontSize: 16,
    fontFamily: "Manrope_600SemiBold",
  },
});