react-native

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Native Development

Build native iOS and Android apps with React Native and Expo.

## Framework Options

| Framework                | Use When                                        |
| ------------------------ | ----------------------------------------------- |
| **Expo** (Recommended)   | Most apps, faster development, managed workflow |
| **React Native CLI**     | Need custom native modules, brownfield apps     |
| **Expo with Dev Client** | Best of both - Expo DX with native modules      |

---

## Project Setup

### Expo (Recommended)

```bash
npx create-expo-app@latest my-app
cd my-app
npx expo start
```

### React Native CLI

```bash
npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-ios  # or run-android
```

---

## Core Components

### Basic Structure

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.title}>Hello World</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  content: {
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
  },
});
```

### Common Components

```tsx
import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  Pressable,
  FlatList,
  ActivityIndicator,
  Modal,
  Switch,
} from 'react-native';

// Touchable with feedback
<Pressable
  onPress={handlePress}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
>
  <Text>Press Me</Text>
</Pressable>

// Text Input
<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Enter text"
  style={styles.input}
  autoCapitalize="none"
  keyboardType="email-address"
  returnKeyType="done"
  onSubmitEditing={handleSubmit}
/>

// Image
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 100, height: 100 }}
  resizeMode="cover"
/>
```

---

## Navigation

### React Navigation Setup

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude