diff --git a/samples/expo/app/(tabs)/_layout.tsx b/samples/expo/app/(tabs)/_layout.tsx index dc831a1959..3bc8bc3749 100644 --- a/samples/expo/app/(tabs)/_layout.tsx +++ b/samples/expo/app/(tabs)/_layout.tsx @@ -1,32 +1,33 @@ -import FontAwesome from '@expo/vector-icons/FontAwesome'; import { Link, Tabs } from 'expo-router'; import React from 'react'; -import { Pressable } from 'react-native'; +import { type ColorValue, Pressable, Text } from 'react-native'; import { useClientOnlyValue } from '@/components/useClientOnlyValue'; import { useColorScheme } from '@/components/useColorScheme'; import Colors from '@/constants/Colors'; -// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ -function TabBarIcon(props: { name: React.ComponentProps['name']; color: string }) { - return ; +function TabBarIcon({ label, color }: { label: string; color: ColorValue }) { + return {label}; } -function CodeIcon({ color }: { color: string }) { - return ; +function CodeIcon({ color }: { color: ColorValue }) { + return ; } -function InfoButton({ colorScheme }: { colorScheme: 'light' | 'dark' | null }) { +function InfoButton({ colorScheme }: { colorScheme: string }) { return ( {({ pressed }) => ( - + + ⓘ + )} @@ -36,12 +37,13 @@ function InfoButton({ colorScheme }: { colorScheme: 'light' | 'dark' | null }) { export default function TabLayout() { const colorScheme = useColorScheme(); - const renderInfoButton = React.useCallback(() => , [colorScheme]); + const theme = colorScheme === 'dark' ? 'dark' : 'light'; + const renderInfoButton = React.useCallback(() => , [theme]); return ( @@ -32,7 +33,7 @@ export default function TabOneScreen() {