fix(expo-template): render tab bar icons on Android

.changeset/expo-template-android-tab-icons.md

@@ -0,0 +1,5 @@
+---
+'@bottom-tabs/expo-template': patch
+---
+
+Render tab bar icons on Android, and apply the template's own colors to the tab bar

docs/docs/docs/guides/usage-with-expo-router.mdx

@@ -6,7 +6,7 @@ First install `@bottom-tabs/react-navigation` which provides a native bottom tab
 
 <PackageManagerTabs command="install @bottom-tabs/react-navigation" />
 
-Next, create a custom layout adapter for the native bottom tabs using `withLayoutContext` from Expo Router:
+Next, create a custom layout adapter for the native bottom tabs using `withLayoutContext` from Expo Router. Put it in `components/bottom-tabs.tsx` and export the navigator, so your layouts can import it:
 
 ```tsx
 import { withLayoutContext } from 'expo-router';
@@ -19,7 +19,7 @@ import { ParamListBase, TabNavigationState } from '@react-navigation/native';
 
 const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
 
-const Tabs = withLayoutContext<
+export const Tabs = withLayoutContext<
   NativeBottomTabNavigationOptions,
   typeof BottomTabNavigator,
   TabNavigationState<ParamListBase>,
@@ -32,6 +32,8 @@ const Tabs = withLayoutContext<
 Then, use the `Tabs` navigator in your app:
 
 ```tsx
+import { Platform } from "react-native";
+
 import { Tabs } from "@/components/bottom-tabs";
 
 export default function TabLayout() {
@@ -41,22 +43,30 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Home",
-          tabBarIcon: () => ({ sfSymbol: "house" }),
+          tabBarIcon: () =>
+            Platform.OS === "ios"
+              ? { sfSymbol: "house" }
+              : require("@/assets/icons/house.png"),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
           title: "Explore",
-          tabBarIcon: () => ({ sfSymbol: "person" }),
+          tabBarIcon: () =>
+            Platform.OS === "ios"
+              ? { sfSymbol: "person" }
+              : require("@/assets/icons/person.png"),
         }}
       />
     </Tabs>
   );
 }
 ```
 
-For props and more information, see the [React Navigation integration guide](/docs/guides/usage-with-react-navigation).
+> [!NOTE] SF Symbols are only available on Apple platforms. On Android and web, pass an image with `require()` or a `{ uri }` object instead.
+
+For props and more information, see the [React Navigation integration guide](/docs/guides/usage-with-react-navigation), which documents every accepted `tabBarIcon` source.
 
 Example: [okwasniewski/ExpoNativeTabs](https://github.com/okwasniewski/ExpoNativeTabs)
 

packages/expo-template/app/(tabs)/_layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Platform } from 'react-native';
 import { withLayoutContext } from 'expo-router';
 import {
   createNativeBottomTabNavigator,
@@ -7,6 +7,9 @@ import {
 } from '@bottom-tabs/react-navigation';
 import { ParamListBase, TabNavigationState } from '@react-navigation/native';
 
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
 const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
 
 const Tabs = withLayoutContext<
@@ -17,20 +20,32 @@ const Tabs = withLayoutContext<
 >(BottomTabNavigator);
 
 export default function TabLayout() {
+  const colorScheme = useColorScheme() ?? 'light';
+  const colorTheme = Colors[colorScheme];
+
   return (
-    <Tabs>
+    <Tabs
+      tabBarActiveTintColor={colorTheme.tabIconSelected}
+      tabBarInactiveTintColor={colorTheme.tabIconDefault}
+    >
       <Tabs.Screen
         name="index"
         options={{
           title: 'Home',
-          tabBarIcon: () => ({ sfSymbol: 'house.fill' }),
+          tabBarIcon: () =>
+            Platform.OS === 'ios'
+              ? { sfSymbol: 'house.fill' }
+              : require('@/assets/icons/house.png'),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
           title: 'Explore',
-          tabBarIcon: () => ({ sfSymbol: 'paperplane.fill' }),
+          tabBarIcon: () =>
+            Platform.OS === 'ios'
+              ? { sfSymbol: 'paperplane.fill' }
+              : require('@/assets/icons/send.png'),
         }}
       />
     </Tabs>