misc: init

app/(tabs)/_layout.tsx

@@ -1,35 +1,45 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import React from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+export function DevicesHeader() {
+	const router = useRouter();
 
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-      }}>
-      <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>
-  );
+	return (
+		<View style={styles.headerRight}>
+			<TouchableOpacity
+				onPress={() => router.push("/scan-devices")}
+				style={styles.headerButton}
+			>
+				<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
+			</TouchableOpacity>
+		</View>
+	);
 }
+
+export default function TabsLayout() {
+	return (
+		<NativeTabs>
+			<NativeTabs.Trigger name="index">
+				<Icon sf="desktopcomputer"/>
+        <Label>Devices</Label>
+			</NativeTabs.Trigger>
+			<NativeTabs.Trigger name="settings">
+				<Icon sf="gear"/>
+        <Label>Settings</Label>
+			</NativeTabs.Trigger>
+		</NativeTabs>
+	);
+}
+
+const styles = StyleSheet.create({
+	headerRight: {
+		flexDirection: "row",
+		gap: 16,
+	},
+	headerButton: {
+		paddingHorizontal: 8,
+	},
+});