How do I install the React Native Mobile skill?

Run npx skillmds@latest add majiayu000/react-native-mobile in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the React Native Mobile skill do?

React Native mobile development covering iOS and Android cross-platform apps, navigation, state management, native modules, and performance optimization for production-ready mobile applications It is listed under Web & Frontend on SkillMD.

Is React Native Mobile safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Native Mobile?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Native Mobile free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Native Mobile?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Native Mobile by majiayu000 — Agent Skill

Name: React Native Mobile
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

React Native Mobile Development

Level 1: Quick Reference (~~700-900 tokens) Level 2: Implementation Guide (~~4000-5000 tokens) Level 3: Deep Dive Resources (external links)

Level 1: Quick Reference

Core Components

import { View, Text, ScrollView, FlatList, Image, TouchableOpacity } from 'react-native';

// Basic Layout
<View style={styles.container}>
  <Text style={styles.title}>Hello World</Text>
  <Image source={require('./logo.png')} style={styles.image} />
  <TouchableOpacity
    <Text>Press Me</Text>
  </TouchableOpacity>
</View>

// List Rendering (Performance Optimized)
<FlatList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={item => item.id}
 
 
/>

// Scrollable Content
<ScrollView contentContainerStyle={styles.scrollContent}>
  {/* Long content */}
</ScrollView>

Navigation (React Navigation v6)

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

const Stack = createNativeStackNavigator();

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

// Navigate Between Screens
navigation.navigate('Details', { itemId: 42 });
navigation.goBack();

Styling

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    color: '#333',
    fontWeight: 'bold',
  },
});

Platform-Specific Code

import { Platform } from 'react-native';

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

// Platform-specific files
// Button.ios.tsx
// Button.android.tsx

Essential Checklist

Use FlatList for long lists (virtualized rendering)
Implement React.memo() for expensive components
Handle safe area insets (notches, status bars)
Test on both iOS and Android devices
Optimize images (use proper dimensions, formats)
Handle keyboard avoiding behavior
Implement proper navigation typing
Use useCallback and useMemo appropriately
Handle network errors and offline states
Add accessibility labels for screen readers

Level 2:

📚 Full Examples: See REFERENCE.md for complete code samples, detailed configurations, and production-ready implementations.

Implementation Guide