# reactnativedemo

**Repository Path**: damoncheny/reactnativedemo

## Basic Information

- **Project Name**: reactnativedemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-19
- **Last Updated**: 2025-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Native Multi-Platform App

A modern React Native application built with **TypeScript**, **Tailwind CSS** (via NativeWind), and **Expo** with support for **Web**, **iOS**, and **Android** platforms.

## Features

✅ **TypeScript** - Full type safety and developer experience  
✅ **Tailwind CSS** - Utility-first styling with NativeWind  
✅ **Cross-Platform** - Web, iOS, and Android from a single codebase  
✅ **Expo** - Simplified development and deployment  
✅ **React Navigation** - Built-in navigation support

## Project Structure

```
MyApp/
├── app/                  # Main app files
├── assets/              # Images, fonts, and static assets
├── App.tsx              # Root component
├── global.css           # Global Tailwind CSS
├── tailwind.config.js   # Tailwind configuration
├── postcss.config.js    # PostCSS configuration
├── tsconfig.json        # TypeScript configuration
├── app.json             # Expo configuration
└── package.json         # Dependencies
```

## Getting Started

### Prerequisites

- Node.js >= 18
- npm or yarn
- Expo CLI (installed via npm)

### Installation

```bash
# Dependencies are already installed
npm install

# Or if you need to reinstall
npm install --legacy-peer-deps
```

## Running the App

### Web

```bash
npm run web
```

### iOS

```bash
npm run ios
# Requires macOS with Xcode installed
```

### Android

```bash
npm run android
# Requires Android Studio and emulator setup
```

### Development Mode

```bash
npm start
# Then press 'w' for web, 'i' for iOS, 'a' for Android
```

## Building for Production

### iOS Build

```bash
npm run build:ios
```

### Android Build

```bash
npm run build:android
```

### Web Export

```bash
npm run build:web
```

## Available Scripts

- `npm start` - Start the Expo development server
- `npm run web` - Run on web browser
- `npm run ios` - Run on iOS simulator
- `npm run android` - Run on Android emulator
- `npm run lint` - Type checking with TypeScript
- `npm run type-check` - TypeScript type checking
- `npm run build:ios` - Build for iOS
- `npm run build:android` - Build for Android
- `npm run build:web` - Build for web

## Styling with Tailwind CSS

This project uses **NativeWind**, which brings Tailwind CSS utility classes to React Native.

### Example Component

```tsx
import { View, Text } from "react-native";

export default function MyComponent() {
  return (
    <View className="flex-1 items-center justify-center bg-blue-50 p-4">
      <Text className="text-2xl font-bold text-blue-600 mb-2">Hello World</Text>
      <Text className="text-gray-600 text-center">
        Styled with Tailwind CSS
      </Text>
    </View>
  );
}
```

## TypeScript Configuration

The project uses strict TypeScript mode for better type safety. Configuration is in `tsconfig.json`.

## Environment Setup

### macOS/Linux

No additional setup needed beyond Node.js installation.

### Windows

For Android development, ensure you have Android SDK and emulator properly configured.

## Troubleshooting

### Dependency Issues

If you encounter dependency resolution errors:

```bash
npm install --legacy-peer-deps
```

### Port Already in Use

If port 19000 is in use:

```bash
npx expo start --port 19001
```

### Clear Cache

```bash
npm install
rm -rf node_modules/.cache
```

## Resources

- [Expo Documentation](https://docs.expo.dev/)
- [React Native Documentation](https://reactnative.dev/)
- [NativeWind Documentation](https://www.nativewind.dev/)
- [Tailwind CSS Documentation](https://tailwindcss.com/)
- [TypeScript Documentation](https://www.typescriptlang.org/)

## License

ISC