Sanitize View Data

The React Native SDK is a light-weight interface into our native Android and iOS SDKs. For more information on Visual Capture & Replay please see the documentation for those platforms:

Privacy

React Native elements can be redacted by assigning an appropriate testID attribute. The value lr-hide can be used by default, and additional values to redact can be added through configuration.

Configuring `redactionTags`

If you wish to redact views by tag values other than lr-hide a list of strings can be supplied when initializing the SDK.

LogRocket.init('APP_SLUG', {
  redactionTags: ['private'],
});

Using the `<LRRedact>` component

A simple way to redact a section of your application without changing the attributes of the redaction target developers can use the <LRRedact> component.

Note: this component is available as of release 1.12.4.

import { LRRedact } from '@logrocket/react-native';

<View>
  <Text>Captured part of the screen.</Text>
  <LRRedact>
    <Text>Redacted part of the screen.</Text>
  </LRRedact>
</View>

Using the `LRRedactProps` helper

In cases where you do not want to introduce a wrapping component it is recommended to use the LRRedactProps helper function to generate the appropriate properties depending on the executing platform.

Note: this component is available as of release 1.12.4.

import { LRRedactProps } from '@logrocket/react-native';

<View>
  <Text>Captured part of the screen.</Text>
  <Text {...LRRedactProps()}>Redacted part of the screen.</Text>
</View>

Using `testID` to redact views

Apply a testID attribute to any elements you wish to redact from view capture. On iOS only, an additional attribute accessible={false} is also required for redaction. This property can be applied conditionally on reactNative.Platform.OS.

For developers on a release before 1.12.4 we recommend introducing a helper function to properly set the attributes.

import { Platform } from 'react-native';

const LRRedactProps = (redactionTag = 'lr-hide') => (
  Platform.OS === 'ios'
    ? {
      testID: redactionTag,
      accessible: false,
    }
    : { testID: redactionTag }
);

<View {...LRRedactProps()}>
  This view will be hidden using the default lr-hide matcher.
</View>
<View {...LRRedactProps()}>
  This view will be hidden using the custom private matcher.
</View>
<View {...LRRedactProps("something-else")}>
  This view will be captured.
</View>

Allowlisting

Individual children of React Native elements can be un-redacted, or allowed, by assigning an appropriate testID attribute. The value lr-show can be used by default, and additional values to allow can be added through configuration.

Configuring `allowTags`

If you wish to allow views by tag values other than lr-show a list of strings can be supplied when initializing the SDK.

LogRocket.init('APP_SLUG', {
  redactionTags: ['public'],
});

Using the `<LRAllow>` component

A simple way to allow a section of your application without changing the attributes of the is to use the <LRAllow> component.

Note: this component is available as of release 1.19.0

import { LRAllow, LRRedact } from '@logrocket/react-native';

<LRRedact>
  <View>
    <Text>Redacted part of the screen.</Text>
    <Text>Redacted part of the screen.</Text>
    <LRAllow>
      <Text>Captured part of the screen.</Text>
    </LRAllow>
  </View>
</LRRedact>

Using the `LRAllowProps` helper

In cases where you do not want to introduce a wrapping component it is recommended to use the LRAllowProps helper function to generate the appropriate properties depending on the executing platform.

Note: this component is available as of release 1.19.0

import { LRAllowProps, LRRedactProps } from '@logrocket/react-native';

<LRRedactProps>
  <View>
    <Text>Redacted part of the screen.</Text>
    <Text>Redacted part of the screen.</Text>
    <Text {...LRAllowProps()}>Captured part of the screen.</Text>
  </View>
</LRRedactProps>

Using `testID` to allow views

Apply a testID attribute to any elements you wish to allow from view capture that descendants of redacted views. On iOS only, an additional attribute accessible={true} is also required for allowing. This property can be applied conditionally on reactNative.Platform.OS.

Prevent capturing touch events on redacted views

In order to prevent touches on redacted views from appearing in session replay, the following configuration must be provided. An example of when this would be useful is if your app redacts a PIN pad.

LogRocket.init('APP_SLUG', {
  captureRedactedViewTouches: false,
});

Pause View Capture

To completely disable the view capture system call LogRocket.pauseViewCapture(). If a capture is already in progress it will not be stopped, but no new view captures will be started until the system is resumed with LogRocket.unpauseViewCapture().

Privacy

Configuring redactionTags

Using the <LRRedact> component

Using the LRRedactProps helper

Using testID to redact views