apps/mobile/components/navigation/tabs.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { ViewStyle } from "react-native";
import { Tabs } from "expo-router";
import { cssInterop } from "nativewind";

function StyledTabsImpl({
  tabBarStyle,
  headerStyle,
  sceneStyle,
  ...props
}: React.ComponentProps<typeof Tabs> & {
  tabBarStyle?: ViewStyle;
  headerStyle?: ViewStyle;
  sceneStyle?: ViewStyle;
}) {
  props.screenOptions = {
    ...props.screenOptions,
    tabBarStyle,
    headerStyle,
    sceneStyle,
  };
  return <Tabs {...props} />;
}

export const StyledTabs = cssInterop(StyledTabsImpl, {
  tabBarClassName: "tabBarStyle",
  headerClassName: "headerStyle",
  sceneClassName: "sceneStyle",
});