ExpoBackgroundLocation/app/(tabs)/_layout.tsx

59 lines
1.4 KiB
TypeScript

import { Tabs } from "expo-router";
import React from "react";
import { Platform, AppRegistry } from "react-native";
import { HapticTab } from "@/components/HapticTab";
import { IconSymbol } from "@/components/ui/IconSymbol";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";
AppRegistry.registerHeadlessTask("GeolocationBackgroundTask", () =>
require("../../task/watchPosition")
);
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
headerShown: false,
tabBarButton: HapticTab,
tabBarBackground: TabBarBackground,
tabBarStyle: Platform.select({
ios: {
// Use a transparent background on iOS to show the blur effect
position: "absolute",
},
default: {},
}),
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<IconSymbol size={28} name="house.fill" color={color} />
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: "Explore",
tabBarIcon: ({ color }) => (
<IconSymbol
size={28}
name="paperplane.fill"
color={color}
/>
),
}}
/>
</Tabs>
);
}