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
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
<LRRedact>
componentA 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
LRRedactProps
helperIn 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
testID
to redact viewsApply 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
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
<LRAllow>
componentA 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
LRAllowProps
helperIn 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
testID
to allow viewsApply 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()
.