Como Criar um App de Controle Financeiro Pessoal com React Native

Um app de controle financeiro pessoal e um dos melhores projetos para aprender React Native. Combina UI/UX, gerenciamento de estado, persistencia de dados e graficos — habilidades transferiveis para qualquer app. Este guia mostra como construir um do zero ao deploy.

Funcionalidades do MVP

O app tera: registro de receitas e despesas, categorizacao automatica, dashboard com resumo mensal, graficos de gastos por categoria, metas de economia, notificacoes de gastos excessivos, backup na nuvem.

Setup do projeto

npx create-expo-app FinControl –template blank-typescript
cd FinControl
npx expo install @react-navigation/native @react-navigation/bottom-tabs
npx expo install react-native-chart-kit react-native-svg
npx expo install @react-native-async-storage/async-storage
npx expo install expo-notifications expo-local-authentication

Estrutura de dados

Modelos simples mas eficientes:

// src/types/index.ts
interface Transacao {
id: string;
tipo: “receita” | “despesa”;
valor: number;
categoria: string;
descricao: string;
data: string; // ISO format
recorrente: boolean;
}

interface Categoria {
id: string;
nome: string;
icone: string;
cor: string;
orcamento_mensal: number | null;
}

interface ResumoMensal {
mes: string;
receita_total: number;
despesa_total: number;
saldo: number;
por_categoria: { categoria: string; total: number; percentual: number }[];
}

Tela de registro de transacao

// src/screens/NovaTransacao.tsx
import React, { useState } from “react”;
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from “react-native”;

const categorias = [
{ id: “alimentacao”, nome: “Alimentacao”, icone: “🍔”, cor: “#FF6B6B” },
{ id: “transporte”, nome: “Transporte”, icone: “🚗”, cor: “#4ECDC4” },
{ id: “moradia”, nome: “Moradia”, icone: “🏠”, cor: “#45B7D1” },
{ id: “lazer”, nome: “Lazer”, icone: “🎮”, cor: “#96CEB4” },
{ id: “saude”, nome: “Saude”, icone: “💊”, cor: “#FFEAA7” },
{ id: “educacao”, nome: “Educacao”, icone: “📚”, cor: “#DDA0DD” },
];

export default function NovaTransacao({ navigation }) {
const [tipo, setTipo] = useState(“despesa”);
const [valor, setValor] = useState(“”);
const [categoria, setCategoria] = useState(“”);
const [descricao, setDescricao] = useState(“”);

const salvar = async () => {
const transacao = {
id: Date.now().toString(),
tipo, valor: parseFloat(valor),
categoria, descricao,
data: new Date().toISOString(),
recorrente: false,
};
await salvarTransacao(transacao);
navigation.goBack();
};

return (

setTipo(“despesa”)}
>
Despesa

setTipo(“receita”)}
>
Receita

{categorias.map(cat => (
setCategoria(cat.id)}
>
{cat.icone} {cat.nome}

))}

Salvar

);
}

Dashboard com graficos

import { PieChart, LineChart } from “react-native-chart-kit”;
import { Dimensions } from “react-native”;

function DashboardScreen() {
const resumo = useResumoMensal();

const dadosPie = resumo.por_categoria.map(cat => ({
name: cat.categoria,
total: cat.total,
color: getCor(cat.categoria),
legendFontColor: “#333”,
}));

return (

= 0 ? “green” : “red”} />

);
}

Persistencia de dados

Para o MVP, AsyncStorage e suficiente. Para producao, migre para SQLite (expo-sqlite) ou WatermelonDB para melhor performance com grandes volumes de dados.

Para sync com a nuvem: Firebase Firestore e a opcao mais rapida de implementar. Supabase (PostgreSQL + auth + realtime) e uma alternativa open source. A sync permite que o usuario acesse seus dados em multiplos dispositivos.

Deploy e distribuicao

Expo EAS Build torna o deploy simples: eas build –platform all gera os binarios para iOS e Android. eas submit envia para App Store e Google Play. EAS Update permite enviar atualizacoes over-the-air sem passar pela review das lojas (para mudancas JS, nao nativas).

Monetizacao: versao gratuita com funcionalidades basicas, versao premium (assinatura mensal) com graficos avancados, exportacao de dados, metas ilimitadas e sync entre dispositivos.