Quick Start

JavaScript
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => setCount(count + 1)}
      >
        <Text style={styles.buttonText}>Increment</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 24, marginBottom: 20 },
  button: { backgroundColor: '#007AFF', padding: 12, borderRadius: 8 },
  buttonText: { color: 'white', fontSize: 16 }
});

export default Counter;

Workflow

1. Set up component structure with React Native imports
2. Define state using useState hook for dynamic data
3. Create JSX layout using React Native components (View, Text, etc.)
4. Add event handlers for user interactions
5. Style components using StyleSheet.create()
6. Export component for use in other screens

Progress checklist for complex screens:

• Import required React Native components
• Set up state management (useState/useEffect)
• Create component hierarchy
• Implement event handlers
• Apply consistent styling
• Test on both iOS and Android

Examples

Example 1: Simple Form Input: Need a login form Output:

JavaScript
const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.form}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
};

Example 2: List with Navigation Input: Display list of items Output:

JavaScript
const ItemList = ({ navigation }) => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <FlatList
      data={items}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (
        <TouchableOpacity 
          style={styles.listItem}
          onPress={() => navigation.navigate('Details', { item })}
        >
          <Text>{item}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

Best Practices

• Use functional components with hooks instead of class components
• Leverage StyleSheet.create() for performance optimization
• Use proper React Native components (TouchableOpacity instead of button HTML)
• Handle keyboard avoiding with KeyboardAvoidingView
• Use FlatList for long lists instead of ScrollView
• Implement proper error boundaries for production apps
• Use TypeScript for better development experience
• Follow React Native's platform-specific styling patterns

Common Pitfalls

• Using web-specific HTML elements (div, span) instead of React Native components
• Forgetting to handle different screen sizes and orientations
• Not optimizing FlatList with proper keyExtractor and getItemLayout
• Using inline styles instead of StyleSheet for performance
• Ignoring platform differences between iOS and Android
• Not handling loading and error states properly
• Forgetting to add proper accessibility props