About

Imported from shipshitdev/skills (skills/react-native-components/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill react-native-components. Copyright stays with the author.

React Native Component Patterns Expert

Name: react-native-components
Author: shipshitdev

When to Use

Use when you're:

Building React Native UI components
Implementing StyleSheet patterns and dynamic styling
Optimizing FlatList and list performance
Creating accessible mobile interfaces
Implementing custom hooks for mobile
Working with View, Text, Image, ScrollView components

Quick Reference

Core Components

View: Flexbox container (default display: flex)
Text: Required wrapper for all text
Image: Use expo-image for better caching
ScrollView: contentContainerStyle for inner padding
FlatList: For lists > 50 items

StyleSheet Patterns

StyleSheet.create: Performance-optimized styles
Array syntax: [baseStyle, condition && activeStyle]
Dynamic: useWindowDimensions for responsive
Platform: Platform.select({ ios: {}, android: {} })

Performance

FlatList with initialNumToRender, windowSize
React.memo for pure components
useMemo for expensive calculations
useCallback for event handlers

References

Full guide: Components, patterns, accessibility, performance

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-react-native-components/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-react-native-components.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-react-native-components",
  "kind": "skill",
  "name": "react-native-components",
  "description": "Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples. Use when building React Native UI components, implementing StyleSheet or dynamic styling, optimizing list performance, or creating accessible mobile interfaces.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "react-native",
      "components",
      "styling",
      "performance",
      "ui",
      "accessibility",
      "hooks",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples. Use when building React Native UI components, implementing StyleSheet or dynamic styling, optimizing list performance, or creating accessible mobile interfaces."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/react-native-components/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/react-native-components/SKILL.md",
      "key": "shipshitdev/skills/skills/react-native-components/SKILL.md"
    }
  },
  "instructions": "# React Native Component Patterns Expert\n\n## When to Use\n\nUse when you're:\n\n- Building React Native UI components\n- Implementing StyleSheet patterns and dynamic styling\n- Optimizing FlatList and list performance\n- Creating accessible mobile interfaces\n- Implementing custom hooks for mobile\n- Working with View, Text, Image, ScrollView components\n\n## Quick Reference\n\n### Core Components\n\n- **View**: Flexbox container (default `display: flex`)\n- **Text**: Required wrapper for all text\n- **Image**: Use `expo-image` for better caching\n- **ScrollView**: `contentContainerStyle` for inner padding\n- **",
  "cost": {
    "context_tokens": 289
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-react-native-components/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.