···1-// Fallback for using MaterialIcons on Android and web.
2-3-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
4-import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
5-import { ComponentProps } from 'react';
6-import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
7-8-type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
9-type IconSymbolName = keyof typeof MAPPING;
10-11-/**
12- * Add your SF Symbols to Material Icons mappings here.
13- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
14- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
15- */
16-const MAPPING = {
17- 'house.fill': 'home',
18- 'paperplane.fill': 'send',
19- 'chevron.left.forwardslash.chevron.right': 'code',
20- 'chevron.right': 'chevron-right',
21-} as IconMapping;
22-23-/**
24- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
25- * This ensures a consistent look across platforms, and optimal resource usage.
26- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
27- */
28-export function IconSymbol({
29- name,
30- size = 24,
31- color,
32- style,
33-}: {
34- name: IconSymbolName;
35- size?: number;
36- color: string | OpaqueColorValue;
37- style?: StyleProp<TextStyle>;
38- weight?: SymbolWeight;
39-}) {
40- return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
41-}
···00000000000000000000000000000000000000000
-53
constants/theme.ts
···1-/**
2- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
3- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
4- */
5-6-import { Platform } from 'react-native';
7-8-const tintColorLight = '#0a7ea4';
9-const tintColorDark = '#fff';
10-11-export const Colors = {
12- light: {
13- text: '#11181C',
14- background: '#fff',
15- tint: tintColorLight,
16- icon: '#687076',
17- tabIconDefault: '#687076',
18- tabIconSelected: tintColorLight,
19- },
20- dark: {
21- text: '#ECEDEE',
22- background: '#151718',
23- tint: tintColorDark,
24- icon: '#9BA1A6',
25- tabIconDefault: '#9BA1A6',
26- tabIconSelected: tintColorDark,
27- },
28-};
29-30-export const Fonts = Platform.select({
31- ios: {
32- /** iOS `UIFontDescriptorSystemDesignDefault` */
33- sans: 'system-ui',
34- /** iOS `UIFontDescriptorSystemDesignSerif` */
35- serif: 'ui-serif',
36- /** iOS `UIFontDescriptorSystemDesignRounded` */
37- rounded: 'ui-rounded',
38- /** iOS `UIFontDescriptorSystemDesignMonospaced` */
39- mono: 'ui-monospace',
40- },
41- default: {
42- sans: 'normal',
43- serif: 'serif',
44- rounded: 'normal',
45- mono: 'monospace',
46- },
47- web: {
48- sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
49- serif: "Georgia, 'Times New Roman', serif",
50- rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
51- mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
52- },
53-});
···1-export { useColorScheme } from 'react-native';
···0
-21
hooks/use-color-scheme.web.ts
···1-import { useEffect, useState } from 'react';
2-import { useColorScheme as useRNColorScheme } from 'react-native';
3-4-/**
5- * To support static rendering, this value needs to be re-calculated on the client side for web
6- */
7-export function useColorScheme() {
8- const [hasHydrated, setHasHydrated] = useState(false);
9-10- useEffect(() => {
11- setHasHydrated(true);
12- }, []);
13-14- const colorScheme = useRNColorScheme();
15-16- if (hasHydrated) {
17- return colorScheme;
18- }
19-20- return 'light';
21-}
···000000000000000000000
-21
hooks/use-theme-color.ts
···1-/**
2- * Learn more about light and dark modes:
3- * https://docs.expo.dev/guides/color-schemes/
4- */
5-6-import { Colors } from '@/constants/theme';
7-import { useColorScheme } from '@/hooks/use-color-scheme';
8-9-export function useThemeColor(
10- props: { light?: string; dark?: string },
11- colorName: keyof typeof Colors.light & keyof typeof Colors.dark
12-) {
13- const theme = useColorScheme() ?? 'light';
14- const colorFromProps = props[theme];
15-16- if (colorFromProps) {
17- return colorFromProps;
18- } else {
19- return Colors[theme][colorName];
20- }
21-}