react-native-skills

Apply React Native and Expo best practices for performant mobile apps.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/bpteam/coder --skill react-native-skills-bpteam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-skills
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/react-native-skills
Command: npx skills add https://github.com/bpteam/coder --skill react-native-skills-bpteam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native apps often suffer from performance pitfalls across large lists, complex animations, and heavy media handling. This Skill provides a curated set of patterns and rules to diagnose, fix, and prevent these issues, helping teams ship smoother experiences.

Core Features & Use Cases

  • Guided rules for List Performance, Animation, and UI patterns to improve responsiveness.
  • Practical examples showing how to apply virtualization, memoization, and image optimization in real apps.
  • Scenarios covering monorepo setups, native navigation, and integration with Reanimated and expo modules.

Quick Start

Audit a React Native screen and apply virtualization, memoization, and image optimization best practices to quickly observe performance improvements.

Frequently Asked Questions about react-native-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React Native list performance for large datasets?

Optimize React Native list performance by applying list virtualization patterns to render only visible items, preventing jank and reducing memory overhead for large datasets. This Skill provides concrete virtualization rules and practical examples.

What's the best way to handle React Native animations with Reanimated?

Handle React Native animations with Reanimated by applying structured UI patterns and rules that run animations on the native thread, ensuring smooth and responsive complex gesture interactions. This Skill provides curated animation patterns.

How do I apply memoization and lazy loading in an Expo app?

Apply memoization and lazy loading in an Expo app by using the practical coding patterns provided here to prevent unnecessary re-renders and defer loading heavy components until they are needed.

Does this work for managing native dependencies in a React Native monorepo?

Yes, it covers monorepo setups by providing structured rules for managing native dependencies and native module configurations across your React Native and Expo packages.

Why does my React Native app suffer from slow image loading?

Slow React Native image loading often stems from unoptimized media handling. This Skill provides image optimization patterns to diagnose and fix heavy media issues, ensuring smoother app experiences.