Product Experience

Install Netcore CE React Native Nudges plugin using the npm package manager.

npm install --save [email protected]

For Android SDK

1. Complete Basic Setup
2. Follow the Android Product Experience integration steps to setup the product experience.
3. For your react native app, please add below line to proguard-rules.pro

-keep class com.facebook.react.views.** { *; }

4. Demarcating Screens
   If multiple screens in your app use a common Activity, you may choose to separate screens by Views/Fragments by following the steps

📘

Support for react-navigation

Please note that Product Experience SDK currently supports demarcating screens only when you use react-navigation dependency. Please reach out to us if you face issues, using other dependencies.

You can mark a screen by using the following methods present in HanselRn module:

• onSetScreen(screenName) - You can use this method to set a screen. Please note that when you explicitly set a screen, Product Experience SDK looks for this screen name to show any nudges created on this screen.

• onUnsetScreen() - You can use this method to unset a screen. Please note that when you unset a screen, Product Experience SDK does not consider the rest of the screens in the Activity to be part of the previous screen name, which may have been set using onSetScreen() method.

👍

Unsetting a screen post setting a screen

Please ensure that you call onUnsetScreen() in conjunction with onSetScreen()

• onBackButtonPressed() - Please ensure that you implement this method, on handling the back button, to ensure that all nudges work seamlessly when the back button is pressed.
  You will need to call onUnsetScreen() when onBackButtonPressed() returns false along with your code. Do nothing when this returns true.

Integration steps for class-based component

Step 1: Please add "HanselBaseComponent.js" class in your react code.

class HanselBaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hanselScreenName: ''
    };
    this.setHanselScreenName = this.setHanselScreenName.bind(this);
  }
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      NativeModules.HanselRn.onSetScreen(this.state.hanselScreenName);
    });
    this.blurListener = navigation.addListener('didBlur', () => {
      NativeModules.HanselRn.onUnsetScreen();
    });
  }
  componentWillUnmount() {
     this.focusListener.remove();
     this.blurListener.remove();
     NativeModules.HanselRn.onUnsetScreen();
     //Your code here
  }
  setHanselScreenName(screenName) {
    this.setState({
      hanselScreenName: screenName
    });
  }
}

Step 2: Modify the components on which you are planning to add the Product Experience by following the below mentioned steps:

• Make your component class extend from HanselBaseComponent class
• Add the following line in your componentWillMount method:
  this.setHanselScreenName('');
• In case you have implemented componentDidMount method in your component class, add a call to super.componentDidMount()
• In case you have implemented componentWillUnmount method in your component class, add a call to super.componentWillUnmount()

So, your final class will look something like this:

class MyComponent extends HanselBaseComponent {
      	//Other methods here
   		componentWillMount(){
   			//Your code here
        this.setHanselScreenName('<Your screen name here>');	
   		}

class, add a call to super.componentDidMount()
   		componentDidMount(){
   			super.componentDidMount();
   			//Your code here
   		}

class, add a call to super.componentWillUnmount()
   		componentWillUnmount(){
   			super.componentWillUnmount();
   			//Your code here
   		}
}

Integration steps for functional component

Step 1: Please add the file "HanselBaseComponent.js" in your react code.

import React, { useState, useEffect } from 'react';
import { NativeModules } from 'react-native';

export const HanselBaseComponent = ({...props}) => {
    const Comp = props.screenComponent;
    const navigation = props.navigation;
    const screenName = props.defaultScreenName;

    const [hanselScreenName, setHanselScreenStateName] = useState(screenName);

    let navFocusListener;
    let blurListener;


    useEffect(() => {

        navFocusListener = navigation.addListener('didFocus', () => {
            NativeModules.HanselRn.onSetScreen(hanselScreenName);
        });
    
        blurListener = navigation.addListener('didBlur', () => {
            NativeModules.HanselRn.onUnsetScreen();
        });

        return () => {
            navFocusListener.remove();
            blurListener.remove();
        };
    }, [hanselScreenName]);

    const setHanselScreenName = screenName => {
        NativeModules.HanselRn.onSetScreen(screenName);
        setHanselScreenStateName(screenName);
    };

    const unsetHanselScreenName = () => {
       navFocusListener.remove();
       blurListener.remove();
       NativeModules.HanselRn.onUnsetScreen();
    };
    
    return(
        <>
            <Comp setHanselScreenName={setHanselScreenName}  unsetHanselScreenName={unsetHanselScreenName} navigation={navigation} />
        </>
    )
};

