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/[email protected] and [email protected]

npm install @pixibo/fyf-react-native [email protected] @react-native-community/[email protected]

Or if you're using yarn,

yarn add @pixibo/fyf-react-native [email protected] @react-native-community/[email protected]

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 | [] |