Agent skill
react-native-mobile-development
Build and manage React Native/Expo mobile apps including project setup, development workflows, and platform-specific guidance. Use when working on mobile app development, configuration, or running apps.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/babakbar/react-native-mobile-development
SKILL.md
React Native Mobile Development
Guide for building mobile apps with React Native and Expo.
When to Use
- Setting up React Native/Expo projects
- Running dev servers or builds
- Creating mobile components
- Handling platform-specific code (iOS/Android)
- Configuring app.json or native modules
- Troubleshooting mobile-specific issues
Core Commands
# Development
npm start # Start Metro bundler
npm run ios # Run on iOS Simulator
npm run android # Run on Android Emulator
# Expo specific
npx expo start # Start with Expo CLI
npx expo install PKG # Install compatible packages
npx expo prebuild # Generate native code
Component Structure
// Mobile component template
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
interface Props {
title: string;
onPress: () => void;
}
export function MyComponent({ title, onPress }: Props) {
return (
<TouchableOpacity onPress={onPress} style={styles.container}>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
padding: 16,
backgroundColor: '#007AFF',
borderRadius: 8,
},
text: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600',
},
});
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
- Performance: Use
StyleSheet.create(), avoid inline styles, optimize images - Accessibility: Add
accessibilityLabelandaccessibilityRole - Responsive: Test on different screen sizes
- Navigation: Use React Navigation or Expo Router
- 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.jsonconfiguration - Simulator issues: Reset simulator or emulator
Resources
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?