OneEntry: Shopping online on React Native

Table of Contents

1. Project Overview
2. Features
3. Architecture
4. Prerequisites
5. Quick Start
6. Configuration
   • 1. OneEntry CMS
   • 2. Environment variables
   • 3. App identifiers
   • 4. Firebase (push notifications)
   • 5. Google Sign-In (optional)
   • 6. Stripe (payments)
7. Run the app
8. Error handling
9. Detailed docs

---

Project overview

This mobile application 📱 showcases the capabilities of the OneEntry CMS with React Native. All app data is sourced from OneEntry — you can customize the entire catalog, pages, forms, and content directly in the CMS admin panel without changing the app code.

The app is built with Expo (Expo Prebuild) and covers the full e-commerce flow: sign up, browse catalog with filters, add to favorites/cart, place an order via Stripe, and receive push notifications for order events.

Home	Catalog	Order	Profile	Menu

Features

All interactions with the OneEntry CMS are powered by the OneEntry SDK for JavaScript.

• 📝 User creation: Register users via different providers (email, phone) with customizable data fields.
• ✅ User Activation: Activate users via one-time codes (e.g. email verification).
• 🔐 OAuth: Optional Google Sign-In.
• 🔄 State Management: Redux Toolkit.
• 🛒 Shop Catalog: Unlimited products managed from the CMS.
• 🔍 Advanced Filtering: Configurable filters over any product attribute.
• 💡 Product Recommendations: Cross-sell / up-sell blocks.
• 🖼️ Block Content: CMS-driven Block entities.
• 📋 Feedback Forms: Customizable, with captcha.
• 💳 Order Creation and Purchases: Stripe integration.
• 📜 Order History: Per-user order records.
• 📬 Event Notifications: Email, push, and WebSocket delivery from OneEntry.
• 🚀 TypeScript: Fully typed codebase.
• 🎨 Tailwind (NativeWind): Utility-first styling.

Architecture

File(s)	Description
.env	OneEntry CMS + OAuth secrets (see .env.example)
/src/api	API methods, hooks and OneEntry SDK setup
/src/components	Components used directly on pages
├─ /auth	Components for auth pages (login, registration)
├─ /content	Components for content pages (order creation, etc.)
├─ /shared	Reusable components used across multiple pages
└─ /ui	Generic UI elements (buttons, modals, inputs, etc.)
/src/hooks	Custom hooks
/src/pages	Application screens
/src/navigation	React Navigation configuration
/src/state	Redux Toolkit slices and core reducers
/src/types	TypeScript types (including @env module declaration)
/src/utils	Helper functions/constants

Key Principles

• Separation of concerns. Auth and content logic/components are strictly separated.
• Pages are containers. /src/pages files are thin layouts that delegate to components.
• Colocated hooks. Feature-specific hooks live next to their components; universal hooks live in hooks/shared/.

Prerequisites

Before you start make sure you have:

• Node.js ≥ 18 and yarn (or npm).
• Watchman (recommended on macOS).
• Xcode (for iOS) with a valid Apple Developer account.
• Android Studio with an emulator or a physical device.
• CocoaPods (sudo gem install cocoapods) for iOS.
• A OneEntry account: https://oneentry.cloud/.
• (Optional) Firebase project for push notifications.
• (Optional) Google Cloud OAuth credentials for Google Sign-In.
• (Optional) Stripe account for payments.

Quick Start

# 1. Clone the repository
git clone <YOUR_REPO_URL>
cd new-shop-rn

# 2. Install dependencies
yarn install

# 3. Copy the env template and fill in your OneEntry credentials
cp .env.example .env
# edit .env — set at least PROJECT_URL and APP_TOKEN

# 4. (Optional) Copy Firebase templates and replace them with real files
cp GoogleService-Info.plist.example GoogleService-Info.plist
cp google-services.json.example google-services.json
# then replace the contents with the real files from the Firebase console

# 5. Adjust app.json (bundleIdentifier, package, appleTeamId, EAS projectId)

# 6. Run the app
yarn ios      # or: yarn android

Note: This app uses native modules (Firebase, Google Sign-In) and will not run in Expo Go. Use yarn ios / yarn android — they invoke expo run:* and generate the native ios/ and android/ folders on first launch.

Configuration

1. OneEntry CMS

