@quinninc/rn-core v0.6.17
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
# 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
cd ios && pod install
Note: Make sure you have completed all the packages setup for native android and ios for following packages.
- react-native-linear-gradient
- react-native-skeleton-placeholder
- react-native-vector-icons
- react-native-video
- @react-native-async-storage/async-storage
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>
);
}
1 day ago
2 days ago
6 days ago
16 days ago
16 days ago
17 days ago
24 days ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago