UNPKG

@gaddario98/react-native-tabs

Version:
1 lines 6.51 kB
{"version":3,"file":"index.mjs","sources":["../../Tabs.tsx"],"sourcesContent":["import { Tabs } from \"expo-router\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Ionicons } from \"@expo/vector-icons\";\r\nimport { BottomTabHeaderProps } from \"@react-navigation/bottom-tabs\";\r\nimport {\r\n Header,\r\n useBreakpoint,\r\n useThemeColors,\r\n} from \"@gaddario98/react-native-ui\";\r\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\r\nimport { tabLabel } from \"@gaddario98/react-native-ui\";\r\nimport { ViewStyle } from \"react-native\";\r\nimport { ComponentProps } from \"react\";\r\n\r\nconst TabLayout: React.FC<{\r\n headerProps?: ComponentProps<typeof Header>;\r\n tabs: Array<{\r\n name: string;\r\n icon?: ComponentProps<typeof Ionicons>[\"name\"];\r\n title?: string;\r\n }>;\r\n ns?: string;\r\n initialRouteName?: string;\r\n}> = ({ headerProps, tabs, ns = \"tabs\", initialRouteName }) => {\r\n const { t } = useTranslation(ns);\r\n const colors = useThemeColors();\r\n const { valueWithBreakpoint: mobileView } = useBreakpoint(\r\n true,\r\n true,\r\n false,\r\n false\r\n );\r\n\r\n return (\r\n <Tabs\r\n initialRouteName={initialRouteName ?? tabs[0].name}\r\n screenOptions={{\r\n tabBarHideOnKeyboard: true,\r\n // Se siamo sul web, non usiamo il componente custom Header\r\n ...(!mobileView\r\n ? {\r\n headerShown: false,\r\n // Stile modificato per apparire come un header moderno\r\n tabBarStyle: {\r\n backgroundColor: colors.primary,\r\n height: 65,\r\n justifyContent: \"center\",\r\n alignItems: \"flex-start\",\r\n borderTopWidth: 0,\r\n borderBottomWidth: 0,\r\n },\r\n tabBarLabelStyle: [tabLabel, { textAlign: \"left\" }],\r\n tabBarItemStyle: {\r\n padding: 10,\r\n minWidth: \"min-content\" as ViewStyle[\"minWidth\"],\r\n },\r\n tabBarPosition: \"top\",\r\n tabBarLabelPosition: \"beside-icon\",\r\n }\r\n : {\r\n header: (props: BottomTabHeaderProps) => (\r\n <TabsHeader {...props} headerProps={headerProps} />\r\n ),\r\n tabBarStyle: {\r\n backgroundColor: colors.primary,\r\n height: 65,\r\n justifyContent: \"flex-end\",\r\n borderTopWidth: 0,\r\n borderBottomWidth: 0,\r\n },\r\n tabBarLabelPosition: \"below-icon\",\r\n tabBarItemStyle: {\r\n paddingTop: 5,\r\n },\r\n }),\r\n tabBarActiveTintColor: colors.secondary,\r\n tabBarInactiveTintColor: colors.onSurfaceVariant,\r\n }}\r\n >\r\n {tabs.map(({ name, icon, title }) => (\r\n <Tabs.Screen\r\n name={name}\r\n options={{\r\n title: title ? t(title) : \"\",\r\n tabBarIcon: icon\r\n ? ({ color }) => <Ionicons name={icon} color={color} size={22} />\r\n : undefined,\r\n }}\r\n /* listeners={{\r\n tabPress: () => {\r\n if (Platform.OS === \"web\" && window.location.pathname !== \"/\") {\r\n router.push(\"/\");\r\n }\r\n },\r\n }}*/\r\n />\r\n ))}\r\n </Tabs>\r\n );\r\n};\r\n\r\nconst TabsHeader: React.FC<\r\n BottomTabHeaderProps & { headerProps?: ComponentProps<typeof Header> }\r\n> = ({ options, headerProps }) => {\r\n const insets = useSafeAreaInsets();\r\n return (\r\n <Header\r\n backgroundColor=\"primary\"\r\n {...headerProps}\r\n title={options.title ?? headerProps?.title ?? \"\"}\r\n style={{\r\n marginTop: insets.top,\r\n ...headerProps?.style,\r\n }}\r\n hiddenLeftAction\r\n />\r\n );\r\n};\r\n\r\nexport default TabLayout;\r\n"],"names":["_jsx"],"mappings":"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"}