1. Sign up at https://oneentry.cloud/ and create a new project.
2. In the admin panel, note the project URL (e.g. https://your-project.oneentry.cloud).
3. Go to Project settings → App tokens and generate a new App token.
4. Fill your catalog with products, blocks, pages, forms and menus — the SDK expects the same markers referenced in the code (home, catalog, contact_us, main-menu, etc.). See the OneEntry docs for the schema this template uses.

2. Environment variables

Copy the template and fill in the values:

cp .env.example .env

Variable	Required	Description
PROJECT_URL	✅	Your OneEntry project URL, e.g. https://your-project.oneentry.cloud.
APP_TOKEN	✅	App token generated in the OneEntry admin panel.
GOOGLE_OAUTH_CLIENT_ID	⚙️	Google OAuth 2.0 client ID (only if you enable Google Sign-In).
GOOGLE_OAUTH_CLIENT_SECRET	⚙️	Google OAuth 2.0 client secret (only if you enable Google Sign-In).

The .env file is git-ignored — never commit real secrets.

3. App identifiers

Open app.json and change these values to your own before building:

• expo.ios.bundleIdentifier — currently com.oneentry.shop.
• expo.ios.appleTeamId — your Apple Developer team ID.
• expo.ios.associatedDomains — your project URL.
• expo.android.package — currently com.oneentry.shop.
• expo.extra.eas.projectId — replace with your own EAS project ID (or remove the block if you don't use EAS).
• expo.plugins["@react-native-google-signin/google-signin"].iosUrlScheme — replace with your own reversed iOS OAuth client ID (see step 5).

4. Firebase (push notifications)

Push notifications require a Firebase project.

1. Create a project in the Firebase Console.
2. Add an iOS app using the bundleIdentifier from app.json, download GoogleService-Info.plist and save it in the project root (replaces the .example template).
3. Add an Android app using the package from app.json, download google-services.json and save it in the project root.
4. Enable Cloud Messaging in the Firebase Console.
5. In the OneEntry admin panel, connect your Firebase project so OneEntry can send push notifications to your users.

Detailed instructions: https://doc.oneentry.cloud/docs/events/introduction.

Both real config files are listed in .gitignore — do not commit them.

5. Google Sign-In (optional)

If you don't need "Sign in with Google", you can remove the @react-native-google-signin/google-signin plugin from app.json and the sign-in button from src/components/auth/WelcomeScreen/AuthMethodsList.tsx. Otherwise:

1. In Google Cloud Console → APIs & Services → Credentials, create OAuth 2.0 Client IDs for iOS and Web application.
2. Put the Web client ID/secret into .env as GOOGLE_OAUTH_CLIENT_ID and GOOGLE_OAUTH_CLIENT_SECRET — they are used server-side by OneEntry's OAuth exchange.
3. Put the iOS reversed client ID (e.g. com.googleusercontent.apps.xxxxxxxxxxxx-yyyy) into app.json at expo.plugins["@react-native-google-signin/google-signin"].iosUrlScheme.
4. In the OneEntry admin panel, register a google_ios OAuth provider that points to the same Google OAuth client.

6. Stripe (payments)

Payment methods are configured in OneEntry under Payment methods. Provide your Stripe credentials in the OneEntry admin panel; the app itself does not store Stripe secrets — it only opens the Stripe checkout URL returned by the SDK.

Run the app

Verify your setup:

npx expo-doctor

Then run:

# iOS (macOS only)
yarn ios

# Android
yarn android

The first run generates the native ios/ and android/ folders (Expo Prebuild) and installs CocoaPods. Subsequent runs are much faster.

If you prefer cloud builds without dealing with native code, use Expo Application Services (EAS):

npx eas build --platform ios
npx eas build --platform android

Error handling

Run diagnostics first:

npx expo-doctor

If you get Firebase build errors on Android, add tools:replace attributes to the Firebase <meta-data> tags in android/app/src/main/AndroidManifest.xml:

Replace:

<meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="default"/>
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>

with:

<meta-data tools:replace="android:value" android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="default"/>
<meta-data tools:replace="android:resource" android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
<meta-data tools:replace="android:resource" android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>

For iOS, make sure you have the latest Xcode and iOS SDKs.

Detailed docs

Additional documentation lives in /documentations:

• Authorization — login, sign-up, tokens, activation.
• Orders — order creation, tracking, transactions.
• Events — real-time updates and event triggers.
• User State — user state management and synchronization.

---

Issues and questions: GitHub discussions for React Native