StyleSheet — o que é, criação de estilos no React Native

O que é StyleSheet?

StyleSheet — uma API integrada do React Native para definir estilos de componentes. Diferente do CSS no desenvolvimento web, o RN usa objetos JavaScript para descrever estilos. StyleSheet.create — o método principal — aceita um objeto de estilo e retorna um objeto com identificadores numéricos.

StyleSheet faz parte do núcleo do React Native e não requer instalação de pacotes adicionais. Segundo a Meta (2026), 95% dos projetos React Native usam StyleSheet.create para estilos estáticos. Alternativas: styled-components, Emotion, NativeWind (Tailwind para RN) — mas o StyleSheet integrado continua sendo o padrão para o núcleo.

História e evolução

Nas primeiras versões do React Native (2015), os estilos eram definidos exclusivamente como objetos inline. StyleSheet.create apareceu no RN 0.4 como uma otimização. O conceito é inspirado no CSS: separe estilos da lógica para legibilidade e desempenho. Com o passar dos anos, a API se expandiu: absoluteFill, hairlineWidth, flatten foram adicionados.

StyleSheet.create vs estilos inline

A diferença entre StyleSheet.create e estilos inline é crítica para o desempenho. Um estilo inline é um objeto JavaScript comum criado a cada renderização do componente. StyleSheet.create — um objeto criado uma vez durante o carregamento do módulo e convertido em um ID numérico.

Ao passar um estilo inline, o React Native envia o objeto inteiro através da ponte JavaScript-Native toda vez. Para um componente com estilos complexos, isso significa dezenas de propriedades transferidas a cada renderização. StyleSheet.create passa apenas um identificador numérico, reduzindo a carga da ponte.

// StyleSheet.create — abordagem otimizada
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Estilo inline — cria um novo objeto a cada renderização
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Quando usar inline: para estilos dinâmicos que dependem do estado (pressionado, selecionado, ativo). Para estilos estáticos, sempre use StyleSheet.create. Regra: estático → create, dinâmico → função inline.

Layout Flexbox com StyleSheet

Flexbox — o único mecanismo de layout no React Native (CSS Grid não é suportado, float está ausente). StyleSheet.create é usado para descrever contêineres flex e seus elementos filhos. Propriedades principais: flex (coeficiente de preenchimento), flexDirection (row | column), justifyContent, alignItems.

Por padrão, flexDirection no React Native é column (no CSS — row). Esta é a primeira coisa a lembrar ao migrar do desenvolvimento web. Todos os componentes View são contêineres flex por padrão. Para centralizar um elemento, use alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Importante: no React Native, todos os tamanhos são especificados sem unidades (apenas um número). Porcentagens funcionam, mas apenas para width e height relativos ao pai. margin e padding aceitam números. Para responsividade, use flex em vez de porcentagens — é mais confiável em diferentes telas.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API inclui vários métodos além do create. StyleSheet.flatten mescla um array de estilos em um único objeto — útil para composição e passagem de estilos para componentes de terceiros. StyleSheet.hairlineWidth retorna a largura mínima de linha visível no dispositivo.

StyleSheet.absoluteFill — um estilo predefinido { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Usado para camadas de sobreposição, janelas modais e posicionamento absoluto em toda a tela. StyleSheet.absoluteFillObject — o mesmo, mas como objeto para extensão.

// flatten — mesclar estilos
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — linha mínima
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth é útil para separadores e bordas — sempre parece 1 pixel físico independentemente da densidade da tela. Em telas Retina são 0.5 pontos lógicos, em telas normais — 1 ponto. Não use hairlineWidth para elementos que devem ter um tamanho estritamente específico.

Layout responsivo com Dimensions API

Dimensions API é usada junto com StyleSheet para layout responsivo em diferentes tamanhos de tela. Dimensions.get('window') retorna a largura e altura da janela. Para atualizações reativas ao girar a tela, use o hook useWindowDimensions do React Native.

Embora StyleSheet.create não suporte media queries como CSS, você pode calcular valores com base em Dimensions dentro do create ou usar estilos dinâmicos através de uma função. Para breakpoints, crie estilos separados para diferentes faixas de largura.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions é atualizado automaticamente ao girar a tela e ao redimensionar a janela em tablets com Split View. Para SSR (React Native Web), certifique-se de que Dimensions.get seja chamado após a montagem do componente para evitar discrepâncias entre servidor e cliente.

Organização de estilos em um projeto

A organização do StyleSheet em um projeto afeta a manutenibilidade e a reutilização de código. Três abordagens: estilos locais dentro do componente (styles.js ao lado do componente), estilos globais (theme.js com constantes de cor, espaçamento, tipografia) e estilos modulares através de composição.

Estrutura recomendada: theme.js com constantes de cor, tamanho e tipografia; Component.styles.js ao lado de cada componente para seus estilos específicos; StyleSheet.flatten para combinar estilos base e específicos. Para projetos grandes, use um Design System com geração de tema.

// theme.js — constantes globais
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Benefícios da organização modular: fonte única de verdade para cores e espaçamentos, refatoração simplificada (mude primary — todos os botões atualizam), reutilização de estilos via flatten, legibilidade e previsibilidade do código. Para projetos TypeScript, adicione tipos para o tema via declare module.