Skip to content

This project is a Finance App UI built with Expo Router v3 and React Native. It features a custom bottom tab navigator and interactive pie charts powered by the react-native-gifted-charts library. The app is designed to be mobile-first and responsive, with a modern and sleek user interface.

Notifications You must be signed in to change notification settings

PHom798/Finance-APP-UI

Repository files navigation

Finance App in React Native with Expo Router

A sleek, mobile-first Finance App UI built with Expo Router v3 and React Native, featuring a custom bottom tab navigator and interactive pie charts powered by react-native-gifted-charts. This is an Expo project created with create-expo-app to create a Finance App UI in React Native. Along with App UI, here I've implemented custom bottom tabbar navigator with expo router v3 and pie chart with react native gifted charts package.

Libraries used in this project

📱 App Preview

Finance App in React Native with Expo Router

🚀 Features

  • Custom Bottom Tab Navigator using Expo Router v3

  • Interactive Pie Charts to visualize spending categories

  • Responsive UI with modern design principles

  • SVG Support via react-native-svg-transformer

🧰 Tech Stack

  • Expo — Managed workflow for rapid development

  • React Native Router (Expo Router) — File-based routing and deep linking

  • React Native Gifted Charts — Beautiful, customizable charts

  • React Native SVG Transformer — Import and render SVG assets

  • TypeScript — (Optional) static typing for safer code

📋 Prerequisites: Before you begin, ensure you have the following installed:

  • Node.js (v14 or newer)
  • npm (v6 or newer) or Yarn (v1.22 or newer)
  • Expo CLI (npm install -g expo-cli)
  • Expo Go app installed on your mobile device for testing

🔧 Installation

  1. Clone the repository:
  1. Install dependencies:
  • With npm:
  • npm install
  • or With yarn:
  • yarn install
  1. Start the development server:
  • npx expo start

Alternative commands:

  • Using npm npm run start

  • Using yarn yarn start

  1. Open the app:
  • Scan the QR code with Expo Go on your mobile device
  • Press a in the terminal to open on Android emulator
  • Press i in the terminal to open on iOS simulator

📱 Supported Platforms

  • iOS
  • Android

🤝 Contributing

  • Contributions, issues, and feature requests are welcome! Feel free to check issues page.
  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  • Open a Pull Request

About

This project is a Finance App UI built with Expo Router v3 and React Native. It features a custom bottom tab navigator and interactive pie charts powered by the react-native-gifted-charts library. The app is designed to be mobile-first and responsive, with a modern and sleek user interface.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published