React Native App Installation

This guide will walk you through setting up and running the MagicUI mobile application.

Prerequisites

Ensure you have set up your development environment as described in the Requirements section.

1. Install Dependencies

Navigate to the project directory in your terminal and install the Node modules.

npm install
# or
yarn install

2. iOS Setup (Mac Only)

If you are building for iOS, you need to install the CocoaPods dependencies.

cd ios
pod install
cd ..

3. Configuration

Before running the app, you need to connect it to your WordPress site.

1. Open src/config.ts (or src/constants/config.js depending on your version).

2. Update the Base URL with your website URL (e.g., https://your-store.com).

3. This endpoint is used to retrieve configuration data for the mobile application. Requests must include the X-API-Key header. Define it in /src/config/config.ts.

// ============================================
// MagicUI API CONFIGURATION
// API Key and Config URL for fetching settings from WordPress
// ============================================

// Paste the full config endpoint URL from WordPress plugin settings
export const MAGICUI_CONFIG_URL = 'http://magicuidemo.local/wp-json/magicui/v1/config';

// Set this in WordPress Admin > Settings > Magic UI
export const MAGICUI_API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

4. Running the App

iOS

Start the Metro bundler and run the app on the iOS Simulator.

npm run ios

Android

Start the Metro bundler and run the app on an Android Emulator or connected device.

npm run android

Troubleshooting

If you encounter issues during the build process:

• iOS: Try verifying your Ruby version or cleaning the build folder (Product > Clean Build Folder in Xcode).

• Android: Ensure your ANDROID_HOME environment variable is set correctly.