React-native-lookback NPM

react-native-lookback

What is this?

This package allows you to use the Lookback user testing utilities in your React Native projects. Using Lookback will let you live stream your app to observers as users interact with it, record sessions and upload them for later viewing, and moderate and engage with your users while they're testing your app.

Previous Versions

This repo contains the library starting at version 3.0. Prior versions were built by @negativetwelve and can be found here.

Platforms

The Lookback SDK is only supported on iOS v10 or greater.

To use Lookback on Android see the Lookback Participate App

Installation

Download React Native Lookback in your React Native project from GitHub using:

npm install git+ssh://git@github.com/spotify/react-native-lookback --save

Mostly automatic installation

Requires Cocoapods

Setup CocoaPods. If you don't have a Podfile for your app already, in your project folder run:
```
cd ios && pod init
```

Add the CocoaPod specs In your App's Podfile add

Minimum OS Version
```
platform :ios, '10.0'
```

In your App's Podfile add the React Native Lookback podspec

pod 'react-native-lookback', :path => '../node_modules/react-native-lookback/react-native-lookback.podspec'

Add the subspec for React and it's dependencies in your Podfile to the locally installed CocoaPods, as the normal React CocoaPod is out of date.

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => '../node_modules/react-native',
   :subspecs => [
       'Core',
       'CxxBridge'
   ]

In your iOS folder run
```
pod install
```
Open your newly created Project.xcworkspace (not your existing Project.xcodeproj)
Run your project (Cmd+R)

Configuration

To use Lookback Participate (recommended), you need to set up your app to handle links from Lookback.

Go to lookback.io and get your project's App Prefix. It will be something like:
```
'lookback-appname'
```
It's generated for you when you register a new app for testing.
Add your App Prefix to your App's URL Types following Apple's documentation for adding a custom url scheme.
Set the Privacy keys in your Info.plist file for Microphone and Camera access for your app.
Apps that don't use the camera or microphone can use these descriptions which are specific to Lookback:
- NSCameraUsageDescription: Lookback uses the camera to record you during user research studies
- NSMicrophoneUsageDescription: Lookback uses the microphone to record you during user research studies
Ensure that you have React Native linking setup so that your React Native App can handle incoming links.

In AppDelegate.m you should have:

 #import <React/RCTLinkingManager.h>

 @implementation

 // The rest of your App Delegate here...

 /**
 Allow React Native to respond to links that target this app.
 */
   - (BOOL)application:(UIApplication *)application
      openURL:(NSURL *)url
      options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
   {
     return [RCTLinkingManager application:application openURL:url options:options];
   }

 @end

Once this is in place react-native-lookback will be able to intercept Participate links.

Usage

Lookback Participate

Register your URL Scheme with Lookback Participate to allow Lookback to respond to Participate urls. For more info, see Lookback Participate features such as Live sessions and Self-Testing sessions.

import Lookback from 'react-native-lookback';
// Tell Lookback what your url scheme is
Lookback.setupParticipate('myproject-lookback');

That's it! Now your App is ready to join live sessions or run self-test sessions.

Lookback Recorder

If you want to programatically control Lookback, you must configure Lookback with your app token instead of using Participate. Your app token is found in your Organization settings on your lookback.io dashboard.

import Lookback from 'react-native-lookback'

// Initialise Lookback
Lookback.setupWithAppToken('myapptoken');
/**
 * Some possible uses:
 */
// Turn on shake to record
Lookback.shakeToRecord = true;
// Or show the Lookback feedback bubble
Lookback.feedbackVisible = true;
// Or show the Lookback recorder view
Lookback.recorderVisible = true;

Lookback Recorder API

Lookback

A module for controlling Lookback from React Native

Lookback
- static
  - .onStartedUpload : Callback
  - .onSettingsUpdate : Callback
  - .settings : Object
  - .recording : Boolean
  - .paused : Boolean
  - .showIntroductionDialogs : Boolean
  - .recorderVisible : Boolean
  - .feedbackBubbleVisible : Boolean
  - .shakeToRecord : Boolean
  - .setupParticipate(urlScheme)
  - .setupWithAppToken(token)
- inner
  - ~uploadCallback : function
  - ~settingsCallback : function

Lookback.onStartedUpload : Callback

Set a callback to fire when Lookback starts uploading a recording This only applies if you are starting the recording yourself rather than the user clicking the feedback bubble

Kind: static property of Lookback
Use: Lookback.onStartedUpload = (upload) => console.log(upload.destinationURL, upload.sessionStartedAt);

Lookback.onSettingsUpdate : Callback

Set a handler to listen for updates to settings from Lookback

Kind: static property of Lookback
Use: Lookback.onSettingsUpdate = (setting) => console.log(setting);

Lookback.settings : Object

The current settings Lookback is using. These are set asynchronously, so may not be accurate all the time. If you want to observe settings, register a callback for @see onSettingsUpdate

Kind: static property of Lookback
Read only: true

Lookback.recording : Boolean

Set Lookback Recorder to start recording with the default options or to stop recording the current session