QuickLaunchReactNativeKit

Overview

Welcome to QuickLaunchReactNativeKit! This kit is designed to expedite the development process of common React Native projects by providing pre-built frameworks for essential functionalities like login, signup, settings, and more. With QuickLaunchReactNativeKit, developers can seamlessly integrate these features into their projects, saving valuable time and effort. Additionally, this kit offers multiple themes to enhance the aesthetic appeal of your app.

Your new QuickLaunchReactNativeKit project comes equipped with a comprehensive set of libraries, already configured and ready for use. Here's what's included:

React Native: The foundation for building cross-platform mobile applications.
React Navigation: A powerful library for handling navigation in React Native apps.
Redux Toolkit: A Redux library that simplifies state management.
Redux Persist: Enables seamless persistence of Redux state.
TypeScript: Provides type safety and improved code quality.
AsyncStorage: Allows for asynchronous, persistent storage in React Native apps.
axios: A versatile HTTP client for making requests to REST servers.
In-app update: Facilitates seamless updates to your app within the application itself.
Dark and Light mode support: Enhances user experience by offering multiple color themes.
Multi-language support: Enables localization and internationalization of your app.
SVG icons support: Easily integrate scalable vector graphics into your app.
Prebuilt UI: Accelerates development with pre-designed user interface components.
Social sign-ins: Simplifies user authentication with Google and Apple sign-ins.
Additional prebuilt components: Explore a variety of pre-built components to enhance your app's UI.

And much more!

Example Screens

Utilize our pre-built screens to jumpstart your app development:

Authentication: Simplify user sign-in, sign-up, and password recovery processes.
Settings: Customize user preferences effortlessly for a personalized experience and account management.
Navigation: Seamlessly organize app content with tab and drawer views.

Explore all available screens

With QuickLaunchReactNativeKit, expedite your React Native project and craft exceptional mobile experiences. Happy coding!

Installation

To get started with QuickLaunchReactNativeKit, follow these steps:

Prerequisites

For React Native, make sure you're set up for React Native by following the official documentation.
Ensure you have Node.js LTS release or greater installed.
Install recent versions of Xcode and Android Studio.
Recommended: Yarn or npm package manager.
Recommended: macOS (for iOS development).

Running the CLI

Get walked through the prompts for the different options to start your new app

npx react-native@latest init <ProjectName> --template=https://github.com/mindfiredigital/QuickLaunchReactNativeKit.git

Post-Install Setup

Step 1: Theme Configuration

During setup, you have the option to customize your theme or choose from preset themes.

Option 1: Custom Theme Configuration

You'll be prompted to define custom theme values.
Follow the prompts to input hex color values for each theme property.
Upon completion, a custom theme file will be generated successfully.

Option 2: Preset Theme Configuration

Select a theme from the available options. Refer to the Theme Section for details.
The chosen theme will be applied to your project.

Step 2: Choose Navigation Type

Select your preferred navigation type: Tab or Drawer, as per your app's structure. Refer to the Navigation Types section for more information.
Navigation type will be set accordingly.

Project Initialization Complete

Your React Native project has been generated with the QuickLaunchReactNativeKit template. You're now ready to start development with your chosen theme and navigation type configurations. Follow the instructions displayed in the terminal to seamlessly run your app on both iOS and Android platforms.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Documentation

Tech Stack - List of the key libraries, tools, and utilities used in the project's tech stack, along with their respective versions and brief descriptions.
Folder Structure - An overview of the project folder structure
Components - QuickLaunchReactNativeKit's built-in UI components.
- Button
- Card
- Header
- Icon
- MenuItem
- OTPTextField
- Screen
- Separator
- Spinner
- Text
- TextField
- WebViewApp
Theme - How to customize the look and feel of your app
Navigation - How React Navigation is used to navigate through your screens
Utils - A range of utility functions and components designed to streamline common tasks.
API - Handle network calls using Axios, enabling efficient data retrieval, manipulation, and transmission for your application.
Assets - This folder houses fonts, images, and SVG icons used within the project's user interface and design elements.
Screens - Utilize our pre-built screens to jumpstart your app development.
i18n - Comprehensive Multilanguage Support Module
Service - The Service folder hosts key files for Signin with Apple, Google, biometric authentication, and in-app updates.
Store - QuickLaunchReactNativeKit utilizes Redux-Toolkit and Redux-Persist for state management.