πŸš€
Tutorial

Getting Started with VibeKit: Your First React Native App in 10 Minutes

Learn how to set up and customize VibeKit to build your first React Native app quickly and efficiently. It's easier than making coffee!

Sarah ChenSarah Chen
January 15, 2024
8 min read
React Native
Tutorial
Getting Started
VibeKit

Getting Started with VibeKit: Your First React Native App in 10 Minutes ⚑

Welcome to VibeKit! In this tutorial, we'll walk you through setting up your first React Native app using our amazing boilerplate. It's going to be easier than making your morning coffee! β˜•

What You'll Need

Before we dive in, make sure you have:

  • Node.js (v16 or higher)
  • React Native CLI
  • Android Studio or Xcode
  • A cup of coffee (optional but recommended) β˜•

Step 1: Clone VibeKit

First, let's get VibeKit on your machine:

git clone https://github.com/vibecoders/vibekit.git
cd vibekit
npm install

Step 2: Configure Your App

VibeKit comes with a simple configuration file where you can customize your app:

// config/app.js
export default {
  appName: 'MyAwesomeApp',
  primaryColor: '#6366f1',
  enablePushNotifications: true,
  enableAnalytics: true
};

Step 3: Run Your App

Now for the magic moment! Let's run your app:

# For iOS
npm run ios

# For Android
npm run android

What's Included?

VibeKit comes packed with amazing features:

  • πŸ” Authentication System - Complete login/signup flow
  • 🎨 Beautiful UI Components - 50+ pre-built components
  • πŸ“± Navigation - Pre-configured React Navigation
  • πŸŒ™ Dark Mode - Built-in theme switching
  • πŸ“Š State Management - Redux Toolkit setup
  • πŸ§ͺ Testing - Jest and React Native Testing Library

Next Steps

Congratulations! You now have a fully functional React Native app running. Here's what you can do next:

  1. Customize the theme colors
  2. Add your own screens
  3. Configure authentication providers
  4. Deploy to app stores

Happy coding! πŸš€

Was this page helpful?

Help us improve our documentation