react-native
Provides comprehensive guidance for React Native development including components, navigation, native modules, platform-specific code, and mobile app development. Use when the user asks about React Native, needs to create mobile applications, implement React Native components, or work with React Native features.
Best use case
react-native is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Provides comprehensive guidance for React Native development including components, navigation, native modules, platform-specific code, and mobile app development. Use when the user asks about React Native, needs to create mobile applications, implement React Native components, or work with React Native features.
Provides comprehensive guidance for React Native development including components, navigation, native modules, platform-specific code, and mobile app development. Use when the user asks about React Native, needs to create mobile applications, implement React Native components, or work with React Native features.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "react-native" skill to help with this workflow task. Context: Provides comprehensive guidance for React Native development including components, navigation, native modules, platform-specific code, and mobile app development. Use when the user asks about React Native, needs to create mobile applications, implement React Native components, or work with React Native features.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-native/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-native Compares
| Feature / Agent | react-native | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Provides comprehensive guidance for React Native development including components, navigation, native modules, platform-specific code, and mobile app development. Use when the user asks about React Native, needs to create mobile applications, implement React Native components, or work with React Native features.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
## 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
```tsx
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
```tsx
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
```tsx
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, StyleSheetRelated Skills
uniapp-native-plugin
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
uniapp-native-app
Packages uni-app projects as native Android APK/AAB and iOS IPA via offline packaging, covering manifest configuration, signing certificates, native plugin integration, and build distribution. Use when the user needs to package a uni-app as a native app, configure Android keystore or iOS provisioning, or set up offline build for distribution.
stitch-react-components
Convert Stitch designs into modular Vite/React components with validation and design token consistency. Uses Stitch MCP get_screen to retrieve design JSON and HTML; supports high-reliability fetch via scripts; enforces modular structure, type safety, and theme-mapped Tailwind.
react
Provides comprehensive guidance for React development including components, JSX, props, state, hooks, context, performance optimization, and best practices. Use when the user asks about React, needs to create React components, implement hooks, manage component state, or build React applications.
react-native-project-creater
Provides one-command project creation for React Native including project initialization, configuration, and template generation. Use when the user asks about creating React Native projects, needs to initialize a new React Native project, or generate React Native project structure.
react-hooks
Provides comprehensive guidance for React Hooks including useState, useEffect, useContext, useReducer, useMemo, useCallback, custom hooks, and hook patterns. Use when the user asks about React Hooks, needs to use hooks in functional components, create custom hooks, or optimize hook performance.
ant-design-react
Builds enterprise React UIs with Ant Design (antd) including 60+ components (Button, Form, Table, Select, Modal, Message), design tokens, TypeScript support, and ConfigProvider theming. Use when the user needs to create React applications with Ant Design, build forms with validation, display data tables, or customize the Ant Design theme.
vant-vue3
Provides structured guidance for Vant of Vue 3.0. Use when the user needs Vant with Vue 3, asks about mobile UI components such as Button, Cell, Form, Dialog, Toast, Popup, ConfigProvider, theme customization, project setup, or wants to implement mobile-first interfaces with vant or van- components.
layui-vue3
Provides comprehensive guidance for Layui Vue component library including components, layer dialogs, and utilities. Use when the user asks about Layui Vue, needs to use Layui components in Vue 3, or implement UI components.
element-plus-vue3
Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.
bootstrap-vue3
Provides comprehensive guidance for Bootstrap Vue 3 component library including Bootstrap components, grid system, utilities, and Vue 3 integration. Use when the user asks about Bootstrap Vue 3, needs to use Bootstrap components in Vue 3, or implement responsive layouts.
vuex-vue2
Provides comprehensive guidance for Vuex 2.x state management in Vue 2 applications including state, mutations, actions, getters, modules, and plugins. Use when the user asks about Vuex for Vue 2, needs to manage state in Vue 2 applications, or implement Vuex patterns.