Getting Started

Follow this README.md for getting started.

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Install dependecies

First, you will need to install all the peer dependency.

# using npm
npm install @react-native-async-storage/async-storage @react-native-masked-view/masked-view react-native-linear-gradient react-native-skeleton-placeholder react-native-vector-icons react-native-video react-native-video-cache

# OR using Yarn
yarn @react-native-async-storage/async-storage @react-native-masked-view/masked-view react-native-linear-gradient react-native-skeleton-placeholder react-native-vector-icons react-native-video react-native-video-cache

cd ios && pod install

Note: Make sure you have completed all the packages setup for native android and ios for following packages.

1. react-native-linear-gradient
2. react-native-skeleton-placeholder
3. react-native-vector-icons
4. react-native-video
5. @react-native-async-storage/async-storage
6. react-native-video-cache

Step 2: Installing the SDK

Now you can install the package:

# using npm
npm install @quinninc/rn-core

# OR using Yarn
yarn add @quinninc/rn-core

Step 3: SDK Usage

Setting up the Widgets.

import React from 'react';
import { Modal } from 'react-native';
import {
	initApp,
	Carousel,
	Stories,
	Popup,
	Overlay,
	AppActions,
	getQuinnState
} from '@quinninc/rn-core';
import { getProductsById } from './ProductFetcher';

//Get config from Quinn admin portal
initApp({
	cdn: '', //shop CDN prefix
	shop_domain: '', //Shop domain
	shop_type: 'GENERAL'
});

AppActions.onFetchProductsById(getProductsById); //if shop_type is GENERAL, NOTE: define before app renders, this is optional

//url pathname /{page_type}/{page_id} for video pages in admin portal
setPage({
	page_type: 'INDEX', //products, collection, pages, empty for home page
	page_id: 'index', //ID of page
	page_handle: 'index' //my_product_handle, my_collection_handle, my_page_handle, empty for home page
});

function App() {
	const [overlayData, setOverlayData] = useState < (IOpenOverlayAction | null) > null;

	useEffect(() => {
		//implement function callbacks
		AppActions.onCartOpen(() => {
			console.log('Cart Open');
		});

		AppActions.onProductPageOpen((product) => {
			console.log('Product page Open', product);
		});

		AppActions.onAddToCart(async ({ product, variant }) => {
			console.log('Add to Cart', { product, variant });
		});

		AppActions.onOverlayOpen((data) => {
			setOverlayData(data);
		});

		AppActions.onOverlayClose(() => {
			setOverlayData(null);
		});

		AppActions.onCustomAction('CUSTOM_ACTION', async ({ payload }) => {
			const QuinnState = getQuinnState();
			console.log('Payload', payload);
		});
	}, []);

	return (
		<SafeAreaView>
			<Carousel layer={1} showLoader />

			<Stories layer={1} showLoader />

			<Popup layer={1} />

			<Modal animationType="slide" visible={!!overlayData} transparent>
				<Overlay data={overlayData} direction="vertical" />
			</Modal>
		</SafeAreaView>
	);
}