Habilidades do React Native

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

Quando Usar

Consulte estas diretrizes quando:

• Estiver construindo apps React Native ou Expo
• Otimizando o desempenho de listas e rolagem
• Implementando animações com Reanimated
• Trabalhando com imagens e mídia
• Configurando módulos nativos ou fontes
• Estruturando projetos monorepo com dependências nativas

Categorias de Regras por Prioridade

Referência Rápida

1. Desempenho de Lista (CRÍTICO)

• list-performance-virtualize - Use FlashList para listas grandes
• list-performance-item-memo - Memoize 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 fora do render
• list-performance-images - Otimize imagens em listas
• list-performance-item-expensive - Mova trabalho custoso 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 stack nativo e tabs nativas em vez de navegadores 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 imagem
• ui-pressable - Use Pressable em vez de TouchableOpacity
• ui-safe-area-scroll - Gerencie á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 - Gerencie 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 app
• monorepo-single-dependency-versions - Use versões únicas entre pacotes

8. Configuração (BAIXO)

• fonts-config-plugin - Use plugins de configuração para fontes customizadas
• imports-design-system-folder - Organize imports 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:

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

Cada arquivo de regra contém:

• Breve explicação do porquê importa
• 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

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialista.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem faltando.