React Native Mobile Development

Platform-Specific Code

import { Platform } from 'react-native';

// Conditional rendering
{Platform.OS === 'ios' && <IOSComponent />}
{Platform.OS === 'android' && <AndroidComponent />}

// Platform-specific values
const height = Platform.select({
  ios: 44,
  android: 56,
  default: 50,
});

// Platform-specific styles
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.3 },
      android: { elevation: 4 },
    }),
  },
});

Best Practices

1. Performance: Use StyleSheet.create(), avoid inline styles, optimize images
2. Accessibility: Add accessibilityLabel and accessibilityRole
3. Responsive: Test on different screen sizes
4. Navigation: Use React Navigation or Expo Router
5. State: Keep component state minimal, use context/store for shared state

Common Patterns

Lists

import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

Forms

import { TextInput } from 'react-native';
const [value, setValue] = useState('');

<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="Enter text"
  style={styles.input}
/>

Loading States

import { ActivityIndicator } from 'react-native';

{loading ? <ActivityIndicator /> : <Content />}

Troubleshooting

• Metro won't start: Clear cache with npx expo start --clear
• Native module error: Run npx expo prebuild --clean
• Build fails: Check app.json configuration
• Simulator issues: Reset simulator or emulator

Resources

• React Native Docs
• Expo Docs