@pixibo/fyf-react-native v2.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 | [] |
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago