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.

Stars 232
Forks 15

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

bash
# 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

typescript
// 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

typescript
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

  1. Performance: Use StyleSheet.create(), avoid inline styles, optimize images
  2. Accessibility: Add accessibilityLabel and accessibilityRole
  3. Responsive: Test on different screen sizes
  4. Navigation: Use React Navigation or Expo Router
  5. State: Keep component state minimal, use context/store for shared state

Common Patterns

Lists

typescript
import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

Forms

typescript
import { TextInput } from 'react-native';
const [value, setValue] = useState('');

<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="Enter text"
  style={styles.input}
/>

Loading States

typescript
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.json configuration
  • Simulator issues: Reset simulator or emulator

Resources

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

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.

232 15
Explore
aiskillstore/marketplace

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.

232 15
Explore
aiskillstore/marketplace

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.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results