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

import { SegmentedControl, View } from "react-native-ui-lib";
import React, { memo, useCallback, useEffect, useRef, useState } from "react";
import { StyleSheet } from "react-native";
import { NavigationProp, useNavigationState } from "@react-navigation/native";

const ViewSwitch = memo(function ViewSwitch({
  navigation,
}: {
  navigation: any;
}) {
  const isNavigating = useRef(false);
  const navigationState = useNavigationState((state) => state);
  const [selectedIndex, setSelectedIndex] = useState(
    navigationState.index === 6 ? 1 : 0
  );

  // Sync the selected index with navigation state
  useEffect(() => {
    const newIndex = navigationState.index === 6 ? 1 : 0;
    if (selectedIndex !== newIndex) {
      setSelectedIndex(newIndex);
    }
    isNavigating.current = false;
  }, [navigationState.index]);

  const handleSegmentChange = useCallback(
    (index: number) => {
      if (isNavigating.current) return;
      if (index === selectedIndex) return;

      isNavigating.current = true;
      setSelectedIndex(index);

      // Delay navigation slightly to allow the segment control to update
      requestAnimationFrame(() => {
        navigation.navigate(index === 0 ? "calendar" : "todos");
      });
      console.log(selectedIndex)
    },
    [navigation, selectedIndex]
  );

  return (
    <View style={styles.container}>
      <SegmentedControl
        segments={[
          { label: "Calendar", segmentLabelStyle: styles.labelStyle },
          { label: "To Do's", segmentLabelStyle: styles.labelStyle },
        ]}
        containerStyle={styles.segmentContainer}
        style={styles.segment}
        backgroundColor="#ebebeb"
        inactiveColor="black"
        activeColor="white"
        activeBackgroundColor="#ea156c"
        outlineColor="white"
        outlineWidth={3}
        onChangeIndex={handleSegmentChange}
        initialIndex={selectedIndex}
      />
    </View>
  );
});
export default ViewSwitch;

const styles = StyleSheet.create({
  container: {
    borderRadius: 30,
    backgroundColor: "#ebebeb",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  segmentContainer: {
    height: 44,
    width: 220,
  },
  segment: {
    borderRadius: 50,
    borderWidth: 0,
    height: 44,
  },
  labelStyle: {
    fontSize: 16,
    fontFamily: "Manrope_600SemiBold",
  },
});