Step 2: Also, add another file "HanselHocComponent.js" in your react code.

import React from 'react';
import {HanselBaseComponent} from './HanselBaseComponent';

export const withHook = (Component, screenName) => {
    return (props: any) => {
      return <HanselBaseComponent defaultScreenName = {screenName} screenComponent={Component} navigation={props.navigation} />;
    };
};

Step 3: Modify the components on which you are planning to add the Product Experience by following the below-mentioned steps:

• Implement your functional component in the following way.

import React, {Component, useEffect} from 'react';
import {withHook} from '../HanselHocComponent';

const MyComponent = ({...props}) => {
  const navigation = props.navigation;

  useEffect(() => {
    return () => {
       props.unsetHanselScreenName()      
			 //Your code here     
    }
  }, []);

  //Your code here

  export default withHook(MyComponent,<Default screen name>);

• If you don't intend to explicitly set a screen name for the component, then provide an empty string for the default screen name.
• To update the screen name inside a component,
  use props.setHanselScreenName("< Your screen name here >")
• For navigating to another screen,
  use navigation.navigate('< Destination Component here >')

For iOS SDK

1. Complete Basic Setup
2. Follow the iOS Product Experience integration steps to setup the product experience.
3. Demarcating Screens
   If multiple screens in your app you may choose to separate screens by following the below steps.

📘

Support for react-navigation

Please note that Product Experience SDK currently supports demarcating screens only when you use react-navigation dependency. Please reach out to us if you face issues, using other dependencies

You can mark a screen by using the following methods present in HanselRn module:

onSetScreen(screenName) - You can use this method to set a screen. Please note that when you explicitly set a screen, Product Experience SDK looks for this screen name to show any nudges created on this screen.

onUnsetScreen() - You can use this method to unset a screen. Please note that when you unset a screen, Product Experience SDK does not consider the rest of the screens in the Activity to be part of the previous screen name, which may have been set using onSetScreen() method.

👍

Unsetting a screen post setting a screen

Please ensure that you call onUnsetScreen() in conjunction with onSetScreen()

Integration steps
Step 1: Please add "HanselBaseComponent.js" class in your react code.

class HanselBaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hanselScreenName: ''
    };
    this.setHanselScreenName = this.setHanselScreenName.bind(this);
  }
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      NativeModules.HanselRn.onSetScreen(this.state.hanselScreenName);
    });
    this.blurListener = navigation.addListener('didBlur', () => {
      NativeModules.HanselRn.onUnsetScreen();
    });
  }
  componentWillUnmount() {
     this.focusListener.remove();
     this.blurListener.remove();
  }
  setHanselScreenName(screenName) {
    this.setState({
      hanselScreenName: screenName
    });
  }
}

Step 2: Modify the components on which you are planning to add the Product Experience by following the below mentioned steps:

• Make your component class extend from HanselBaseComponent class
• Add the following line in your componentWillMount method:
  this.setHanselScreenName('');
• In case you have implemented componentDidMount method in your component class, add a call to super.componentDidMount()
• In case you have implemented componentWillUnmount method in your component class, add a call to super.componentWillUnmount()

So, your final class will look something like this:

class MyComponent extends HanselBaseComponent {
      	//Other methods here
   		componentWillMount(){
   			//Your code here
        this.setHanselScreenName('<Your screen name here>');	
   		}

class, add a call to super.componentDidMount()
   		componentDidMount(){
   			super.componentDidMount();
   			//Your code here
   		}

class, add a call to super.componentWillUnmount()
   		componentWillUnmount(){
   			super.componentWillUnmount();
   			//Your code here
   		}
}