React Native: o que é, como funciona o Bridge e o ambiente JavaScript

O que é React Native

React Native é um framework criado pela equipe do Facebook (agora Meta) e lançado como código aberto em 2015. Diferente de abordagens híbridas (Cordova, Ionic), o React Native não usa WebView. Em vez disso, componentes JavaScript são mapeados para elementos nativos de UI: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

A primeira versão do React Native suportava apenas iOS. O suporte ao Android chegou em 2016. A versão 0.60 (2019) introduziu o Autolinking — vinculação automática de dependências nativas. O React Native 0.68 (2022) incluiu a nova arquitetura Fabric + TurboModules. A versão estável atual 0.74 (2024) está totalmente migrada para a New Architecture com suporte ao Yoga 3.0 para layout Flexbox.

De acordo com o Statista 2024, o React Native é usado em 38% dos projetos multiplataforma. O framework é usado por Discord, Instagram, Shopify, Pinterest, Skype e Uber Eats. A Meta usa React Native no Facebook e Instagram — o principal aplicativo móvel com 2 bilhões de usuários.

História e evolução do React Native

React Native foi anunciado na React.js Conf em janeiro de 2015. A ideia era levar o paradigma declarativo do React da web para plataformas móveis. O primeiro commit no repositório apareceu em 2013 como um projeto interno do Facebook para criar o aplicativo Facebook Groups no iOS.

A versão 0.70 (2022) apresentou o Hermes como mecanismo JavaScript padrão. Hermes é um mecanismo compilado antecipadamente (AOT) otimizado para dispositivos móveis. Ele reduz o tempo de inicialização do aplicativo em 50% e diminui o tamanho do APK em 30% em comparação com o JavaScriptCore. Hermes suporta ES6 e parcialmente ES2020.

Diferença entre React Native e React Web

React Web renderiza componentes em elementos DOM (div, span, p) via ReactDOM. React Native renderiza em componentes nativos da plataforma. Em vez de <div>, use <View>; em vez de <span>, use <Text>. Os estilos são definidos através do StyleSheet.create(), que é traduzido para propriedades CSS da plataforma. Flexbox está incluído por padrão através do mecanismo Yoga.

A navegação no React Native difere da web. Em vez de react-router-dom, usa-se React Navigation — uma biblioteca nativa com suporte aos navegadores Stack, Tab e Drawer. React Navigation 6.x usa animações nativas (useNativeDriver) e integração com Deep Links. Para navegação nativa de telas com UINavigationController do iOS e Fragment do Android, utiliza-se a biblioteca react-native-navigation da Wix.

Arquitetura do React Native

A arquitetura do React Native tradicionalmente era construída em torno do Bridge — um canal JSON assíncrono entre o ambiente JavaScript e o código nativo. Desde a versão 0.68, a Meta introduziu a New Architecture, que substitui o Bridge por JSI (JavaScript Interface) e Fabric. Vamos analisar ambos os modelos.

Bridge e Fabric

Bridge é um protocolo JSON serializado que opera em várias threads: JS Thread (interpretação do código React), Main Thread (UI) e Native Modules Thread (API). Cada interação entre JS e código nativo passa por serialização e desserialização de objetos, criando atrasos em chamadas frequentes. Ao rolar uma lista de 1000 itens, o Bridge gera até 10.000 mensagens JSON por segundo.

Fabric é um novo sistema de renderização no React Native. Em vez do Bridge, o Fabric usa uma Shadow Tree em C++ que se sincroniza com a thread de UI via JSI. Isso elimina a serialização JSON: o código nativo em C++ chama diretamente funções no ambiente JavaScript e vice-versa. O Fabric reduz a latência de renderização de 16 ms (Bridge) para 2–4 ms.

TurboModules é a segunda parte da New Architecture. No modelo antigo, todos os módulos nativos eram carregados na inicialização do aplicativo. TurboModules carrega os módulos lentamente (lazy loading) — apenas quando o código JS os solicita pela primeira vez. Isso reduz o tempo de inicialização a frio em 40% em aplicativos com mais de 20 módulos nativos.

Exemplo de aplicativo React Native

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

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Módulos nativos

