Home
LogRocket SDKs
Sign Up

Sanitize View Data

Redact elements by ID

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 is to 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 <LRNativeIDRedact> component

Another way to redact a section of your application without changing the attributes of the redaction target is to use the <LRNativeIDRedact> component. This component differs from <LRRedact> in that it assigns the nativeID attribute to the default redaction tag value in iOS applications, rather than assigning the testID and accessible attributes on the component.

Note: this component is available as of release 1.44.0

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>

useNativeID argument

If you'd rather use the nativeID property to mark a component for redaction when your app is executing on iOS, you can pass true for the the useNativeID argument when calling the LRRedactProps helper function.

ℹ️ Important usage information

  1. LRRedactProps also takes a redactionTag string argument, so if you'll have to pass either undefined or lr-hide if you want to use LRRedactProps with the default redaction tag and nativeID property assignment on iOS.
  2. nativeID is only assignable on View components. In order to redact a Button or other component that is not a subclass of View, you will need to wrap it in an <LRRedact> component, rather than just applying LRRedactProps() to it.

Note: This argument is available as of release 1.44.0

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

<View>
  <Text>Captured part of the screen.</Text>
  <Text {...LRRedactProps(undefined, true)}>
    Part of the screen redacted via the nativeID property on iOS.
  </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 allow target 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 <LRNativeIDAllow> component

Another way to allow a section of your application without changing the attributes of the allow target is to use the <LRNativeIDAllow> component. This component differs from <LRAllow> in that it assigns the nativeID attribute to the default allow tag value in iOS applications, rather than assigning the testID and accessible attributes on the component.

Note: this component is available as of release 1.44.0

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, LRRedact } from '@logrocket/react-native';

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

useNativeID argument

If you'd rather use the nativeID property to mark a component as allowed when your app is executing on iOS, you can pass true for the the useNativeID argument when calling the LRAllowProps helper function.

ℹ️ Important usage information

  1. LRAllowProps also takes a allowTag string argument, so if you'll have to pass either undefined or lr-show if you want to use LRAllowProps with the default allow tag and nativeID property assignment on iOS.
  2. nativeID is only assignable on View components. In order to allow a Button or other component that is not a subclass of View, you will need to wrap it in an <LRAllow> component, rather than just applying LRAllowProps() to it.

Note: This argument is available as of release 1.44.0

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

<LRRedact>
  <View>
    <Text>Redacted part of the screen.</Text>
    <Text>Redacted part of the screen.</Text>
    <Text {...LRAllowProps(undefined, true)}>
      Part of the screen allowed via nativeID property on iOS
    </Text>
  </View>
</LRRedact>

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().