Skip to main content

Reachu React Native SDK

Official Reachu SDKfor React Native (Android & iOS). This SDK lets you manage shopping carts, checkouts, discounts, markets, channels, and paymentsthrough Reachu's GraphQL/REST APIs. It is designed to be a simple and strongly typed client for ecommerce integrations in React Native apps.

npm version npm downloads

Why Choose React Native + GraphQL?​

  • Cross-Platform Performance: Single codebase for both iOS and Android with native performance
  • Efficient Data Fetching: GraphQL allows precise data requests, reducing bandwidth usage
  • Developer Experience: TypeScript support with full type safety
  • Real-time Commerce: Live updates for inventory, pricing, and cart synchronization
  • Native Integration: Seamless integration with React Native ecosystem

SDK Modules​

The React Native SDK includes comprehensive modules for all ecommerce operations:

  • Cart → Create, update, delete carts and line items
  • Checkout → Manage checkout sessions and order processing
  • Payment → Integrations with Stripe, Klarna, Vipps
  • Discount → Create, verify and manage discount codes
  • Market → Query available markets and currencies
  • Channel → Products, categories, and purchase conditions

Quick Installation​

Install the SDK using npm or yarn:

npm
npm install @reachu/react-native-sdk

yarn
yarn add @reachu/react-native-sdk

Basic Usage​

App.tsx
import SdkClient from '@reachu/react-native-sdk';

// Initialize the client
const sdk = new SdkClient(
 'Bearer <YOUR_TOKEN>', // apiKey
 'https://graph-ql-dev.reachu.io' // baseUrl (GraphQL endpoint)
);

// Create a cart
const cart = await sdk.cart.create({
 customer_session_id: 'session-123',
 currency: 'USD',
});

// Add items to cart
const updatedCart = await sdk.cart.addItem({
 cart_id: cart.cartId,
 line_items: {
 product_id: 123,
 variant_id: 456,
 quantity: 2,
 },
});

// Create checkout
const checkout = await sdk.checkout.create({ cartId: cart.cartId });

Documentation Structure​

For production apps, create a singleton service to initialize the SDK once and reuse it throughout your app:

src/services/sdk.ts
import Config from 'react-native-config';
import SdkClient from '@reachu/react-native-sdk';

class SdkService {
 private static _instance: SdkService;
 public sdk: SdkClient;

 private constructor() {
 this.sdk = new SdkClient(Config.API_KEY!, Config.GRAPHQL_ENDPOINT!);
 }

 static get instance() {
 if (!this._instance) this._instance = new SdkService();
 return this._instance;
 }
}

export default SdkService.instance;

App.tsx
import React, { useEffect } from 'react';
import { Text, View } from 'react-native';
import Sdk from './src/services/sdk';

export default function App() {
 useEffect(() => {
 (async () => {
 const created = await Sdk.sdk.cart.create({
 customer_session_id: Date.now().toString(),
 currency: 'USD',
 });
 console.log('Cart:', created.cartId);
 })();
 }, []);

 return (
 <View><Text>Reachu Store</Text></View>
 );
}

Usage Examples​

Payment Integration​

Payment Example
// Create Stripe payment intent
const intent = await sdk.payment.stripeIntent({
 checkout_id: checkout.id,
 return_ephemeral_key: true,
});
console.log('Client Secret:', intent.client_secret);

Discount Management​

Discount Operations
// Get available discounts
const discounts = await sdk.discount.get();

// Add a new discount
const newDiscount = await sdk.discount.add({
 code: 'SAVE10',
 percentage: 10,
 start_date: '02-25-2024',
 end_date: '03-25-2024',
 type_id: discountType.id,
});

Market & Channel Data​

Data Operations
// Get available markets
const markets = await sdk.market.getAvailable();

// Get product categories
const categories = await sdk.channel.category.get();

// Get products with image settings
const products = await sdk.channel.product.get({
 currency: 'USD',
 image_size: 'large',
});

Key Features​

TypeScript Support​

Full TypeScript definitions included for enhanced developer experience and type safety.

GraphQL + REST Hybrid - GraphQLfor efficient data fetching (Cart, Checkout, Products)​

  • RESTfor specific operations (Payment confirmations, Order details)

Multiple Payment Providers - Stripe - Credit cards, digital wallets​

  • Klarna - Buy now, pay later
  • Vipps - Norwegian mobile payments

Real-time Cart Management - Add/remove items with live price updates​

  • Shipping calculations based on location
  • Multi-supplier support with separate shipping

License​

This project is licensed under the ISC License - see the LICENSE file for details.

Ready to build amazing React Native shopping experiences?

Start with the Getting Started guide →:::