4. App theme

Optional light and dark theme tokens for the Expo app.

In this step, you'll update the theme for the app to ensure a consistent look and feel across all screens. This is optional, and you can customize the theme based on your brand identity instead.

In your React Native project, you should have the following directories:

constants: This directory will contain constant values used throughout the app. It should already have a theme.ts file.
hooks: This directory will contain custom React hooks. It should already have hooks for color schemes: use-color-scheme.ts, use-color-scheme.web.ts, and use-theme-color.ts.

To update the app's theme, replace the content of the constants/theme.ts file with the following:

tsCopy

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
6import { Platform } from "react-native"
7
8const tintColorLight = "#000"
9const tintColorDark = "#fff"
10
11export const Colors = {
12  light: {
13    text: "#11181C",
14    background: "#fff",
15    tint: tintColorLight,
16    icon: "#687076",
17    tabIconDefault: "#687076",
18    tabIconSelected: tintColorLight,
19    border: "#e0e0e0",
20    cardBackground: "#f9f9f9",
21    error: "#ff3b30",
22    warning: "#ff9500",
23    success: "#4CAF50",
24    imagePlaceholder: "#f0f0f0",
25  },
26  dark: {
27    text: "#ECEDEE",
28    background: "#151718",
29    tint: tintColorDark,
30    icon: "#9BA1A6",
31    tabIconDefault: "#9BA1A6",
32    tabIconSelected: tintColorDark,
33    border: "#333",
34    cardBackground: "#1a1a1a",
35    error: "#ff3b30",
36    warning: "#ff9500",
37    success: "#4CAF50",
38    imagePlaceholder: "#2a2a2a",
39  },
40}
41
42export const Fonts = Platform.select({
43  ios: {
44    /** iOS `UIFontDescriptorSystemDesignDefault` */
45    sans: "system-ui",
46    /** iOS `UIFontDescriptorSystemDesignSerif` */
47    serif: "ui-serif",
48    /** iOS `UIFontDescriptorSystemDesignRounded` */
49    rounded: "ui-rounded",
50    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
51    mono: "ui-monospace",
52  },
53  default: {
54    sans: "normal",
55    serif: "serif",
56    rounded: "normal",
57    mono: "monospace",
58  },
59  web: {
60    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
61    serif: "Georgia, 'Times New Roman', serif",
62    rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
63    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
64  },
65})

Next: 5. Initialize JS SDK