React Native Boilerplate 👋

This is a React Native boilerplate created with create-expo-app, using Expo and React Native, with Typescript, Yarn, Nativewind, Prettier, ESLint.

Get started

1. Install dependencies

   yarn install

2. Start the app

    npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

Development Tools

Nativewind

This project uses Nativewind for styling with Tailwind CSS.

Prettier

Prettier is configured for consistent code formatting.

ESLint

ESLint ensures code quality and catches potential issues.

Husky

Husky manages git hooks for pre-commit checks.

Expo Router

Expo Router handles navigation with file-based routing.

Resources

• Expo documentation
• React Native documentation
• NativeWind documentation
• TypeScript documentation

Features

🎨 UI Components

The boilerplate includes a set of pre-built, customizable UI components:

Typography

• Customizable text components with various variants (h1-h6, p1-p3)
• Multiple font weights (regular, medium, semiBold, bold)
• Built-in text styles using Urbanist font family
• Responsive text sizing for different platforms

Buttons

• Multiple variants (default, secondary, outline, destructive)
• Loading state support with customizable loading text
• Disabled state styling
• Platform-specific touch feedback
• NativeWind styling integration

Bottom Sheet

• Customizable snap points
• Gesture handling for pan and dismiss
• Backdrop with customizable opacity
• Dynamic sizing support
• Platform-specific animations

🛠 Technical Features

• SVG Support: Integrated SVG transformer for using SVG files as React components
• Type Safety: Full TypeScript support with strict type checking
• Styling: NativeWind (Tailwind CSS) integration for consistent styling
• Theming: Custom CSS variables for easy theme customization
• Animations: React Native Reanimated integration for smooth animations

Component Usage Examples

Typography

<Text variant="h1" weight="bold">Heading 1</Text>
<Text variant="p1" weight="regular">Regular paragraph text</Text>
<Text variant="p2" weight="medium" className="text-gray-500">Medium weight text</Text>

Button

<Button>
  <Text>Default Button</Text>
</Button>

<Button variant="secondary" loading loadingText="Processing...">
  <Text>Loading Button</Text>
</Button>

Bottom Sheet

const bottomSheetRef = useRef<BottomSheetModal>(null);

<CustomBottomSheet
  ref={bottomSheetRef}
  snapPoints={["30%", "50%", "75%"]}
  enablePanDownToClose
>
  <View className="p-4">
    <Text>Bottom Sheet Content</Text>
  </View>
</CustomBottomSheet>;

Project Structure

The project follows a well-organized structure:

src/
├── app/          # File-based routing pages
├── components/   # Reusable UI components
│   └── ui/       # Core UI components
├── lib/          # Utility functions and constants
└── assets/       # Images, fonts, and other static files