Initial Setup
Starter base
A starting point to help you set up your project quickly and use the common components provided by react-native-reusables. The idea is to make it easier for you to get started.
Installation
- Clone the
react-native-reusablesrepository
git clone https://github.com/mrzachnugent/react-native-reusables.git- Use the following bash command and rename
my-projectto the name of your new project.
This will copy the folder
react-native-reusables/apps/starter-base, paste it as a sibling, and rename it to your new project name.
cp -R react-native-reusables/packages/templates/starter-base/ ./my-project- Change Directory to your project (replace
my-projectwith your project’s name), install the dependencies, and fix packages if needed.
cd my-project && npm install && npx expo install --fix- Run the project
npm run ios npm run android npm run web- Change Directory to your project (replace
my-projectwith your project’s name), install the dependencies, and fix packages if needed.
cd my-project && yarn install && npx expo install --fix- Run the project
yarn ios yarn android yarn web- Change Directory to your project (replace
my-projectwith your project’s name), install the dependencies, and fix packages if needed.
cd my-project && pnpm install && npx expo install --fix- Run the project
pnpm ios pnpm android pnpm webInstall NativeWind
Follow the installation guide for NativeWind from the official documentation
Dependencies and utilities
- Install the following packages:
Platforms: Web, iOS, and Android
npx expo install tailwindcss-animate @react-native-async-storage/async-storage class-variance-authority clsx tailwind-mergePlatforms: iOS and Android
npx expo install @react-native-async-storage/async-storage class-variance-authority clsx tailwind-merge- Configure path aliases
We use the ~ alias. This is how you can configure it in your tsconfig.json file:
{ "compilerOptions": { "baseUrl": ".", "paths": { "~/*": ["*"] } }}- Add a cn helper
Add the following code to the ~/lib/utils.ts file:
import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));}- Add the useColorScheme hook
Add the following code to the ~/lib/useColorScheme.tsx file:
import { useColorScheme as useNativewindColorScheme } from 'nativewind';
export function useColorScheme() { const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme(); return { colorScheme: colorScheme ?? 'dark', isDarkColorScheme: colorScheme === 'dark', setColorScheme, toggleColorScheme, };}Add CSS variables
- Add the following css variables to
~/global.cssfile.
@tailwind base;@tailwind components;@tailwind utilities;
@layer base {:root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%;}
.dark:root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%;}}- Add the following code in the
~/lib/constants.tsfile for the navigation theme colors:
export const NAV_THEME = {light: { background: 'hsl(0 0% 100%)', // background border: 'hsl(240 5.9% 90%)', // border card: 'hsl(0 0% 100%)', // card notification: 'hsl(0 84.2% 60.2%)', // destructive primary: 'hsl(240 5.9% 10%)', // primary text: 'hsl(240 10% 3.9%)', // foreground},dark: { background: 'hsl(240 10% 3.9%)', // background border: 'hsl(240 3.7% 15.9%)', // border card: 'hsl(240 10% 3.9%)', // card notification: 'hsl(0 72% 51%)', // destructive primary: 'hsl(0 0% 98%)', // primary text: 'hsl(0 0% 98%)', // foreground},};If you changed the colors in the ~/global.css file, update the ~/lib/constants.ts file with the new colors.
Each color has a commented css variable name next to it.
Configure colors
- Use the CSS variables in your tailwind.config.js file.
Platforms: Web, iOS, and Android
const { hairlineWidth } = require('nativewind/theme');
/** @type {import('tailwindcss').Config} */module.exports = { darkMode: 'class', content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], presets: [require('nativewind/preset')], theme: { extend: { colors: { border: 'hsl(var(--border))', input: 'hsl(var(--input))', ring: 'hsl(var(--ring))', background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))', }, accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))', }, popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))', }, card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))', }, }, borderWidth: { hairline: hairlineWidth(), }, keyframes: { 'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' }, }, 'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' }, }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', }, }, }, plugins: [require('tailwindcss-animate')],};Platforms: iOS and Android
const { hairlineWidth } = require('nativewind/theme');
/** @type {import('tailwindcss').Config} */module.exports = { darkMode: 'class', content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], presets: [require('nativewind/preset')], theme: { extend: { colors: { border: 'hsl(var(--border))', input: 'hsl(var(--input))', ring: 'hsl(var(--ring))', background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))', }, accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))', }, popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))', }, card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))', }, }, borderWidth: { hairline: hairlineWidth(), }, }, }, plugins: [],};- Configure React Navigation Theme
In your root component (ex: the root _layout.tsx if you’re using expo-router), add the following code
to load the selected theme, prevent the flash of the default theme,
and store the selected theme in the async storage.
import '~/global.css';
import AsyncStorage from '@react-native-async-storage/async-storage';import { Theme, ThemeProvider } from '@react-navigation/native';import { SplashScreen, Stack } from 'expo-router';import { StatusBar } from 'expo-status-bar';import * as React from 'react';import { Platform } from 'react-native';import { NAV_THEME } from '~/lib/constants';import { useColorScheme } from '~/lib/useColorScheme';
const LIGHT_THEME: Theme = {dark: false,colors: NAV_THEME.light,};const DARK_THEME: Theme = {dark: true,colors: NAV_THEME.dark,};
export {// Catch any errors thrown by the Layout component.ErrorBoundary,} from 'expo-router';
// Prevent the splash screen from auto-hiding before getting the color scheme.SplashScreen.preventAutoHideAsync();
export default function RootLayout() {const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
React.useEffect(() => { (async () => { const theme = await AsyncStorage.getItem('theme'); if (Platform.OS === 'web') { // Adds the background color to the html element to prevent white background on overscroll. document.documentElement.classList.add('bg-background'); } if (!theme) { AsyncStorage.setItem('theme', colorScheme); setIsColorSchemeLoaded(true); return; } const colorTheme = theme === 'dark' ? 'dark' : 'light'; if (colorTheme !== colorScheme) { setColorScheme(colorTheme);
setIsColorSchemeLoaded(true); return; } setIsColorSchemeLoaded(true); })().finally(() => { SplashScreen.hideAsync(); });}, []);
if (!isColorSchemeLoaded) { return null;}
return ( <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}> <StatusBar style={isDarkColorScheme ? 'light' : 'dark'} /> <Stack /> </ThemeProvider>);}Install and Set Up Icons
- Install the following packages:
npx expo install react-native-svg lucide-react-native- Resolve the className strings into icon styles
Add the iconWithClassName function in the ~/lib/icons/iconWithClassName.ts file.
import type { LucideIcon } from 'lucide-react-native';import { cssInterop } from 'nativewind';
export function iconWithClassName(icon: LucideIcon) { cssInterop(icon, { className: { target: 'style', nativeStyleToProp: { color: true, opacity: true, }, }, });}- Create the Icon files for switching between light and dark mode
Create ~/lib/icons/Sun.tsx
import { Sun } from 'lucide-react-native';import { iconWithClassName } from './iconWithClassName';iconWithClassName(Sun);export { Sun };Create ~/lib/icons/MoonStar.tsx
import { MoonStar } from 'lucide-react-native';import { iconWithClassName } from './iconWithClassName';iconWithClassName(MoonStar);export { MoonStar };