Framework · Desde 2015

React Native

React Native é um framework de código aberto para criar apps Android e iOS com React e JavaScript ou TypeScript, com interface nativa a partir de um só código.

Começar o guia Discussões

React Native é um framework de código aberto lançado pela Meta em 2015 que permite criar apps para Android e iOS com o modelo de componentes do React. As telas são desenhadas com as views nativas de cada plataforma, e não dentro de uma web view, então os apps têm a aparência e a resposta de qualquer outro app nativo. Hoje ele é desenvolvido pela Meta junto com a comunidade e empresas parceiras, e a New Architecture, ativada por padrão, conecta JavaScript e código nativo de forma mais direta.

React Native se destaca principalmente em equipes que já usam React na web e querem criar apps móveis com o mesmo conhecimento e as mesmas ferramentas. Um único código atende às duas plataformas, ainda é possível recorrer a Kotlin ou Swift quando necessário, e o Fast Refresh mostra as mudanças assim que você salva. É muito usado em apps com muitas telas e ciclos de lançamento rápidos, como comércio, redes sociais e aplicativos internos de empresas, e também pode ser usado em apenas algumas telas de um app nativo existente.

A forma mais simples de começar é criar um projeto com Expo, como recomenda a documentação oficial. Instale o Node.js, crie um projeto com create-expo-app, instale o Expo Go no celular e abra o app lendo um QR code. Aprenda primeiro os fundamentos do React e depois siga o guia de componentes básicos da documentação oficial e o tutorial do Expo para criar um pequeno app.

Destaques

Interface nativa

Componentes como View, Text e Image são desenhados com as views nativas de cada plataforma, com a aparência esperada.

React de verdade

Use conceitos do React como componentes, props, estado e hooks, junto com TypeScript e o ecossistema npm.

Iteração rápida

O Fast Refresh aplica as mudanças mantendo o estado, e o React Native DevTools cuida da depuração.

Extensão nativa

Turbo Native Modules e componentes Fabric da New Architecture se conectam diretamente a código Kotlin e Swift.

Onde é usada

Apps móveis lançados juntos para Android e iOS
Apps de comércio, redes sociais e conteúdo
Aplicativos internos de empresas
Telas em React Native dentro de apps nativos existentes

Instalação

1
Instalar o Node.js
As ferramentas do React Native rodam sobre o Node.js. Instale a versão LTS em nodejs.org e confira se um número de versão aparece. O emulador Android precisa do Android Studio, e o simulador iOS precisa de macOS com Xcode.
```
node --version
```
2
Criar um projeto Expo
Crie um novo projeto com Expo, como recomenda a documentação oficial. O template já vem com TypeScript e roteamento baseado em arquivos (Expo Router) configurados.
```
npx create-expo-app@latest my-app
```
3
Iniciar o servidor de desenvolvimento
Inicie o servidor de desenvolvimento na pasta do projeto e leia o QR code com o Expo Go ou pressione a (Android) ou i (iOS) no terminal.
```
cd my-app && npx expo start
```

Seu primeiro programa

Sua primeira tela

Em um projeto criado com o template blank-typescript, App.tsx é o componente raiz. View é um contêiner de layout e Text exibe texto; todo texto precisa ficar dentro de um componente Text. Os estilos criados com StyleSheet.create usam Flexbox para centralizar o conteúdo. Edite e salve o arquivo, e o Fast Refresh atualiza na hora o app em execução.

App.tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
});

npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo start

Ferramentas do dia a dia

Expo: O framework recomendado pela documentação do React Native. Oferece criação de projetos, Expo Router, módulos para recursos do dispositivo e development builds.
Metro: O bundler JavaScript do React Native. Durante o desenvolvimento, ele empacota o código, envia ao app e viabiliza o Fast Refresh.
React Native DevTools: O depurador oficial do React Native, com breakpoints, console, árvore de componentes React e profiler.
EAS: Expo Application Services: builds na nuvem (EAS Build), envio às lojas (EAS Submit) e atualizações OTA (EAS Update).

Guia passo a passo

Seis capítulos que levam você da instalação aos conceitos essenciais de React Native.

Documentação oficial e recursos

Linguagens

Discussões

Iniciar uma discussão

Tire dúvidas, compartilhe experiências e troque opiniões sobre React Native.

Ainda não há discussões. Comece a primeira.