image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Gustavo Souza
Gustavo Souza04/07/2025 02:59
Compartilhe
Savegnago - Lógica de ProgramaçãoRecomendados para vocêSavegnago - Lógica de Programação

🪄 Principais modelos e frameworks de estilização utilizados com React Native

  • #React Native

Decidi escrever este artigo porque essa já foi uma dúvida que eu tive, e pode ser a mesma de outras pessoas também.

Existem diversos frameworks de estilização disponíveis, e neste artigo vamos entender quais podem ser usados com React Native e por quê

✅ 1. StyleSheet (nativo do React Native)

  • API nativa para estilos.
  • Sintaxe parecida com CSS, mas baseada em JavaScript.

Diferença: Não suporta classes CSS; é mais performático por ser nativo.

Exemplo:

✅ 1. StyleSheet (nativo do React Native)

  • API nativa para estilos.
  • Sintaxe parecida com CSS, mas baseada em JavaScript.

Diferença: Não suporta classes CSS; é mais performático por ser nativo.

Exemplo:

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

const styles = StyleSheet.create({
container: {
  backgroundColor: 'blue',
  padding: 10,
},
text: {
  color: 'white',
},
});

<View style={styles.container}>
<Text style={styles.text}>Olá</Text>
</View>

✅ 2. Styled-Components

  • Usa template literals e CSS-in-JS.
  • Suporta temas e props dinâmicos.

Diferença: Estiliza componentes diretamente com sintaxe parecida com CSS.

Exemplo:

import styled from 'styled-components/native';

const Container = styled.View`
background-color: blue;
padding: 10px;
`;

const Texto = styled.Text`
color: white;
`;

<Container>
<Texto>Olá</Texto>
</Container>

✅ 3. Tailwind CSS (com NativeWind)

  • Framework utilitário com classes curtas.
  • Usa className no estilo do Tailwind web.

Diferença: Rápido e padronizado, evita criação de muitos estilos.

Exemplo:

import { Text, View } from 'react-native';
import 'nativewind/tailwind.css';

<View className="bg-blue-500 p-4">
<Text className="text-white">Olá</Text>
</View>

✅ 4. Bootstrap

Não é compatível com React Native nativamente.

  • É feito para web (HTML/CSS).
  • Para React Native, use alternativas como NativeBase.

✅ 5. Material UI

Material UI Web não é compatível com React Native.

  • Para React Native, use:
  • React Native Paper (seguindo o Material Design)
  • React Native Material Kit

Exemplo com React Native Paper:

import { Button } from 'react-native-paper';

<Button mode="contained" onPress={() => console.log('Apertei')}>
Clique aqui
</Button>

✅ 6. Sass / SCSS

❌ Não é compatível diretamente com React Native.

  • É pré-processador CSS — usado em web, não em apps nativos.
  • Não funciona no RN porque não há DOM/CSS real.

✅ 7. Emotion

  • Similar ao styled-components.
  • Usa CSS-in-JS.
  • Funciona melhor em React Web, mas há suporte limitado no React Native.

✅ 8. NativeBase

  • Biblioteca de componentes com tema.
  • Parecido com Bootstrap, mas para React Native.

Exemplo:

import { Box, Text } from 'native-base';

<Box bg="primary.500" p="4">
<Text color="white">Olá</Text>
</Box>

✅ 9. Restyle (da Shopify)

  • Focado em tipagem forte (TypeScript).
  • Estilo com tokens e temas.

Exemplo:

import { createBox } from '@shopify/restyle';

const Box = createBox();

<Box backgroundColor="blue" padding="m">
<Text>Olá</Text>
</Box>

image

📚 Referências Oficiais e Documentações

  • React Native - StyleSheet: https://reactnative.dev/docs/stylesheet : Explica o uso da API StyleSheet para estilização nativa com performance otimizada.
  • Styled-Components - https://styled-components.com/docs/basics#react-native: Documentação oficial sobre como usar styled-components com React Native.
  • NativeWind (Tailwind para React Native) - https://www.nativewind.dev/: Site oficial com documentação e exemplos de como utilizar classes utilitárias estilo Tailwind no React Native.
  • React Native Paper (Material Design) - https://callstack.github.io/react-native-paper/ : Biblioteca compatível com os princípios do Material Design, feita para React Native.
  • NativeBase - https://nativebase.io/: Framework com componentes prontos e temas inspirados em Bootstrap, mas projetado para React Native.
  • Restyle (Shopify) - https://github.com/Shopify/restyle : Biblioteca focada em tipagem forte com TypeScript e temas reutilizáveis.
  • React Native Material Kit -https://github.com/xinthink/react-native-material-kit : Alternativa baseada em Material Design para React Native.
  • Emotion - https://emotion.sh/docs/introduction: Apesar de focado em web, o suporte parcial ao React Native é mencionado na documentação oficial.

🔎 Artigos e Comparativos (Complementares)

  • Comparing React Native Styling Libraries
  • React Native Styling Options – A Developer’s Guide
  • Tailwind CSS in React Native with NativeWind

E aí Gostou? Então compartilhe para seus amigos e colegas

Compartilhe
Recomendados para você
meutudo - Mobile Developer
Deal Group - AI Centric .NET
Randstad - Análise de Dados
Comentários (0)
Recomendados para vocêSavegnago - Lógica de Programação