NativeWind RN Template

A clean and minimal React Native template with NativeWind (Tailwind CSS for React Native) pre-configured, designed to kickstart your React Native CLI projects with easy styling and modern best practices.

Features

• React Native CLI starter template
• Preconfigured with NativeWind for Tailwind CSS styling
• Ready to use with TypeScript support
• Integrated Sentry for error tracking and monitoring
• Setup with Detox for end-to-end (E2E) testing
• Included Storybook for isolated UI component development
• Example screen with Tailwind styling
• Minimal dependencies and setup

Getting Started

Prerequisites

• Node.js (>=18 recommended)
• React Native CLI environment set up (Android Studio / Xcode, device or emulator)
• Yarn or npm package manager

Installation

Clone this repo:

git clone https://github.com/hsib19/nativewind-rn-template.git
cd nativewind-rn-template

Install dependencies:

yarn install
# or
npm install

Running the App

• For iOS (Mac only):

yarn ios
# or
npm run ios

• For Android:

yarn android
# or
npm run android

Running Storybook

Start the Metro bundler for Storybook:

yarn start:storybook
# or
npm run start:storybook

Launch the app in Storybook mode:

• iOS (Mac only):

yarn storybook:ios
# or
npm run storybook:ios

• Android:

yarn storybook:android
# or
npm run storybook:android

To clean and regenerate Storybook loader:

yarn storybook-clean
# or
npm run storybook-clean

Running Tests with Jest

Run all tests:

yarn test
# or
npm test

Run tests with coverage report:

yarn test:coverage
# or
npm run test:coverage

Run tests in watch mode:

yarn test --watch
# or
npm test -- --watch

Using Sentry

Sentry is pre-configured for error tracking.
Replace the DSN in your Sentry config file or initialization code with your own DSN to start monitoring errors.

Running Detox Tests (E2E)

Make sure your emulator or device is running.

• Android:

detox test -c android.emu.debug

• iOS (Mac only):

detox test -c ios.sim.debug

See Detox docs for more details:
https://wix.github.io/Detox/docs/introduction/getting-started

Usage

Start building your app inside the src folder. Use NativeWind’s Tailwind classes to style React Native components quickly and intuitively.

Example:

import { View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View className="flex-1 justify-center items-center bg-white">
      <Text className="text-xl font-bold text-blue-600">Hello, NativeWind!</Text>
    </View>
  );
}

Learn More

• React Native Docs
• NativeWind Docs
• Tailwind CSS Docs
• Sentry React Native
• Detox E2E Testing
• Storybook for React Native
• Jest Testing