react-native

When to use this skill

Use this skill whenever the user wants to:

• Build cross-platform mobile applications with React Native
• Create and style React Native components (View, Text, FlatList, ScrollView)
• Implement navigation with React Navigation
• Use platform-specific code for Android and iOS
• Integrate native modules and bridge native APIs
• Configure Metro bundler, debug tools, and build settings
• Optimize list performance and memory usage

How to use this skill

Workflow

1. Identify the request area (component creation, navigation, native modules, styling, etc.)
2. Apply React Native conventions for layout, styling, and platform handling
3. Generate TypeScript/JSX code using React Native core components
4. Verify the solution works on both Android and iOS

1. Core Component Example

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

interface User {
  id: string;
  name: string;
}

export function UserList({ users }: { users: User[] }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.name}>{item.name}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  name: { fontSize: 16, fontWeight: '600' },
});

2. Navigation Setup

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. Platform-Specific Code

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 } },
      android: { elevation: 4 },
    }),
  },
});

Best Practices

• Use FlatList (not ScrollView) for long lists; provide keyExtractor and getItemLayout for performance
• Avoid heavy computation on the main JavaScript thread; offload to native modules if needed
• Match native dependency versions with the React Native version to prevent build failures
• Test on both platforms early and often; use Platform.select for platform-specific styles
• Use StyleSheet.create for optimized style objects

Resources

• Official documentation: https://reactnative.dev/docs/getting-started
• React Navigation: https://reactnavigation.org/
• Expo: https://docs.expo.dev/

Keywords

react native, React Native, cross-platform, mobile, FlatList, React Navigation, Metro, native modules, iOS, Android, StyleSheet