React Native

The following describes the necessary steps to integrate Size Adviser into a React Native application, with specific details on how to make it work on both iOS and Android.

Resources #

• App Identifier - Provide us with your app ids.
• Installation - Install our module in your app.

App identifier #

In order to enable your app integration you must provide us with your APP identifier, you can check it depending on your OS in the following links:

• Android https://developer.android.com/build/configure-app-module#set-application-id
• iOS https://developer.apple.com/help/account/manage-identifiers/register-an-app-id

If your app is multiplatform and will run in both Android & iOS we need both APP ids.

Installation #

Get our module #

Download our module for react native

Install module #

Move downloaded module to your project folder and execute the following command:

user@ip: $ npm install react-native-usizy-0.1.6.tgz

Module will be installed in your React Native App.

Use our API and display Size Adviser #

First, your project needs to include our software

Android: In the respositories list: android/build.gradle -> Add the following lines in allprojects:

allprojects {
    repositories {
        ...
        maven {
            url "https://bitbucket.org/usizy/usizy-android-sdk/raw/release/"
        }
    }
}

If you are using ProGuard for the release compilation, don’t forget to add these lines in your android/app/proguard-rules.pro file

-keep class com.usizy.** { *; }
-dontwarn com.usizy.**

iOS : In the ios/Podfile -> Add the following line inside your target definition:

pod 'UsizyIosSdk', :git => 'https://bitbucket.org/usizy/usizy-ios-sdk.git', :tag => '0.11.1'

Then, it is necessary to import Usizy component:

const UsizyButton = requireNativeComponent('UsizyButton');

Your users must be identified with your internal user id, using the user parameter, or with AnonymousUser if your users should remain anonymous.

Finally, you may add the following line of code in your product detail view to call our API and display Size Adviser:

<UsizyButton
  height={100}
  width={200}
  productId="<product_id>"
  user="<user_id | AnonymousUser>"
/>

Usizy must enable your application and the products that are expected to receive service from Size Adviser.

(Optional) Change Size Adviser logo #

You can add the resource with the parameter logoResName

<UsizyButton
  productId="<product_id>"
  user="<user_id | AnonymousUser>"
  logoResName="usizy_logo"
/>

Android: Add the resource image to Android drawable folder

iOS : Add the resource image via Xcode asset catalogs

(Optional) Change button icon #

You can change the resource with the parameter iconResName

<UsizyButton
  productId="<product_id>"
  user="<user_id | AnonymousUser>"
  iconResName="icon_new"
/>

Android: Add the resource image to Android drawable folder

iOS : Add the resource image via Xcode asset catalogs

(Optional) Change button initial text, font size and color #

import processColor from "react-native";

...

<UsizyButton
  productId="<product_id>"
  user="<user_id | AnonymousUser>"
  title="What is my size?"
  titleColor={ processColor("red") }
  fontSize={"40"}
/>

Using the result of the recommendation from React Native #

You can associate a function to the “onRecommendedSize” event to receive the given recommendation. For example:

const [sizeCountry, setSizeCountry] = useState(true);

const _onRecommendedSize = (data) => {
    setSizeCountry(data.nativeEvent.sizeCountry);
  };

<UsizyButton
  productId="<product_id>"
  user="<user_id | AnonymousUser>"
  logoResName="usizy_logo"
  onRecommendedSize={_onRecommendedSize}
/>

Sales Confirmation #

You can send a sales confirmation with the following code

import { NativeModules } from 'react-native';

const { UsizyApiModule } = NativeModules;

export default function App() {
  const onPress = async () => {
    try {
      const request = {
        order_id: 'REACT_NATIVE_ORDER_ID',
        product_ids: ['PRODUCT_ID_1'],
        sizes: ['SIZE_1'],
        currency: 'EUR',
        prices_vat: ['12.23']
      };
      await UsizyApiModule.confirm(request);
    } catch (e) {
      console.log('error', e);
    }
  }
}

The order_id, product_ids and sizes fields are mandatory.

Fields:

• let order_id: string
• let product_ids: string[]
• let variation_ids?: string[]
• let sizes: string[]
• let sizes_system?: string[]
• let currency?: string
• let prices_vat?: string[]
• let prices_no_vat?: string[]
• let total_vat?: string
• let total_no_vat?: string
• let shipping_cost?: string

Demo #

Here, a simple demo: