Français Italiano Português do Brasil

SDK Installation for React Native

Follow

Mobile SDK end-of-life has been announced and scheduled for the end of 2023, in favor of updated and more streamlined app personalization using server-side APIs.

Dynamic Yield offers software development kits (SDKs) for native mobile platforms, enabling you to personalize your native app experience for your users. This article contains information about how to install and update the SDK for React Native platforms.

Installing the Library

Step 1: Create a New Site and Download the SDK

  1. Create a new site and select Mobile App and select your operating system.
    Create-new-site-mobile_ios.png
  2. Click Create, you will be redirected to the General Settings page. Write down the secret key. You do not need to download the SDK.
    iOS-implemetaition-status.png
  3. If you plan to have different experiments in each operating system, you should create a second Dynamic Yield site for the operating system you did not select above (iOS or Android). 

Step 2: SDK integration

Integrate your SDK for iOS, Android, or both. 

For iOS
  1. Create a React Native project or use your existing project
  2. Navigate into folder ios inside your project's path
  3. To install using Cocoapods, add the following text to the end of the pod list inside Podfile: 
    pod ‘Dynamic-Yield-iOS-SDK’
    Run pod install
  4. Download this zipped repository and extract it into your project. 
  5. In your React Native project's ios folder, open the .xcworkspace file to open the xcode project.
  6. From the repository you just cloned, copy DYReactImplTest/ios/DYReact.m and DYReactImplTest/ios/DYReact.h into the xcode project
For Android
  1. Create a React Native project or use your existing project
  2. Start Android studio and open the project inside the android folder 
  3. Add implementation ('com.dynamicyield:DYAPISDK:+'){ transitive = false;} to the end of the dependencies list inside the build.gradle file of your app module
  4. Sync the gradle file
  5. Download this zipped repository and extract it into your project. 
  6. Copy DYReactImplTest/android/app/src/main/java/com/dyreactimpltest/bridge/DYReact.java and DYReactImplTest/android/app/src/main/java/com/dyreactimpltest/bridge/DYReactPackage.java into your project
  7. Add packages.add(new DYReactPackage()); in the getPackages method of the MainApplication.java file

Step 3. React Native Usage

  1. In your React Native project, in every file that will reference the Dynamic Yield SDK, add the following code: 
    import {NativeModules} from 'react-native';
const DYReact = NativeModules.DYReact;
  2. Inside your React Native project, in the root file (main.js by default) add the following code to the default class App method: 
    import {Platform} from 'react-native';
    export default class App extends Component {
  constructor() {
    super();
    this.state = {
      image_containers: [],
      DYReturned: false,
    };

    const secretKey =
      Platform.OS === 'ios'
        ? '<ios_section_secret_key>'
        : '<android_section_secret_key>';

    DYReact.setSecret(secretKey, state => {
      console.log(`returned with state: ${state} `);
  3. Listen to this.state.DYReturned, or start using DY inside the setSecret callback

Updating The Library

The Dynamic Yield SDK is updated periodically and is always backwards compatible. To use new features, you need to update the Dynamic Yield SDK installed in your app.

Using Cocoapods
Just run pod update from the command line. This will download and install the newest Dynamic Yield iOS SDK.

Using Carthage
Open Terminal in the same location as cartfile and execute: carthage update

Zipped repository