<aside> 🔥 Accelerate your React Native development with a boilerplate that handles authentication, state, styling, analytics, and more—so you can focus on building your app’s unique features.

</aside>

Welcome to AppCatalyst RN Documentation

Overview

Welcome to the official documentation for AppCatalyst RN, your ultimate React Native boilerplate. This guide is here to help you get started, customize, and maximize the potential of your app.

With AppCatalyst RN, you'll save countless hours on development and focus on what truly matters—your app’s features.

What You'll Find Her

• Getting Started: Set up the boilerplate in minutes.
• Key Features: Learn about built-in tools like authentication, theming, and state management.
• Customization: Tailor the code to match your vision.
• Third-Party Services: Integrate analytics, payments, and backend solutions effortlessly.
• Troubleshooting: Solve common issues with ease.
• Best Practices: Ensure your app is performant, scalable, and maintainable.

Whether you’re building a prototype or scaling for millions of users, this documentation is your trusted companion. Let’s build something amazing together!

After Purchase

Once you've successfully completed your purchase, here's what happens next:

1. Success Message: You’ll see a confirmation message on the screen.
2. Order Details: Your order information will be displayed for your reference.
3. Download the Boilerplate:
   • A link to download the latest version of the boilerplate will be provided.
   • The file will be in the following format: appcatalystrn-YYYYMMDD-vX.X.X.zip (e.g., appcatalystrn-20241219-v1.0.0.zip).
4. Extracting the Boilerplate:
   • After downloading, unzip the file to access the source code.
   • Inside, you’ll find everything you need to start building your React Native app.

It’s that simple—download, unzip, and start coding! 🎉

Quick Start

Follow these steps to get up and running with AppCatalyst RN in minutes:

1. Install dependencies:

   npm install
   

2. Convert expo go to native expo project:

   # This creates the android and ios directories for running your React code. If you modify the generated directories manually then you risk losing your changes the next time you run npx expo prebuild --clean.
   npx expo prebuild
   

   For more detailed information about native code generation and handling manual modifications, visit the Expo documentation on Continuous Native Generation.

3. Setup Environment Variables:

   • Copy the .env.example file to .env.
   • Replace placeholder values with your API keys and configuration settings.

4. Run the App:

   • iOS:

     
     npx expo run:ios
     

   • Android:

     npx expo run:android
     
     

5. Explore the Screens:

   Start building by modifying the prebuilt modules in the app directory.

Getting Started

Prerequisites

Before diving into the boilerplate, ensure you have the following installed and configured:

• Node.js (v16 or higher recommended)
• npm or yarn (for dependency management)
• Xcode (for iOS development)
• Android Studio (for Android development)

Refer to the React Native Environment Setup Guide for step-by-step instructions.

Configure Environment Variables

The boilerplate uses .env files to manage sensitive credentials and configurations.

1. Copy the .env.example file to .env:

   cp .env.example .env
   
   

2. Edit the .env file to include your API keys, base URLs, or other required settings.

Default Keys to Add:

• EXPO_PUBLIC_NODE_ENV= Environment
• EXPO_PUBLIC_SUPABASE_URL= This is the supabaes url for your project in the format https://<project-id>.supabase.co
• EXPO_PUBLIC_SUPABASE_ANON_KEY= This is the supabase anon key for your project
• EXPO_PUBLIC_APPLE_REDIRECT_URI= This is the apple redirect uri for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_APPLE_BUNDLE_ID= This is the apple bundle id for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_APPLE_TEAM_ID= This is the apple team id for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_REVENUE_CAT_PUBLIC_API_KEY= This is the revenue cat public api key for your project
• EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID= This is the google ios client id for your project
  • This is for auth with google
• EXPO_PUBLIC_ONESIGNAL_APP_ID= This is the onesignal app id for your project
• EXPO_PUBLIC_POSTHOG_API_KEY= This is the posthog api key for your project
• EXPO_PUBLIC_TWITTER_API_KEY= This is the twitter api key for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_TWITTER_API_SECRET=
  • This is not required. This is yours.
• EXPO_PUBLIC_TWITTER_BEARER_TOKEN=
  • This is not required. This is yours.
• EXPO_PUBLIC_TWITTER_CLIENT_ID=
  • This is not required. This is yours.
• EXPO_PUBLIC_API_BASE_URL= This is the base url for your api
  • This is not required. Use if you have server for api.
• EXPO_PUBLIC_SENTRY_ORG= This is the sentry org for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_SENTRY_PROJECT= This is the sentry project for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_SENTRY_URL= This is the sentry url for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_SENTRY_AUTH_TOKEN= This is the sentry auth token for your project
  • This is not required. This is yours.
• EXPO_PUBLIC_SENTRY_DSN= This is the sentry dsn for your project

Default Prisma Keys:

The following keys should be set in the .env file located in the prisma directory at the root of your project:

• DATABASE_URL= This is the database url for your project
• DIRECT_URL= This is the direct url for your project (required for connection pooling)
• SHADOW_DATABASE_URL= This is the shadow database url for your project (optional)

Running App

Once your environment is configured, you can run the app:

For iOS:

# Development build
npx expo run:ios

For Android:

# Development build
npx expo run:android

Make sure you have Xcode installed for iOS development and Android Studio with necessary SDKs for Android development.

Note: If you haven't made any native changes or haven't added native bind expo packages,

you don't need to use npx expo run:ios or npx expo run:android.

Instead, you can use:

npx expo start -c

This command clears the cache and starts the development server, which is faster and more convenient for pure JavaScript/TypeScript development.

Folder Structure

Here's a quick overview of the folder structure and its purpose: