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:

• Native Android SDK
• Native iOS SDK

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.