Melhores Práticas de Estilização
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
Cache de estilos estáticos com StyleSheet.create: Mova regras de layout, espaçamento e cores que não mudam a cada renderização para uma folha de estilos - literais de objeto inline alocam a cada renderização e anulam o cache nativo.
Componha com arrays de estilo: Empilhe estilos base, de estado e de substituição como [styles.card, pressed && styles.cardPressed, props.style] - a ordem importa; documente se o chamador ou o componente tem precedência.
Lembre-se do padrão column: O flex padrão do React Native é column - defina flexDirection: "row" explicitamente sempre que esperar um layout horizontal.
Preencha telas com flex: 1, não height: "100%": Altura em porcentagem precisa de um pai com altura definida; flex: 1 na view raiz (dentro da área segura) é o padrão confiável para preenchimento de viewport.
Use gap para espaçamento entre irmãos: Prefira gap em contêineres flexíveis em vez de hacks de margem no primeiro/último filho - menos bugs de casos extremos quando os itens montam e desmontam.
Envolva o app em SafeAreaProvider uma vez: Leia os insets via useSafeAreaInsets ou SafeAreaView na raiz da tela - não aninhe o preenchimento de área segura em cada filho.
Escolha as bordas da área segura deliberadamente: Imagens hero full-bleed precisam de edges={['bottom']} ou apenas um inseto inferior manual - aplicar todas as bordas em wrappers aninhados dobra o preenchimento.
Planeje para Android edge-to-edge (RN 0.86): Os insets da barra de status e da barra de navegação mudam no Android moderno - teste em dispositivos com API 35+, não apenas em modelos de insetos clássicos.
Tematize com tokens semânticos: Nomeie cores como surface, textPrimary, borderSubtle - mapeie tokens para paletas claras/escuras em vez de espalhar #111 e #fff pelo código de funcionalidades.
Sincronize a interface com useColorScheme: Controle StatusBar, barras de abas e cabeçalhos de navegação a partir do esquema ativo - ícones de status hardcoded claros desaparecem em fundos escuros.
Crie pontos de quebra com base na largura da janela, não na classe do dispositivo: useWindowDimensions().width >= 768 funciona para tablets e dobráveis Android - Platform.isPad sozinho é insuficiente.
Evite suposições de layout exclusivas da web: Sem media queries ou vh - use hooks, larguras percentuais e flexWrap para layouts responsivos de telefone/tablet.
Estabilize estilos do wrapper da lista: contentContainerStyle={{ padding: 16 }} em FlatList recria a cada renderização do pai - mova para StyleSheet.create ou useMemo.
Memorize componentes de linha, não apenas estilos: memo(Row) falha quando os pais passam novos objetos style inline - passe referências styles.row da folha de estilos.
Anime transform e opacity, não layout: Controlar height a partir de setState a cada frame aciona o layout Yoga a cada tick - use Reanimated para movimento; reserve LayoutAnimation para alternâncias discretas.
Som em um wrapper, corte na view interna: overflow: "hidden" na mesma view que carrega props shadow* do iOS corta a sombra - separe o wrapper de sombra externo e o conteúdo interno.
Sempre defina backgroundColor em superfícies elevadas: Sombras do iOS e elevation do Android precisam de uma cor de superfície opaca - cartões transparentes produzem profundidade invisível.
Combine sombra do iOS com elevation do Android: shadowColor é ignorado no Android - use Platform.select em StyleSheet.create para cartões multiplataforma.
Use StyleSheet.hairlineWidth para divisores: borderWidth: 1 parece pesado em telas de retina - a largura hairline acompanha a densidade de pixels.
Carregue fontes antes da primeira renderização significativa: useFonts + SplashScreen.preventAutoHideAsync - retorne null na raiz até que as fontes carreguem ou ocorra um erro; nunca exiba a fonte do sistema em telas de marca.
Registre explicitamente cada peso de fonte: fontWeight: "700" com uma única família customizada muitas vezes falha - carregue Inter-Bold.ttf e defina fontFamily: "Inter-Bold" diretamente.
Limite a escala em UI densa: Aplique maxFontSizeMultiplier em barras de ferramentas e chips; permita tipo dinâmico completo em cópias de corpo - acessibilidade sem quebrar o layout.
Defina uma escala de tipografia em tokens: Mapeie display, title, body e label para pares de fontSize + lineHeight - as telas referenciam papéis, não números brutos.
Analise o desempenho antes de adotar uma biblioteca de estilização: NativeWind, Tamagui e Unistyles resolvem problemas de escala - um punhado de telas StyleSheet não precisa do custo de bundle e configuração.
Audite estilos públicos em revisão de código: Novos estilos inline em caminhos críticos de lista e cores hexadecimais únicas são regressões - imponha o uso de tokens e folhas de estilo em regras de lint de CI, sempre que possível.
StyleSheet.create ou a um módulo de tokens.StyleSheet + tokens permanecem legíveis.shadow* exclusivas do iOS - adicione elevation e um backgroundColor sólido.useWindowDimensions() - ele re-renderiza na rotação e tela dividida, ao contrário de um Dimensions.get() de uso único.light, dark) e selecione em tempo de execução - ou use um pequeno hook useTheme() que retorne a paleta ativa.StyleSheet.create duplicados por esquema, a menos que a análise de desempenho prove que é necessário.Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026