Módulos nativos são um mecanismo para chamar APIs da plataforma a partir do JavaScript. Se a funcionalidade não for coberta pelos componentes padrão do React Native (câmera, Bluetooth, biometria), o desenvolvedor escreve um módulo em Swift/Kotlin e o registra via RCTBridgeModule ou TurboModule. A função nativa é chamada do JS através de NativeModules.CameraModule.takePhoto().

React Native fornece módulos nativos prontos para acessar o acelerômetro (react-native-sensors), geolocalização (@react-native-community/geolocation), biometria (react-native-biometrics) e notificações locais (@notifee/react-native). Para cenários personalizados, o Expo oferece a Expo Modules API — uma interface mais simples para criar módulos nativos sem Xcode ou Android Studio.

Vantagens do React Native

Comunidade massiva — React Native tem a maior comunidade entre os frameworks multiplataforma. No GitHub, o projeto tem 117.000+ estrelas e 1800+ contribuidores. O npm baixa react-native 3 milhões+ de vezes por semana. Perguntas sobre React Native representam 5% de todas as perguntas no Stack Overflow na seção de desenvolvimento móvel.

Ecossistema JavaScript — desenvolvedores React usam as mesmas ferramentas da web: npm, Babel, ESLint, Prettier, Jest, TypeScript. A lógica de negócios pode ser reutilizada entre a versão web (React) e o aplicativo móvel (React Native). Bibliotecas como Redux, Zustand, React Query e React Hook Form funcionam em ambas as plataformas sem alterações.

Expo é um SDK e conjunto de ferramentas que simplifica o desenvolvimento React Native. O Expo fornece módulos prontos (câmera, notificações, mapas, OAuth), compilações em nuvem (EAS Build) e atualizações OTA (EAS Update). O Expo Go permite executar o aplicativo em um dispositivo físico sem Xcode ou Android Studio. De acordo com dados do Expo 2024, 70% dos novos projetos React Native usam Expo.

Atualizações OTA — um recurso disponível através do Expo Update e CodePush (Microsoft). Os desenvolvedores podem enviar atualizações do bundle JavaScript diretamente aos usuários sem passar pela revisão da App Store ou Google Play. Isso acelera a correção de bugs críticos de 2–5 dias (espera de revisão) para 1–2 horas.

Suporte a TypeScript incluído por padrão desde o React Native 0.71. O template do projeto inclui tsconfig.json, tipos para todos os componentes e suporte a modo estrito. Flow (tipagem estática do Facebook) também é suportado, mas a Meta recomenda oficialmente o TypeScript. O template TypeScript representa 85% dos novos projetos de acordo com a pesquisa State of React Native 2024.

Ecossistema e bibliotecas populares

npm é o registro principal de pacotes para React Native. A busca por bibliotecas é filtrada pela palavra-chave react-native. Para instalação, usa-se npm install ou yarn add. O React Native CLI vincula automaticamente dependências nativas (desde a versão 0.60). Para projetos Expo, a instalação é gerenciada via expo install, que seleciona a versão compatível da biblioteca.

Bibliotecas principais

@react-navigation/native — o padrão de fato para navegação no React Native. A biblioteca inclui Stack Navigator (transições animadas), Tab Navigator (menu inferior para iOS/Android), Drawer Navigator (menu lateral) e Material Top Tab. React Navigation 7.x (2024) introduziu configuração estática de rotas e suporte completo ao React 18 com useSyncExternalStore.

react-native-reanimated — uma biblioteca para animações de alto desempenho. Reanimated 3.x executa animações na thread de UI (worklet), ignorando a thread JS. Isso garante 60 FPS mesmo ao animar 100+ elementos. useSharedValue, useAnimatedStyle e withSpring substituem a API Animated da biblioteca padrão. Reanimated lida com gestos de toque através de react-native-gesture-handler.

@tanstack/react-query — uma biblioteca para gerenciamento de estado do servidor. React Query armazena em cache respostas da API, busca dados automaticamente ao mudar de rede (refetchOnReconnect) e suporta paginação com useInfiniteQuery. A versão 5.x inclui atualizações otimistas para UX — a interface é atualizada antes de receber a resposta do servidor e depois é ajustada.