Quick start

Soft UI React Native is a mobile UI template built over Galio.io, React Native and Expo to allow you to create powerful and beautiful mobile applications.

Directory Structure

The directory structure for the free version:

              ├── App.tsx
├── README.md
├── app.json
├── assets
├── babel.config.js
├── package.json
├── src
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   │   └── images
│   ├── components
│   │   ├── Article.tsx
│   │   ├── Block.tsx
│   │   ├── Button.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Image.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Product.tsx
│   │   ├── Switch.tsx
│   │   ├── Text.tsx
│   │   └── index.tsx
│   ├── constants
│   │   ├── index.ts
│   │   ├── light.ts
│   │   ├── mocks.ts
│   │   ├── regex.ts
│   │   ├── theme.ts
│   │   ├── translations
│   │   │   ├── en.json
│   │   │   └── index.ts
│   │   └── types
│   │       ├── components.ts
│   │       ├── index.ts
│   │       └── theme.ts
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useData.tsx
│   │   ├── useScreenOptions.tsx
│   │   ├── useTheme.tsx
│   │   └── useTranslation.tsx
│   ├── navigation
│   │   ├── App.tsx
│   │   ├── Menu.tsx
│   │   └── Screens.tsx
│   └── screens
│       ├── Articles.tsx
│       ├── Components.tsx
│       ├── Home.tsx
│       ├── Pro.tsx
│       ├── Profile.tsx
│       ├── Register.tsx
│       └── index.ts
└── tsconfig.json

            

PRO

The directory structure for the pro version:

              .
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── package.json
├── src
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   │   └── images
│   ├── components
│   │   ├── Article.tsx
│   │   ├── Block.tsx
│   │   ├── Button.tsx
│   │   ├── Calendar.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Image.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Product.tsx
│   │   ├── Switch.tsx
│   │   ├── Text.tsx
│   │   └── index.tsx
│   ├── constants
│   │   ├── dark.ts
│   │   ├── index.ts
│   │   ├── light.ts
│   │   ├── mocks.ts
│   │   ├── regex.ts
│   │   ├── theme.ts
│   │   ├── translations
│   │   │   ├── en.json
│   │   │   ├── fr.json
│   │   │   └── index.ts
│   │   └── types
│   │       ├── components.ts
│   │       ├── index.ts
│   │       └── theme.ts
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useData.tsx
│   │   ├── useScreenOptions.tsx
│   │   ├── useTheme.tsx
│   │   └── useTranslation.tsx
│   ├── navigation
│   │   ├── App.tsx
│   │   ├── Menu.tsx
│   │   └── Screens.tsx
│   └── screens
│       ├── About.tsx
│       ├── Agreement.tsx
│       ├── Articles.tsx
│       ├── Booking.tsx
│       ├── Chat.tsx
│       ├── Components.tsx
│       ├── Extras.tsx
│       ├── Home.tsx
│       ├── Login.tsx
│       ├── Notifications.tsx
│       ├── NotificationsSettings.tsx
│       ├── Privacy.tsx
│       ├── Profile.tsx
│       ├── Register.tsx
│       ├── Rental.tsx
│       ├── Rentals.tsx
│       ├── Settings.tsx
│       ├── Shopping.tsx
│       └── index.ts
└── tsconfig.json

            

Constants

This folder contains all constants we’re using throughout our React-Native cross-platform app.

Screens

Contains all screens created for Soft UI Pro React-Native.

Components

Components ready to be used and transform however you’d like.

Customize

Customizing the App will be really easy for you. This is due to the fact we provided you well prepared code. This makes it simple to be able to dig through the code and hence without problems regarding customization.

You want to change a color thtought the whole app? Just go to the light.ts or dark.ts and modify any color or even add one yourself.

Adding Screens

Adding screens is really easy, all you have to do is go to the navigation directory and edit the Screens.tsx file. If you want to add/edit a new screen checkout the existing example from Stack.Navigator

If you want to add it inside the Drawer menu under the src/navigation/Menu.tsx file, all you have to do is go there and you’ll find the screens object list. Next in line should be your own route, for example you could write something like this:

{name: 'Your Screen', to: 'YourScreen', icon: YourScreenIcon}