skills.rest
eduardoborges
eduardoborgesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-best-practices

Optimize React Native app performance across JavaScript, native code, and bundle size.

Updated Oct 31, 2024
Search Tags:#performance#optimization#bundle size#profiling#animations#react-native
One-click install
npx skills add https://github.com/eduardoborges/dotfiles --skill react-native-best-practices-eduardoborges
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/eduardoborges/dotfiles/tree/main/agent-skills/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/eduardoborges/dotfiles --skill react-native-best-practices-eduardoborges

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React Native applications, including slow UI, janky animations, large bundle sizes, and memory issues.

Core Features & Use Cases

  • Performance Profiling: Guides users on measuring FPS, TTI, and bundle size.
  • Optimization Strategies: Provides actionable steps for JS, Native, and bundling optimizations.
  • Use Case: Debugging a slow-scrolling list by identifying it as a FlatList or FlashList optimization opportunity and applying the correct implementation.

Quick Start

Use the react-native-best-practices skill to optimize React Native app performance by analyzing and improving list scrolling performance.

Frequently Asked Questions about react-native-best-practices

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

FAQPage Schema
How do I fix slow scrolling and janky animations in React Native?▼

Fix slow scrolling and janky animations by profiling your React Native application to measure FPS and identify bottlenecks, then applying specific optimization strategies like replacing slow lists with FlatList or FlashList implementations.

What is the best way to profile React Native performance and measure TTI?▼

The best way to profile React Native performance is by measuring Frames Per Second (FPS) and Time to Interactive (TTI) using specific reference commands to pinpoint JavaScript and native code bottlenecks.

How do I reduce bundle size in a React Native application?▼

Reduce React Native bundle size by following actionable bundling optimization guidelines that analyze and eliminate unnecessary code, improving app launch times and overall performance.

Why does my React Native app have memory leaks and re-renders?▼

React Native memory leaks and re-renders occur due to unoptimized component states and poor list rendering, which you can resolve by applying specific JavaScript and native code optimization steps.

When do I need to use FlashList instead of FlatList for React Native optimization?▼

You need to use FlashList instead of FlatList when profiling reveals slow UI performance during list scrolling, indicating an optimization opportunity for better memory management and rendering speed.

Can I optimize both JavaScript and Native code simultaneously in React Native?▼

Yes, you can optimize both JavaScript and Native code simultaneously by following comprehensive performance guidelines that provide actionable steps across JS, native layers, and bundle size.

Related Skills

Explore More Software Engineering Skills→
callstackincubatorcallstackincubator
1.6k

react-native-best-practices

Profile and optimize React Native performance bottlenecks across JavaScript and native layers.

Official
Advanced
PsycarloPsycarlo
1

react-native-best-practices

Identify and optimize React Native performance bottlenecks across FPS, startup time, and bundle size.

Community
Advanced
miklosmemiklosme

vercel-react-native-skills

Implement React Native and Expo performance best practices for lists, images, and animations.

Community
Advanced
apostolos-geyerapostolos-geyer

react-native-best-practices

Profile and optimize React Native app performance across JavaScript, native modules, and bundle size.

Community
Intermediate