@pixibo/fyf-react-native

Pixibo

Install ReactNativeCli

• npm install -g react-native-cli

Create your FirstProject

• react-native init FirstProject

Install Required Packages

• npm install

Command To Install ios Pods

• cd ios
• pod install

Command to run on ios

• react-native run-ios

Command to run on android

• react-native run-android

Android Troubleshoot

• If build fails clean the gradlew using cd android && gradlew clean

Make Sure SDK Path is correct in local.properties file

• sdk.dir = C:\\Users\\audvik\\AppData\\Local\\Android\\Sdk

Android Build

• open android folder in Android Studio and generate build
• or
• use gradlew bundleRelease to generate the release build

iOS Build

• add main.jsbundle file in iOS directory and then run the simulator.
• open iOS folder in XCode (11.3+) and generate archive.

Test the release build

• react-native run-android --variant=release

Keep the debug server running (If you are using XCode or Android Studio) using followng command

• react-native start

Integration Steps

To use our widget, you will need to install @pixibo/fyf-react-native, @react-native-community/async-storage@1.7.1 and react-native-device-info@5.4.0

npm install @pixibo/fyf-react-native react-native-device-info@5.4.0 @react-native-community/async-storage@1.7.1

Or if you're using yarn,

yarn add @pixibo/fyf-react-native react-native-device-info@5.4.0 @react-native-community/async-storage@1.7.1

On your product detail page, use our Pixibo component as per the example below

import Pixibo from '@pixibo/fyf-react-native';
...


const YourProductDetailPageComponent = () => {
  ...
  return (
    <View>
      ...
      <Pixibo clientId={clientId} skuID={skuId} addToCart={() => {}} continueShopping={() => {}} closeModalOnContinueShoppingOrAddToCartButton={true} DEBUG={false} />
    </View>
  )
}

props	description	type	required	default
clientId	your pixibo clientId provided by Pixibo	string	Yes	-
skuID	skuId of the product	string	Yes	-
addToCart	function that adds recommended size to cart	function	No	-
continueShopping	function that is triggered when continueShopping is clicked	function	No	-
DEBUG	to see all console messages	boolean	No	false
language	Set default language	string	No	en
textLable	Custom style for header text	boolean	No	{
marginLeft: 10,
marginBottom: 10
}
textSubLable	Custom style for sub-header text	boolean	No	{
marginLeft: 6,
marginRight: 14,
}
errorStyle	custom style for the error button	Object	No	{
color: 'red',
marginLeft: 10,
fontSize: 10,
width: 250,
}
inputStyle	custom style for the input fields	Object	No	{
borderWidth: 1,
borderRadius: 3,
borderColor: '#d3d3d3',
width: 118,
height: 40,
marginLeft: 10,
textAlign: 'right',
padding: 10,
color: "#000000",
}
selectGroupStyle	change the default Group Style	boolean	No	Default Style
regionList	change the default Pixibo region List	array	No	Pixibo List
bandList	change the default Pixibo band List	array	No	Pixibo List
cupList	change the default Pixibo cup List	array	No	Pixibo List
availableSizes	set the available sizes	Comma separated String	No	''
onSizeRecommended	call back for size recommendation	function	Yes	Function
recommendedSize	This prop will help in re rendering	string	Yes	''

• You can implement your own Continue Shopping and AddToCart Logic and pass them in props to get them implemented.

Convertor Component Example

• import PixiboConvertor from '../DataEntryModal/PixiboConvertor';

• let x = new PixiboConvertor().convert({"clientId":"1jyd96h7uzj8z","transaction":"yyy","amount":"119.70","currency":"USD","uid":"zzz","products":[{"sku":"MTW249","price":"80.00","size":"XL"}]})

• let pc = new PixiboConvertor()

• let x = pc.convert({"clientId":"1jyd96h7uzj8z","transaction":"yyy","amount":"119.70","currency":"USD","uid":pc.getUID(),"products":[{"sku":"MTW249","price":"80.00","size":"XL"}]})

• console.log('Convertor',x)

• console.log(pc.getUID())

To convert pass the json data to convert() function of PixiboConvertor object.

Sample Data

• {"clientId":"1jyd96h7uzj8z","transaction":"yyy", "amount":"119.70", "currency":"USD", "uid":pc.getUID(), "products":[{"sku":"MTW249","price":"80.00","size":"XL"}]}

Keys	Description	type	required	default
clientId	Client ID provided by Pixibo	string	True	--
transaction	Description	string	True	--
amount	Description	float	True	--
currency	Currency	string	True	USD
uid	Device UUID	string	True	--
products	Provide product info like sku price and size	array	True	[]