npm package: @pixibo/fyf-react-native
Description: - `npm install -g react-native-cli`
Author: pixibo
Latest version: 2.0.2

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