skills.rest
fyndx
fyndxOFFICIAL
Explore all skills by this author →
GitHub

react-native

Implement React Native components with platform-specific code and performance patterns.

1|Updated Oct 19, 2023
Search Tags:#performance#navigation#mobile development#ui components#react native#expo
One-click install
npx skills add https://github.com/fyndx/coinx --skill react-native-fyndx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/fyndx/coinx/tree/main/skills/react-native
Command: npx skills add https://github.com/fyndx/coinx --skill react-native-fyndx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and best practices for developing React Native applications, addressing common challenges in component design, platform-specific code, performance optimization, and navigation.

Core Features & Use Cases

  • Component Patterns: Demonstrates functional components and platform-specific code implementation.
  • UI Elements: Covers safe area handling, list rendering (FlashList/FlatList), and keyboard management.
  • Performance & Gestures: Offers strategies for memoization, avoiding anonymous functions, and integrating gesture handling.
  • Navigation & Storage: Explains Expo Router for navigation and MMKV/AsyncStorage for data persistence.

Quick Start

Use the react-native skill to implement a functional component with basic styling.

Frequently Asked Questions about react-native

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

FAQPage Schema
How do I optimize React Native performance when rendering large lists?▼

Optimize React Native performance by using FlashList or FlatList for large lists. These components recycle views, while memoization and avoiding anonymous functions during rendering prevent unnecessary re-renders and improve scroll performance.

What is the best way to handle platform-specific code in React Native?▼

The best way to handle platform-specific code in React Native is using the Platform module or platform-specific file extensions. This approach lets you implement distinct UI components or logic for iOS and Android within a single functional component structure.

Can I use Expo Router for navigation in a cross-platform mobile app?▼

Yes, you can use Expo Router for navigation in a cross-platform mobile app. It provides file-based routing for React Native, simplifying deep linking and navigation stacks while integrating seamlessly with Expo development workflows.

Why do I need safe area handling in React Native UI components?▼

You need safe area handling in React Native UI components to prevent visual elements from overlapping with device notches, home indicators, or rounded screen corners. Implementing safe area views ensures content remains visible and accessible across all mobile devices.

Does MMKV work better than AsyncStorage for mobile data storage?▼

MMKV offers faster synchronous data storage than AsyncStorage for React Native applications. While AsyncStorage provides simple asynchronous persistence, MMKV delivers high-performance key-value storage, making it ideal for storing frequently accessed application state.

Related Skills

Explore More Software Engineering Skills→
tassiovaletassiovale
13

building-native-ui

Guide UI development with Expo and React Native layouts, navigation, and animations.

Community
Intermediate
christopherlouetchristopherlouet
5

ops-mobile-release

Automate mobile app store deployments using Fastlane lanes and GitHub Actions.

Community
Intermediate
theslashdojotheslashdojo

git-remote

Manage git remotes and synchronize local branches with remote refs.

Official
Intermediate
altrupetsaltrupets

Native Integration (Swift/Kotlin)

Integrate native iOS and Android UI and hardware features into Flutter apps.

Official
Advanced