SaaS - Login
SaaS - Recover
SaaS - Register
SaaS - Dashboard Options
SaaS - Dashboard
SaaS - Realtime
SaaS - Audience
SaaS - Traffic
SaaS - Search Options
SaaS - Search
SaaS - Notifications
SaaS - Chat
SaaS - Inbox
SaaS - Calendar
SaaS - Calendar Entry
SaaS - Appointments
SaaS - Activity Options
SaaS - Activity
SaaS - Boards
SaaS - File Manager
SaaS - File Entry
SaaS - Profile
SaaS - Account
SaaS - Settings

SaaS Dashboard App Starter Kit

$129

Kickstart your design process for a wide variety of apps such as calendar, analytics, virtual assistant, file manager, chat, maps, project management, contacts and much more.


  • Screens

    25+
  • Expo

    SDK 38
  • OS support

    iOS & Android
  • Highlights

    Quick Start Documentation Fully Customizable React-Native

BUY NOW for $129 DOWNLOAD DEMO

Our React Native SaaS Dashboard App and components are easy to use in order to configure it on your own and get it ready for production.

Make sure you have npm/yarn installed. After you've installed any of those, install expo by writing the following in your terminal console:
npm install -g expo-cli (or yarn global add expo-cli, whichever you prefer).

Now you're all set up. Navigate your way into the project's directory and write npm install or yarn install.
This will install all dependencies that SaaS Dashboard App needs in order to function properly.

To run directly to a simulator (iOS/Android) just run npm run ios or npm run android. Open up your favorite text editor/IDE and an Android/iOS simulator.

These are the main dependencies used inside SaaS Dashboard App:

          
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "5.1.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"dayjs": "^1.8.29",
"expo": "^38.0.0",
"expo-device": "~2.2.1",
"expo-ui-kit": "^0.1.0",
"react": "16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
"react-native-calendars": "^1.300.0",
"react-native-circular-progress": "^1.3.6",
"react-native-gesture-handler": "~1.6.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-modal": "^11.5.6",
"react-native-reanimated": "~1.9.0",
"react-native-responsive-linechart": "^2.2.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-svg": "12.1.0",
"react-native-svg-charts": "^5.4.0"
          
          

For development dependencies we used the following:
        
"@babel/core": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^3.5.0",
"@typescript-eslint/parser": "^3.5.0",
"babel-preset-expo": "^8.2.3",
"eslint": "^7.4.0",
"eslint-config-universe": "^3.0.2",
"eslint-plugin-react-native": "^3.8.1",
"prettier": "^2.0.5",
"typescript": "~3.9.5"
        
        

For code quality checks we used eslint, and to check the project for any errors or warning run the following command: npm run lint

Side notes:
The project code is based on the latest Expo SDK version 38 (expo.io), easy to maintain and update. A bonus part is that the project can be ejected to React-Native project and implement non-expo modules.

Limitations:

  • Modal component: vertical draggable is not fully supported
  • Profile screen: there is a small gap between the scene & tabs view due to how react-navigation is nesting scenes/screens

        
.
├── App.js
├── app.json
├── assets
│ ├── background
│ └── icons
├── components
│ ├── Block.js
│ ├── Button.js
│ ├── Card.js
│ ├── Dropdown.js
│ ├── Icon.js
│ ├── Input.js
│ ├── Modal.js
│ └── Text.js
├── constants
│ ├── icons.js
│ ├── images.js
│ ├── mock.js
│ └── theme.js
├── navigation
│ ├── BtnAdd.js
│ ├── BtnBack.js
│ ├── BtnNotifications.js
│ ├── BtnOptions.js
│ ├── BtnSearch.js
│ ├── auth.js
│ └── tabs.js
├── package.json
├── screens
│ ├── Activity
│ │ ├── Activities.js
│ │ ├── Boards.js
│ │ ├── FileFolder.js
│ │ └── FileManager.js
│ ├── Auth
│ │ ├── ResetPassword.js
│ │ ├── SignIn.js
│ │ └── SignUp.js
│ ├── Calendar
│ │ ├── Appointments.js
│ │ └── Calendar.js
│ ├── Chat
│ │ ├── ChatList.js
│ │ ├── Inbox.js
│ │ └── Messages.js
│ ├── Home
│ │ ├── Audience.js
│ │ ├── Dashboard.js
│ │ ├── Realtime.js
│ │ └── Traffic.js
│ ├── Notifications.js
│ ├── Profile
│ │ ├── Account.js
│ │ ├── Contacts.js
│ │ ├── Profile.js
│ │ ├── Settings.js
│ │ └── User.js
│ └── Search.js
└── utils
├── deviceSize.js
├── hasNotch.js
├── helpers.js
└── hooks.js
        
      

Expo - https://expo.io
Expo apps are the same thing as React Native apps but they're using the Expo SDK. This SDK enables developers to easily access a lot of native features like the camera, local storage, and other features. Expo also provides a lot of other UI components like icons or blur views in order to enhance the user experience.

react-navigation v5 - https://reactnavigation.org/
We love react-navigation. We consider it to be the coolest navigation library out there! Our whole navigation was built with this cool library! For anything API related go on their website.

expo-ui-kit - https://github.com/react-ui-kit/expo-ui-kit
React-Native UI library in the React Native for Expo projects. The library include basic components to get your project started. Each component has predefined styles and options to speed up the development time. Take a look under the hood and give it a try. The expo-ui-kit support is always ready to reply to any of your issues.