vercel-react-native-skills

Habilidades React Native

Melhores práticas abrangentes para aplicações React Native e Expo. Contém regras em várias categorias, abrangendo desempenho, animações, padrões de interface do usuário e otimizações específicas de plataforma.

Quando Aplicar

Consulte estas diretrizes ao:

• Desenvolver aplicativos React Native ou Expo
• Otimizar desempenho de listas e scroll
• Implementar animações com Reanimated
• Trabalhar com imagens e mídia
• Configurar módulos nativos ou fontes
• Estruturar projetos monorepo com dependências nativas

Categorias de Regras por Prioridade

Prioridade	Categoria	Impacto	Prefixo
1	Desempenho de Lista	CRÍTICO	list-performance-
2	Animação	ALTO	animation-
3	Navegação	ALTO	navigation-
4	Padrões de UI	ALTO	ui-
5	Gerenciamento de Estado	MÉDIO	react-state-
6	Renderização	MÉDIO	rendering-
7	Monorepo	MÉDIO	monorepo-
8	Configuração	BAIXO	fonts-, imports-

Referência Rápida

1. Desempenho de Lista (CRÍTICO)

• list-performance-virtualize - Use FlashList para listas grandes
• list-performance-item-memo - Memorize componentes de itens de lista
• list-performance-callbacks - Estabilize referências de callbacks
• list-performance-inline-objects - Evite objetos de estilo inline
• list-performance-function-references - Extraia funções para fora da renderização
• list-performance-images - Otimize imagens em listas
• list-performance-item-expensive - Mova trabalho pesado para fora dos itens
• list-performance-item-types - Use tipos de item para listas heterogêneas

2. Animação (ALTO)

• animation-gpu-properties - Anime apenas transform e opacity
• animation-derived-value - Use useDerivedValue para animações computadas
• animation-gesture-detector-press - Use Gesture.Tap em vez de Pressable

3. Navegação (ALTO)

• navigation-native-navigators - Use navigators nativos (native stack e native tabs) em vez de navigators JS

4. Padrões de UI (ALTO)

• ui-expo-image - Use expo-image para todas as imagens
• ui-image-gallery - Use Galeria para lightboxes de imagens
• ui-pressable - Use Pressable em vez de TouchableOpacity
• ui-safe-area-scroll - Lide com áreas seguras em ScrollViews
• ui-scrollview-content-inset - Use contentInset para cabeçalhos
• ui-menus - Use menus de contexto nativos
• ui-native-modals - Use modais nativos quando possível
• ui-measure-views - Use onLayout, não measure()
• ui-styling - Use StyleSheet.create ou Nativewind

5. Gerenciamento de Estado (MÉDIO)

• react-state-minimize - Minimize assinaturas de estado
• react-state-dispatcher - Use o padrão dispatcher para callbacks
• react-state-fallback - Mostre fallback na primeira renderização
• react-compiler-destructure-functions - Desestruture para o React Compiler
• react-compiler-reanimated-shared-values - Lide com valores compartilhados com o compilador

6. Renderização (MÉDIO)

• rendering-text-in-text-component - Envolva texto em componentes Text
• rendering-no-falsy-and - Evite falsy && para renderização condicional

7. Monorepo (MÉDIO)

• monorepo-native-deps-in-app - Mantenha dependências nativas no pacote do aplicativo
• monorepo-single-dependency-versions - Use versões únicas em todos os pacotes

8. Configuração (BAIXO)

• fonts-config-plugin - Use plugins de configuração para fontes personalizadas
• imports-design-system-folder - Organize importações do sistema de design
• js-hoist-intl - Eleve a criação do objeto Intl

Como Usar

Leia os arquivos de regras individuais para explicações detalhadas e exemplos de código:

regras/list-performance-virtualize.md
regras/animation-gpu-properties.md

Cada arquivo de regra contém:

• Breve explicação do porquê é importante
• Exemplo de código incorreto com explicação
• Exemplo de código correto com explicação
• Contexto adicional e referências

Documento Compilado Completo

Para o guia completo com todas as regras expandidas: AGENTS.md