react-native-basics

• JavaScript/TypeScript fundamentals
• React basics (components, props, state, hooks)
• Node.js and npm/yarn installed
• Xcode (iOS) or Android Studio (Android)

After completing this skill, you will be able to:

• [ ] Create and compose React Native components
• [ ] Apply styles using StyleSheet API
• [ ] Build responsive layouts with Flexbox
• [ ] Use platform-specific code (iOS/Android)
• [ ] Set up and use Expo for development

---

1. Core Components

```

View - Container component (like div)

Text - Text display (required for strings)

Image - Image rendering

ScrollView - Scrollable container

FlatList - Optimized list rendering

TextInput - User input

Pressable - Touch handling

```

2. Styling System

```typescript

// StyleSheet.create for performance

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

padding: 16,

},

title: {

fontSize: 24,

fontWeight: 'bold',

color: '#1a1a1a',

},

});

```

3. Flexbox Layout

```typescript

// Common patterns

flexDirection: 'row' | 'column' // Main axis

justifyContent: 'center' | 'space-between' // Main axis alignment

alignItems: 'center' | 'stretch' // Cross axis alignment

flex: 1 // Grow to fill

```

4. Platform-Specific Code

```typescript

import { Platform } from 'react-native';

// Method 1: Platform.select

const styles = StyleSheet.create({

shadow: Platform.select({

ios: { shadowColor: '#000', shadowOpacity: 0.1 },

android: { elevation: 4 },

}),

});

// Method 2: Platform.OS

if (Platform.OS === 'ios') {

// iOS specific code

}

```

5. Expo Setup

```bash

# Create new project

npx create-expo-app MyApp

cd MyApp

# Start development

npx expo start

# Build for production

eas build --platform all

```

---

```tsx

import React from 'react';

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

interface Item {

id: string;

title: string;

}

export default function App() {

const [items, setItems] = React.useState([

{ id: '1', title: 'Learn React Native' },

{ id: '2', title: 'Build first app' },

]);

return (

My Tasks

data={items}

keyExtractor={(item) => item.id}

renderItem={({ item }) => (

{item.title}

)}

/>

);

}

const styles = StyleSheet.create({

container: { flex: 1, padding: 16, backgroundColor: '#f5f5f5' },

title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },

item: { backgroundColor: '#fff', padding: 16, marginBottom: 8, borderRadius: 8 },

});

```

---

| Error | Cause | Solution |

|-------|-------|----------|

| "Text strings must be wrapped" | Raw text outside | Wrap all text in |

| Styles not applying | Plain object vs StyleSheet | Use StyleSheet.create() |

| FlatList not scrolling | No height/flex | Add flex: 1 to parent |

| Image not showing | Invalid source | Check URI or require path |

---

• [ ] Components render without errors
• [ ] Styles apply correctly on both platforms
• [ ] FlatList handles large lists efficiently
• [ ] Platform-specific code works correctly
• [ ] Expo build succeeds

---

• [React Native Docs](https://reactnative.dev/docs/getting-started)
• [Expo Docs](https://docs.expo.dev/)

---

```

Skill("react-native-basics")

```

Bonded Agent: 01-react-native-fundamentals