# react-native-lookback **Repository Path**: mirrors_spotify/react-native-lookback ## Basic Information - **Project Name**: react-native-lookback - **Description**: React Native wrapper for the Lookback User Testing platform - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: develop - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-18 - **Last Updated**: 2025-10-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # react-native-lookback [![npm](https://img.shields.io/npm/v/react-native-lookback.svg)](https://www.npmjs.com/package/react-native-lookback) [![npm](https://img.shields.io/npm/dt/react-native-lookback.svg)](https://www.npmjs.com/package/react-native-lookback) [![npm](https://img.shields.io/github/license/spotify/react-native-lookback.svg)](https://github.com/spotify/react-native-lookback/blob/master/LICENSE) ## What is this? This package allows you to use the [Lookback](https://lookback.io) 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](https://github.com/negativetwelve) and can be found [here](https://github.com/negativetwelve/react-native-lookback). ## Platforms The Lookback SDK is only supported on iOS v10 or greater. To use Lookback on Android see the [Lookback Participate App](https://lookback.io/features/participate/) ## Installation Download React Native Lookback in your React Native project from GitHub using: npm install react-native-lookback --save ### Mostly automatic installation #### _Requires [Cocoapods](https://cocoapods.org/)_ 1. Setup CocoaPods. If you **don't** have a Podfile for your app already, in your project folder run: ``` cd ios && pod init ``` 2. Add the CocoaPod specs In your App's `Podfile` add - Minimum OS Version ```ruby platform :ios, '10.0' ``` - In your App's `Podfile` add the **React Native Lookback** podspec ```ruby 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](https://cocoapods.org/pods/react) is out of date. ```ruby 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' ] ``` 1. In your iOS folder run ``` pod install ``` 1. Open your newly created _`Project`_`.xcworkspace` (**not** your existing _`Project`_`.xcodeproj`) 2. Run your project (`Cmd+R`) ## Configuration To use Lookback Participate (recommended), you need to set up your app to handle links from Lookback. 1. 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. 2. Add your App Prefix to your App's URL Types [following Apple's documentation for adding a custom url scheme.](https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app?language=objc) ![Xcode Setup](docs/xcode-urltype.png) 4. Set the Privacy keys in your Info.plist file for Microphone and Camera access for your app. ![Xcode Setup](docs/xcode-privacy.png) Apps that don't use the camera or microphone can use these descriptions which are [specific to Lookback](https://help.lookback.io/installing-the-ios-sdk/configuring-lookback/configuring-lookback-participate): - NSCameraUsageDescription: Lookback uses the camera to record you during user research studies - NSMicrophoneUsageDescription: Lookback uses the microphone to record you during user research studies 3. Ensure that you have React Native [linking setup](https://facebook.github.io/react-native/docs/linking) so that your React Native App can handle incoming links. In AppDelegate.m you should have: ```obj-c #import @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 *)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](https://lookback.io/features/) such as Live sessions and Self-Testing sessions. ```javascript 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. ```javascript 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](#module_Lookback) * _static_ * [.onStartedUpload](#module_Lookback.onStartedUpload) : Callback * [.onSettingsUpdate](#module_Lookback.onSettingsUpdate) : Callback * [.settings](#module_Lookback.settings) : Object * [.recording](#module_Lookback.recording) : Boolean * [.paused](#module_Lookback.paused) : Boolean * [.showIntroductionDialogs](#module_Lookback.showIntroductionDialogs) : Boolean * [.recorderVisible](#module_Lookback.recorderVisible) : Boolean * [.feedbackBubbleVisible](#module_Lookback.feedbackBubbleVisible) : Boolean * [.shakeToRecord](#module_Lookback.shakeToRecord) : Boolean * [.setupParticipate(urlScheme)](#module_Lookback.setupParticipate) * [.setupWithAppToken(token)](#module_Lookback.setupWithAppToken) * _inner_ * [~uploadCallback](#module_Lookback..uploadCallback) : function * [~settingsCallback](#module_Lookback..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](#module_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](#module_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](onSettingsUpdate) **Kind**: static property of [Lookback](#module_Lookback) **Read only**: true ### Lookback.recording : Boolean Set Lookback Recorder to start recording with the default options or to stop recording the current session **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.paused : Boolean Pause or Resume the recording **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.showIntroductionDialogs : Boolean Whether to show the introduction dialogs for Lookback **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.recorderVisible : Boolean Show or hide the Lookback Recorder UI, the equivalent to pressing the feedback bubble in app **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.feedbackBubbleVisible : Boolean Show or Hide the feedback bubble **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.shakeToRecord : Boolean Shake Device to Record **Kind**: static property of [Lookback](#module_Lookback) ### Lookback.setupParticipate(urlScheme) Set up Lookback to use Lookback Participate **Kind**: static method of [Lookback](#module_Lookback) **See**: [Lookback.io](https://lookback.io) | Param | Type | Description | | --- | --- | --- | | urlScheme | String | URL scheme specified in Lookback dashboard and in your Info.plist, usually in the format lookback-appname | ### Lookback.setupWithAppToken(token) Set up Lookback Recorder **Kind**: static method of [Lookback](#module_Lookback) **See**: [Lookback.io](https://lookback.io) | Param | Type | Description | | --- | --- | --- | | token | String | Lookback team token | ### Lookback~uploadCallback : function **Kind**: inner typedef of [Lookback](#module_Lookback) | Param | Type | Description | | --- | --- | --- | | upload | Object | Upload started event | | upload.destinationURL | String | Destination URL | | upload.sessionStartedAt | Date | Session start time | ### Lookback~settingsCallback : function **Kind**: inner typedef of [Lookback](#module_Lookback) | Param | Type | Description | | --- | --- | --- | | setting | Object | Key-Value pair of the updated setting | ## Contributing This repo follows the [git-flow](https://nvie.com/posts/a-successful-git-branching-model/) principles of having a Develop branch to open Feature branches against and a Master branch for releases. If you open a pull request, it should be against Develop *not Master* ## Code of Conduct This project adheres to the [Open Code of Conduct][code-of-conduct]. By participating, you are expected to honor this code. [code-of-conduct]: https://github.com/spotify/code-of-conduct/blob/master/code-of-conduct.md