feat(with-native-tabs): Add native tabs example

with-native-tabs/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

with-native-tabs/app.json

@@ -0,0 +1,10 @@
+{
+  "expo": {
+    "name": "with-native-tabs",
+    "slug": "with-native-tabs",
+    "orientation": "default",
+    "scheme": "withnativetabs",
+    "userInterfaceStyle": "automatic",
+    "plugins": ["expo-router"]
+  }
+}

with-native-tabs/app/_layout.tsx

@@ -0,0 +1,79 @@
+import MaterialIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import {
+  Badge,
+  Icon,
+  Label,
+  NativeTabs,
+  VectorIcon,
+} from "expo-router/unstable-native-tabs";
+import { Platform, useColorScheme, View } from "react-native";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { TabConfigurationContext } from "@/utils/tabConfigurationContext";
+import { useState } from "react";
+
+export default function RootLayout() {
+  const scheme = useColorScheme();
+  const [isMinimizeOnScrollEnabled, setIsMinimizeOnScrollEnabled] =
+    useState(true);
+  const [isIndicatorEnabled, setIsIndicatorEnabled] = useState(true);
+  const [
+    isTransparentOnScrollEdgeEnabled,
+    setIsTransparentOnScrollEdgeEnabled,
+  ] = useState(true);
+
+  return (
+    <TabConfigurationContext
+      value={{
+        isMinimizeOnScrollEnabled,
+        setIsMinimizeOnScrollEnabled,
+        isIndicatorEnabled,
+        setIsIndicatorEnabled,
+        isTransparentOnScrollEdgeEnabled,
+        setIsTransparentOnScrollEdgeEnabled,
+      }}
+    >
+      <ThemeProvider value={scheme === "dark" ? DarkTheme : DefaultTheme}>
+        <NativeTabs
+          minimizeBehavior={
+            isMinimizeOnScrollEnabled ? "onScrollDown" : "never"
+          }
+          disableIndicator={!isIndicatorEnabled}
+          disableTransparentOnScrollEdge={!isTransparentOnScrollEdgeEnabled}
+          tintColor={Platform.select({
+            android: scheme === "dark" ? "white" : "blue",
+            // Fallback to default iOS and web tint color
+            default: undefined,
+          })}
+        >
+          <NativeTabs.Trigger name="index">
+            <Label>Home</Label>
+            <Icon
+              sf={{ default: "house", selected: "house.fill" }}
+              androidSrc={<VectorIcon family={MaterialIcons} name="home" />}
+            />
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name="explore">
+            <Label>Explore</Label>
+            <Badge>3</Badge>
+            <Icon
+              sf={{ default: "safari", selected: "safari.fill" }}
+              androidSrc={<VectorIcon family={MaterialIcons} name="compass" />}
+            />
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name="search" role="search">
+            <Label>Search</Label>
+            <Badge />
+            <Icon
+              sf="magnifyingglass"
+              androidSrc={<VectorIcon family={MaterialIcons} name="compass" />}
+            />
+          </NativeTabs.Trigger>
+        </NativeTabs>
+      </ThemeProvider>
+    </TabConfigurationContext>
+  );
+}

with-native-tabs/app/explore.tsx

