yapıya bağlı kal sadece tabBar'ı tasarımsal düzenle. border bottom kullanmak yerine background değiş modern olsun

 <View
        onLayout={onTabBarLayout}
        style={{
          // Render it immediately to measure it early since its size doesn't depend on the content.
          // However, keep it invisible until the header above stabilizes in order to prevent jumps.
          opacity: isHeaderReady ? 1 : 0,
          pointerEvents: isHeaderReady ? "auto" : "none",
        }}
      >
        <TabBar
          testID={testID}
          items={items}
          selectedPage={currentPage}
          onSelect={onSelect}
          onPressSelected={onCurrentPageSelected}
        />
      </View>

export function TabBar({
  testID,
  selectedPage,
  items,
  indicatorColor,
  onSelect,
  onPressSelected,
}: TabBarProps) {
  const pal = usePalette("default");
  const scrollElRef = useRef<ScrollView>(null);
  const itemRefs = useRef<Array<Element>>([]);
  const [itemXs, setItemXs] = useState<number[]>([]);
  const indicatorStyle = useMemo(
    () => ({ borderBottomColor: indicatorColor || pal.colors.link }),
    [indicatorColor, pal.colors.link],
  );
  const { isDesktop, isTablet } = useWebMediaQueries();
  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles;

  useEffect(() => {
    if (isNative) {
      // On native, the primary interaction is swiping.
      // We adjust the scroll little by little on every tab change.
      // Scroll into view but keep the end of the previous item visible.
      let x = itemXs[selectedPage] || 0;
      x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH);
      scrollElRef.current?.scrollTo({ x });
    } else {
      // On the web, the primary interaction is tapping.
      // Scrolling under tap feels disorienting so only adjust the scroll offset
      // when tapping on an item out of view--and we adjust by almost an entire page.
      const parent = scrollElRef?.current?.getScrollableNode?.();
      if (!parent) {
        return;
      }
      const parentRect = parent.getBoundingClientRect();
      if (!parentRect) {
        return;
      }
      const {
        left: parentLeft,
        right: parentRight,
        width: parentWidth,
      } = parentRect;
      const child = itemRefs.current[selectedPage];
      if (!child) {
        return;
      }
      const childRect = child.getBoundingClientRect?.();
      if (!childRect) {
        return;
      }
      const {
        left: childLeft,
        right: childRight,
        width: childWidth,
      } = childRect;
      let dx = 0;
      if (childRight >= parentRight) {
        dx += childRight - parentRight;
        dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH;
      } else if (childLeft <= parentLeft) {
        dx -= parentLeft - childLeft;
        dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH;
      }
      let x = parent.scrollLeft + dx;
      x = Math.max(0, x);
      x = Math.min(x, parent.scrollWidth - parentWidth);
      if (dx !== 0) {
        parent.scroll({
          left: x,
          behavior: "smooth",
        });
      }
    }
  }, [scrollElRef, itemXs, selectedPage, styles]);

  const onPressItem = useCallback(
    (index: number) => {
      onSelect?.(index);
      if (index === selectedPage) {
        onPressSelected?.(index);
      }
    },
    [onSelect, selectedPage, onPressSelected],
  );

  // calculates the x position of each item on mount and on layout change
  const onItemLayout = React.useCallback(
    (e: LayoutChangeEvent, index: number) => {
      const x = e.nativeEvent.layout.x;
      setItemXs((prev) => {
        const Xs = [...prev];
        Xs[index] = x;
        return Xs;
      });
    },
    [],
  );

  return (
    <View testID={testID} style={[pal.view, styles.outer]}>
      <DraggableScrollView
        testID={`${testID}-selector`}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        ref={scrollElRef}
        contentContainerStyle={styles.contentContainer}
      >
        {items.map((item, i) => {
          const selected = i === selectedPage;
          return (
            <PressableWithHover
              testID={`${testID}-selector-${i}`}
              key={`${item}-${i}`}
              ref={(node) => (itemRefs.current[i] = node as any)}
              onLayout={(e) => onItemLayout(e, i)}
              style={styles.item}
              hoverStyle={pal.viewLight}
              onPress={() => onPressItem(i)}
            >
              <View style={[styles.itemInner, selected && indicatorStyle]}>
                <PaletteText
                  //   emoji
                  type={isDesktop || isTablet ? "xl-bold" : "lg-bold"}
                  testID={testID ? `${testID}-${item}` : undefined}
                  style={[
                    selected ? pal.text : pal.textLight,
                    { lineHeight: 20 },
                  ]}
                >
                  {item}
                </PaletteText>
              </View>
            </PressableWithHover>
          );
        })}
      </DraggableScrollView>
      <View style={[pal.border, styles.outerBottomBorder]} />
    </View>
  );
}

const desktopStyles = StyleSheet.create({
  outer: {
    flexDirection: "row",
    width: 598,
  },
  contentContainer: {
    paddingHorizontal: 0,
    backgroundColor: "transparent",
  },
  item: {
    paddingTop: 14,
    paddingHorizontal: 14,
    justifyContent: "center",
  },
  itemInner: {
    paddingBottom: 12,
    borderBottomWidth: 3,
    borderBottomColor: "transparent",
  },
  outerBottomBorder: {
    position: "absolute",
    left: 0,
    right: 0,
    top: "100%",
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

const mobileStyles = StyleSheet.create({
  outer: {
    flexDirection: "row",
  },
  contentContainer: {
    backgroundColor: "transparent",
    paddingHorizontal: 6,
  },
  item: {
    paddingTop: 10,
    paddingHorizontal: 10,
    justifyContent: "center",
  },
  itemInner: {
    paddingBottom: 10,
    borderBottomWidth: 3,
    borderBottomColor: "transparent",
  },
  outerBottomBorder: {
    position: "absolute",
    left: 0,
    right: 0,
    top: "100%",
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});