Full-stack-skills 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