Estilização: O CSS em JavaScript

Você já sabe como dar vida a componentes na web com arquivos CSS ou com a ajuda de frameworks como o Tailwind. No React Native, o conceito de separar a lógica da apresentação continua, mas a forma como escrevemos nossos estilos é um pouco diferente. Diga adeus aos arquivos .css e olá aos objetos JavaScript.

StyleSheet: O Padrão do React Native

No React Native, todos os estilos são declarados em JavaScript. Em vez de escrever seletores e propriedades em um arquivo separado, nós criamos objetos onde as chaves são as propriedades de estilo (em camelCase, como backgroundColor em vez de background-color) e os valores são as definições de estilo.

Para organizar e otimizar esse processo, usamos a API StyleSheet do React Native. A principal função que usamos é a StyleSheet.create(). Ela recebe um objeto contendo todos os nossos "seletores" e retorna um objeto de estilos otimizado.

Por que usar StyleSheet.create()?

1. Performance: O StyleSheet processa seus estilos e os envia pela "ponte" para o lado nativo apenas uma vez, de forma mais eficiente.
2. Validação: Ele valida suas propriedades de estilo. Se você digitar backgrundColor em vez de backgroundColor, o React Native irá avisá-lo do erro.

Como usar:

1. Importe o StyleSheet de react-native.
2. Crie um objeto de estilos usando StyleSheet.create().
3. Aplique os estilos ao seu componente através da prop style, passando styles.seuEstilo.

Veja um exemplo:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function StyledCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Título do Card</Text>
      <Text style={styles.paragraph}>Este é um texto dentro do card.</Text>
    </View>
  );
}

// 1. Criamos nosso objeto de estilos
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    margin: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Sombra para Android
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  paragraph: {
    fontSize: 14,
    color: '#333',
  },
});
    

Para aplicar múltiplos estilos, basta passá-los em um array: style={[styles.base, styles.variante]}.

Layout com Flexbox por Padrão

Aqui vem uma das melhores notícias para quem vem do desenvolvimento web moderno: React Native usa Flexbox por padrão para layout.

Tudo que você sabe sobre flex, flexDirection, justifyContent, alignItems e gap funciona aqui. A principal diferença é que o flexDirection padrão no React Native é 'column' em vez de 'row'. Isso faz sentido, já que os aplicativos são, na maioria das vezes, orientados verticalmente.

// Exemplo de um header simples com Flexbox
function Header() {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.logo}>Logo</Text>
      <Text style={styles.menu}>Menu</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row', // Alinha os itens horizontalmente
    justifyContent: 'space-between', // Espaço entre os itens
    alignItems: 'center', // Centraliza verticalmente
    padding: 16,
    backgroundColor: '#f0f0f0',
  },
  logo: {
    fontWeight: 'bold',
  },
  menu: {
    color: 'blue',
  },
});
    

Criando Layouts Responsivos

As telas de celular variam muito em tamanho e densidade de pixels. Um layout que fica ótimo em um iPhone 14 Pro Max pode parecer apertado em um iPhone SE. Para lidar com isso, precisamos criar layouts que se adaptem.

A ferramenta mais simples para isso no React Native é a API Dimensions. Ela nos permite obter a largura (width) e a altura (height) da tela do dispositivo em tempo real.

Com essa informação, podemos ajustar nossos estilos dinamicamente.

import { View, Text, StyleSheet, Dimensions } from 'react-native';

// Obtém a largura da tela
const screenWidth = Dimensions.get('window').width;

function ResponsiveComponent() {
  // Ajusta o tamanho da fonte com base na largura da tela
  const fontSize = screenWidth > 400 ? 24 : 18;

  return (
    <View style={styles.container}>
      <Text style={[styles.title, { fontSize: fontSize }]}>
        Este título é responsivo!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    // Faz o container ocupar 80% da largura da tela
    width: screenWidth * 0.8,
    margin: screenWidth * 0.1, // Centraliza com 10% de margem de cada lado
    padding: 20,
    backgroundColor: 'lightblue',
    alignItems: 'center',
  },
  title: {
    fontWeight: 'bold',
  },
});
    

Dominar o StyleSheet, o Flexbox e o uso do Dimensions é o segredo para criar interfaces bonitas e funcionais para qualquer dispositivo com React Native.