React Native no desenvolvimento móvel: o que é, conceitos-chave e como funciona

Fundamentos (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — extensão sintática do JavaScript para descrever UI. Parece HTML, mas funciona através do React.createElement(). Expressões JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — função que retorna JSX. Aceita props como argumento. Padrão moderno do React (antes do React 16.8 eram usados Class Components). Hooks — funções para acessar estado e ciclo de vida a partir de Functional Component. Regras dos Hooks: apenas no nível superior, apenas em Functional Components.

Referência de Hooks

useState — estado local. useEffect — efeitos colaterais. useContext — acesso a Context. useRef — ref mutável. useCallback — memorização de função. useMemo — memorização de valor. Custom Hooks — lógica reutilizável: function useDebounce(value, delay).

// Functional Component com hooks no React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — retorna [value, setValue]. setValue — substitui (não mescla como setState em Class). Para objetos: setUser(prev => ({ ...prev, name: 'New' })). useEffect — executa após a renderização. Array de dependências: [] — uma vez (montagem), [dep] — quando dep muda, undefined — toda renderização. Função de limpeza — return () => {}. useContext — const value = useContext(MyContext). Requer Context.Provider acima na árvore.

useRef — objeto mutável que persiste valor entre renderizações. .current — mutação. Usado para: acesso a elementos nativos (ref={inputRef}), armazenar valores anteriores, timers. useCallback — retorna uma função memoizada. const handlePress = useCallback(() => {}, [dep]). useMemo — retorna um valor memoizado. const sorted = useMemo(() => data.sort(), [data]). Use useMemo para cálculos caros.

useState — para estado simples. useEffect — para chamadas API e inscrições. useCallback/useMemo — para otimização. IT Sectr recomenda não memoizar tudo — apenas quando houver problemas reais de desempenho.

Custom Hooks

Custom Hook — função que usa hooks nativos. Nome começa com use*. Exemplos: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks são a principal forma de reutilizar lógica em React Native. IT Sectr recomenda extrair lógica de negócio em Custom Hooks e manter componentes limpos (apenas JSX + estilos).

Componentes (View, Text, FlatList, ScrollView, SafeAreaView)

View — contêiner básico (análogo a div). Text — texto (único componente para texto). TextInput — entrada de texto. ScrollView — contêiner rolável. FlatList — lista virtualizada para grandes dados. SectionList — FlatList com seções. SafeAreaView — preenchimento automático da Safe Area (notch, barra de status). Pressable — substituto moderno para TouchableOpacity. useColorScheme — detecção de tema escuro/claro.

Otimização de FlatList

FlatList — virtualização: apenas itens visíveis + windowSize são renderizados. Otimização: 1) keyExtractor — chave única, 2) getItemLayout — altura fixa (pula medição onLayout), 3) React.memo para renderItem, 4) maxToRenderPerBatch (padrão 10), 5) windowSize (padrão 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navegação em React Native

React Navigation — pilha de navegação padrão. NativeStackNavigator — animação nativa (push/pop). TabNavigator — abas inferiores. DrawerNavigator — menu lateral. NavigationContainer — componente raiz de navegação. Deep linking — configuração de links para links externos. Fluxo de autenticação — navegação condicional: isAuth ? AppStack : AuthStack. IT Sectr recomenda NativeStackNavigator para telas principais e TabNavigator para navegação de primeiro nível.

Estilos (StyleSheet)

StyleSheet.create() — criação de estilos. Todas as propriedades em camelCase: backgroundColor, fontSize, marginTop. Flexbox — modelo de layout padrão (flexDirection: 'column'). Sem cascata CSS, sem herança, sem seletores. Inline styles — funcionam mas não são recomendados. StyleSheet.compose() — combinação de estilos. Platform.select — estilos por plataforma: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — gerenciamento de insets de safe area.

Styled Components e CSS-in-JS

Styled Components — biblioteca para CSS-in-JS em React Native. Restyle — theming + estilos responsivos. NativeWind — Tailwind CSS para React Native. Unistyles — estilos rápidos com CSS atômico. Modo escuro — useColorScheme + estilos dinâmicos. IT Sectr recomenda StyleSheet.create pela simplicidade e NativeWind para projetos com sistema de design.

Animação (Animated API)

Animated API — animação declarativa. Animated.Value — valor de animação. Animated.timing — animação simples. Animated.spring — animação com mola. Animated.View — View animável. useNativeDriver — animação na thread nativa (transform, opacity — suportados). Animated.loop — animação em loop. LayoutAnimation — animação automática ao mudar layout. reanimated 2/3 (biblioteca) — alternativa mais performática. Metro Bundler — empacotador JavaScript. Empacota JS + assets em um bundle. Suporta Fast Refresh (Hot Reload). Hermes — motor JS otimizado para mobile: inicialização rápida, menos memória. Padrão desde RN 0.70+.

Gesture Handler e Animações

React Native Gesture Handler — processamento nativo de gestos. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API declarativa de gestos. Reanimated + Gesture Handler — combinação para animações a 60fps com gestos. react-native-skia — renderização GPU para gráficos 2D complexos. IT Sectr recomenda Reanimated 3 para todas as animações mais performáticas que Animated API.

Redes (fetch, AsyncStorage, API)

fetch — cliente HTTP nativo. Suporta GET, POST, headers, body. Axios — biblioteca popular com interceptores. AsyncStorage — armazenamento chave-valor (similar a UserDefaults). MMKV — alternativa rápida ao AsyncStorage do WeChat. react-native-keychain — armazenamento seguro de tokens. React Query (TanStack Query) — gerenciamento de estado do servidor: cache, revalidação, paginação. IT Sectr recomenda React Query para requisições API e MMKV para armazenamento local.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules e Turbo Modules

Native Module — ponte entre JS e código nativo (Java/Kotlin para Android, ObjC/Swift para iOS). Permite chamar APIs nativas do JS. Turbo Modules (New Architecture) — substituição dos antigos Native Modules. Chamada síncrona, tipagem via Codegen, menos overhead. Fabric Renderer — novo renderizador com layout síncrono. JSI (JavaScript Interface) — acesso direto do JS a objetos nativos sem ponte. IT Sectr recomenda Turbo Modules para novos projetos e Native Modules para existentes.

// Módulo nativo Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Testes (Jest, React Native Testing Library)

Jest — executor de testes padrão. describe/it/expect. React Native Testing Library — teste de componentes. render, fireEvent, waitFor. screen.getByText, getByTestId — busca. userEvent — simulação de ações. Testes Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — simulação de API. Detox — testes E2E para RN (grey-box, nativo). IT Sectr recomenda React Native Testing Library para componentes e Detox para cenários ponta a ponta.

CodePush (App Center) — atualizações OTA do bundle JS sem publicar na App Store/Google Play. Usado para: correções urgentes, testes A/B, alterações de conteúdo. Limitações: não pode alterar código nativo. Alternativas: EAS Update (Expo), react-native-update. IT Sectr recomenda CodePush para correções urgentes e EAS Update para projetos Expo.

Expo — framework para React Native. Managed workflow — todas as configurações via app.json. Development builds — módulos nativos personalizados sem eject. Expo SDK — módulos nativos: câmera, biometria, notificações. EAS Build — compilação em nuvem. Expo Router — roteamento baseado em arquivos (similar a Next.js). IT Sectr recomenda Expo para novos projetos e bare RN para projetos com personalização nativa profunda.