@@ -0,0 +1,170 @@
+import { TabConfigurationContext } from "@/utils/tabConfigurationContext";
+import { useTheme } from "@react-navigation/native";
+import {
+  Badge,
+  Icon,
+  Label,
+  NativeTabs,
+} from "expo-router/unstable-native-tabs";
+import { use, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Switch,
+  Platform,
+} from "react-native";
+import {
+  SafeAreaInsetsContext,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+
+export default function Index() {
+  const { colors } = useTheme();
+  const safeInsets = useSafeAreaInsets();
+  const [isBadgeEnabled, setIsBadgeEnabled] = useState(true);
+  const [isLabelVisible, setIsLabelVisible] = useState(true);
+  const [isScrollToTopEnabled, setIsScrollToTopEnabled] = useState(true);
+  const {
+    isMinimizeOnScrollEnabled,
+    setIsMinimizeOnScrollEnabled,
+    isIndicatorEnabled,
+    setIsIndicatorEnabled,
+    isTransparentOnScrollEdgeEnabled,
+    setIsTransparentOnScrollEdgeEnabled,
+  } = use(TabConfigurationContext);
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: colors.background }]}
+        contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={[
+          styles.contentContainer,
+          {
+            paddingTop: Platform.select({
+              android: safeInsets.top,
+              default: undefined,
+            }),
+          },
+        ]}
+      >
+        <SwitchWithLabel
+          label="Badge"
+          value={isBadgeEnabled}
+          onValueChange={setIsBadgeEnabled}
+        />
+        <SwitchWithLabel
+          label="Label"
+          value={isLabelVisible}
+          onValueChange={setIsLabelVisible}
+        />
+        <SwitchWithLabel
+          label="Minimize on scroll (iOS)"
+          value={isMinimizeOnScrollEnabled}
+          onValueChange={setIsMinimizeOnScrollEnabled}
+        />
+        <SwitchWithLabel
+          label="Scroll to top (iOS)"
+          value={isScrollToTopEnabled}
+          onValueChange={setIsScrollToTopEnabled}
+        />
+        <SwitchWithLabel
+          label="Transparent on scroll edge (iOS 18)"
+          value={isTransparentOnScrollEdgeEnabled}
+          onValueChange={setIsTransparentOnScrollEdgeEnabled}
+        />
+        <SwitchWithLabel
+          label="Active indicator (Android)"
+          value={isIndicatorEnabled}
+          onValueChange={setIsIndicatorEnabled}
+        />
+        <View style={styles.largeContent}>
+          <Text style={[styles.largeText, { color: colors.text }]}>Scroll</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>down</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>\/</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>This</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>
+            content
+          </Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>is</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>here</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>to</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>test</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>
+            scrolling
+          </Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>It</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>needs</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>to</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>be</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>long,</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>to</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>enable</Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>
+            minimize
+          </Text>
+          <Text style={[styles.largeText, { color: colors.text }]}>
+            behavior
+          </Text>
+        </View>
+      </ScrollView>
+      <NativeTabs.Trigger disableScrollToTop={!isScrollToTopEnabled}>
+        <Badge hidden={!isBadgeEnabled}>3</Badge>
+        <Label hidden={!isLabelVisible}>Explore</Label>
+      </NativeTabs.Trigger>
+    </>
+  );
+}
+
+const SwitchWithLabel = ({
+  label,
+  value,
+  onValueChange,
+}: {
+  label: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+}) => {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <Text style={{ color: colors.text, fontSize: 16 }}>{label}</Text>
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        trackColor={{
+          false: colors.border,
+          true: colors.primary,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    gap: 16,
+  },
+  largeContent: {
+    marginTop: 96,
+    gap: 48,
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 20,
+  },
+  largeText: {
+    fontSize: 48,
+  },
+});

with-native-tabs/app/index.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from "@react-navigation/native";
+import { View, Text, StyleSheet, PlatformColor } from "react-native";
+
+export default function Index() {
+  const { colors } = useTheme();
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Text style={[styles.text, { color: colors.text }]}>Home tab</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 20,
+  },
+});

with-native-tabs/app/search/[name].tsx

@@ -0,0 +1,31 @@
+import { useTheme } from "@react-navigation/native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function Page() {
+  const { colors } = useTheme();
+  const { name } = useLocalSearchParams<{ name: string }>();
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: name,
+        }}
+      />
+      <View style={styles.container}>
+        <Text style={[styles.label, { color: colors.text }]}>{name}</Text>
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 24,
+  },
+});

with-native-tabs/app/search/_layout.tsx

@@ -0,0 +1,17 @@
+import { isLiquidGlassAvailable } from "expo-glass-effect";
+import { Stack } from "expo-router";
+
+export default function SearchLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerTransparent: isLiquidGlassAvailable(),
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{ title: "Search", headerLargeTitle: true }}
+      />
+    </Stack>
+  );
+}