React Native Expense App Theme

React Native Expense App Theme 4.0.0

React Native based Expense Managing App to track daily expenses, compatible on both iOS & Android. Build your own expense tracking app using this UI theme saving development time to build screens from scratch.
Built using NativeBase, React Navigation, Redux.
Full interaction with fake Backend API using Axios.js
Inspired by Invision's UI Kit, DO

Note: This product is available with Expo Client.


Development Environment
Demo Links Available Below

All the screens you'd want!

Fully customizable, ready-to-use screens for users with easily configurable application design.

  • ● Splash Screen
  • ● Login
  • ● Sign Up
  • ● Forgot Password
  • ● Drawer
  • ● My Expenses
  • ● Add Expense
  • ● Categories
  • ● Select Category
  • ● Add Category
  • ● Expenses Calendar
  • ● Expenses Analytics
  • ● Search & Export
  • ● Profile
  • ● Settings

React Native Expense App Theme

Technologies Used

  • React Native
  • CRNA
  • NativeBase
  • React Navigation
  • Redux
  • Redux Form
  • Axios.js
React Native Expense App Theme
React Native Expense App Theme

Fetching Features

  • Power-packed with Redux, NativeBase
  • Easy Routing & Navigation using React Navigation​
  • Integrated with CRNA & Expo
  • Full interaction with fake Backend API using Axios.js​ and Redux middleware to add JWT Access Token to each api request
  • OpenID Connect (OIDC) authentication and JWT token management Using Expo AuthSession
  • Shared React & React Native structure, code base for both IOS and Android
  • Mass of UI elements, components to quickly build an awesome expense app
    Detailed article is available in NativeBase blog.

Quality Code

  • ESLint for code quality
  • Husky to prevent bad commit, push
  • Test & coverage using Jest & Enzyme
  • Prettier for pretty, formatted JavaScript code

Package

React Native Expense App

  • ● @expo/vector-icons: 10.0.6
  • ● axios: 0.19.0
  • ● axios-mock-adapter: 1.17.0
  • ● color: 3.1.2
  • ● es6-symbol: 3.1.2
  • expo: 35.0.0
  • ● expo-asset: 7.0.0
  • ● expo-font: 7.0.0
  • ● jwt-decode: 2.2.0
  • ● lodash: 4.17.15
  • ● moment: 2.24.0
  • native-base: 2.13.8
  • ● react: 16.8.3
  • react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz
  • ● react-native-calendars: 1.212.0
  • ● react-native-carousel-view: 0.5.1
  • ● react-native-datepicker: 1.7.2
  • ● react-native-easy-grid: 0.2.2
  • ● react-native-gesture-handler: 1.3.0
  • ● react-native-reanimated: 1.3.0
  • ● react-native-snap-carousel: 3.8.2
  • ● react-native-svg: 9.9.2
  • ● react-native-swipe-list-view: 2.0.3
  • ● react-navigation: 4.0.10
  • ● react-navigation-drawer: 2.2.2
  • ● react-navigation-stack: 1.9.4
  • ● react-redux: 7.1.1
  • redux: 4.0.4
  • ● redux-devtools-extension: 2.13.8
  • ● redux-form: 8.2.6
  • ● redux-thunk: 2.3.0
  • ● victory-native: 33.0.0
  • ● babel-eslint: 10.0.3
  • ● babel-preset-expo: 7.0.0
  • ● enzyme: 3.10.0
  • ● enzyme-adapter-react-16: 1.15.1
  • ● enzyme-to-json: 3.4.2
  • eslint: 6.5.1
  • ● eslint-config-prettier: 6.4.0
  • ● eslint-plugin-import: 2.18.2
  • ● eslint-plugin-jsx-a11y: 6.2.3
  • ● eslint-plugin-prettier: 3.1.1
  • ● eslint-plugin-react: 7.16.0
  • ● eslint-plugin-react-native: 3.7.0
  • ● husky: 3.0.8
  • ● jest-expo: 35.0.0
  • ● json-server: 0.15.1
  • ● lint-staged: 9.4.2
  • ● prettier: 1.18.2
  • ● react-addons-test-utils: 15.6.2
  • ● react-dom: 16.8.3
  • ● react-native-debugger-open: 0.3.22
  • ● react-native-dotenv: 0.2.0
  • ● react-test-context-provider: 2.2.0
  • ● react-test-renderer: 16.8.3
  • ● redux-mock-store: 1.5.3

BROUGHT TO YOU BY

Start building your app today!

Get Started