minimax-ai/react-native-dev

O que react-native-dev faz?

Guia de desenvolvimento React Native e Expo cobrindo componentes, estilos, animações, navegação, gerenciamento de estado, formulários, rede, otimização de desempenho, testes, capacidades nativas e engenharia (estrutura de projeto, deployment, upgrades de SDK, CI/CD). Use ao: construir apps React Native ou Expo, implementar animações ou UI nativa, gerenciar estado, buscar dados, escrever testes, otimizar desempenho, publicar na App Store/Play Store, configurar CI/CD, atualizar o SDK Expo ou configurar Tailwind/NativeWind.

Componentes e UI

Componentes Core

• View: Container fundamental para layout (similar a div no web)
• Text: Exibe texto, com suporte a aninhamento e estilos
• ScrollView: Container rolável para conteúdo extenso
• FlatList: Lista virtualizada de alto desempenho para grandes conjuntos de dados
• TouchableOpacity: Botão com feedback visual de toque

Exemplo de Componente

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

const BotaoPersonalizado = ({ titulo, onPress }) => (
  <TouchableOpacity
    style={{
      backgroundColor: '#007AFF',
      padding: 12,
      borderRadius: 8,
    }}
    onPress={onPress}>
    <Text style={{ color: '#fff', fontSize: 16 }}>{titulo}</Text>
  </TouchableOpacity>
);

Estilização

StyleSheet

import { StyleSheet } from 'react-native';

const estilos = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  titulo: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

NativeWind / Tailwind

// Com NativeWind (Tailwind CSS para React Native)
import { View, Text } from 'react-native';

const MeuComponente = () => (
  <View className="flex-1 justify-center items-center bg-gray-100 p-4">
    <Text className="text-2xl font-bold text-gray-800">Olá, Mundo!</Text>
  </View>
);

Navegação

React Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={TelaHome} />
        <Stack.Screen name="Detalhes" component={TelaDetalhes} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Gerenciamento de Estado

Context API

import React, { createContext, useContext, useState } from 'react';

const ContextoUsuario = createContext();

export const ProvedorUsuario = ({ children }) => {
  const [usuario, setUsuario] = useState(null);
  return (
    <ContextoUsuario.Provider value={{ usuario, setUsuario }}>
      {children}
    </ContextoUsuario.Provider>
  );
};

export const useUsuario = () => useContext(ContextoUsuario);

Animações

Animated API

import { Animated, Button } from 'react-native';

const AnimacaoFade = () => {
  const opacidade = useRef(new Animated.Value(0)).current;

  const aparecer = () => {
    Animated.timing(opacidade, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={{ opacity: opacidade }}>
        <Text>Conteúdo animado aparecendo</Text>
      </Animated.View>
      <Button title="Aparecer" onPress={aparecer} />
    </View>
  );
};

Formulários e Rede

Fetch API

const buscarDados = async () => {
  try {
    const resposta = await fetch('https://api.exemplo.com/dados');
    const dados = await resposta.json();
    console.log('Dados recebidos:', dados);
  } catch (erro) {
    console.error('Erro na requisição:', erro);
  }
};

Testes

Jest + React Native Testing Library

import { render, fireEvent } from '@testing-library/react-native';
import MeuComponente from './MeuComponente';

test('renderiza e interage com o componente', () => {
  const { getByText } = render(<MeuComponente />);
  const botao = getByText('Clique aqui');
  fireEvent.press(botao);
  // Verificar resultado esperado
});

Otimização de Performance

useMemo e useCallback

import React, { useMemo, useCallback } from 'react';

const ComponenteOtimizado = ({ itens }) => {
  const total = useMemo(() => itens.reduce((soma, item) => soma + item.valor, 0), [itens]);
  
  const handlePress = useCallback((id) => {
    console.log('Item pressionado:', id);
  }, []);
  
  return (
    <FlatList
      data={itens}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => handlePress(item.id)}>
          <Text>{item.nome}: R$ {item.valor}</Text>
        </TouchableOpacity>
      )}
      keyExtractor={item => item.id}
    />
  );
};

Capacidades Nativas

Expo Camera

import { Camera } from 'expo-camera';

const ComponenteCamera = () => {
  const [permissao, concederPermissao] = Camera.useCameraPermissions();
  
  if (!permissao?.granted) {
    return (
      <View>
        <Text>Permissão de câmera necessária</Text>
        <Button title="Conceder Permissão" onPress={concederPermissao} />
      </View>
    );
  }
  
  return <Camera style={{ flex: 1 }} />;
};

Engenharia e Deployment

Estrutura de Projeto

app/
├── src/
│   ├── components/
│   ├── screens/
│   ├── services/
│   ├── hooks/
│   ├── contexts/
│   └── utils/
├── assets/
├── app.json
├── App.js
└── package.json

CI/CD com GitHub Actions

name: Build e Teste

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Instalar dependências
        run: npm install
      - name: Executar testes
        run: npm test

Atualização do SDK Expo

expo upgrade

Referências

• Documentação oficial React Native
• Documentação Expo
• NativeWind
• React Navigation