# Repro Steps
Repro Steps show you all of the interactions a user makes with your app up until a bug or crash is reported, grouped by app view. For each view that a user visits, all of the steps that they commit within those views are captured and displayed as a log, grouped by view.
An example of Repro Steps in the Luciq dashboard.
### Setting Up Repro Steps
Repro steps are enabled by default and support the 2 most popular React Native navigation libraries.
#### React-Navigation
**v6**
We support navigation v6 using `navigationRef` as follows:
{% code title="JavaScript" %}
```javascript
const navigationRef = useNavigationContainerRef();
useEffect(() => {
const unregisterListener = Luciq.setNavigationListener(navigationRef);
return unregisterListener;
}, [navigationRef]);
```
{% endcode %}
You then need to pass it to the `ref` prop in the `` component like below:
{% code title="JSX" %}
```jsx
// add navigation Ref to NavigationContainer
...
```
{% endcode %}
**v5**
You'll need to set the `onStateChange` to `Luciq.onStateChange` in your `NavigationContainer` as follows:
{% code title="JavaScript" %}
```javascript
```
{% endcode %}
**v4 or Earlier**
You'll need to set the `onNavigationStateChange` to `Luciq.onNavigationStateChange` in your app wrapper as follows:
{% code title="JavaScript" %}
```javascript
export default () => (
);
```
{% endcode %}
#### React-Native-Navigation
You'll need to register the `Luciq.componentDidAppearListener` listener using the following code:
{% code title="JavaScript" overflow="wrap" %}
```javascript
Navigation.events().registerComponentDidAppearListener(Luciq.componentDidAppearListener);
```
{% endcode %}
#### Manual Navigation Recording
Alternatively, if you'd like to manually record screen changes, you can use the API below:
{% code title="JavaScript" %}
```javascript
Luciq.reportScreenChange('screenName');
```
{% endcode %}
### Logged Data
#### Captured Events
**UI Interactions**
For the following gestures, only the gesture is logged and displayed:
* Swipe
* Scroll
* Pinch
* Tap
* Force touch
* Double tap
* Enabling/disabling a switch
* Changing the value of a slider
* Editing a text field
**Lifecycle Events**
Whenever one of the following lifecycle events occurs, it will be captured and shown on the timeline:
* Application is moved to the background
* Application is moved to the foreground
* Application becomes active
* Application becomes inactive
* Memory warning
#### Extra Details
Depending on the event, you'll find further details displayed as part of the log statement.
* Tap, double tap, and force touch: the SDK always tries to first capture the text rendered inside the UI that the user is interacting with, then we fall back to capturing the icon only with the buttons and navigation items, then, we fall back to the accessibility labels.
* Switch: both the accessibility label as well as whether the user enabled or disabled the switch are logged.
* Slider: both the accessibility label as well as the value that the user moves the slider to it are captured.
* Text fields: first, the SDK tried to capture the placeholder, then we fall back to the accessibility label.
#### Examples
Here are some examples of how steps look like:
* `Tapped on the button "Send"`
* `Double tapped on UI that contains "Instructions"`
* `Started editing “Password“`
* `Enabled the switch “Push Notifications“`
* `Moved the slider “Text Size“ to 10%`
* `App went to the background`
* `App became active`
* `Memory warning`
### User Privacy
#### Disclaimer
A disclaimer will be shown at the bottom of the report. It helps your users view all the screenshots taken for the Repro Steps before sending a report and can delete them as well.
View the Repro Steps disclaimer
#### Private Views
You can mark any view containing sensitive information, such as payment details, as private using Luciq. A private view will automatically appear with a black overlay in any screenshot. To designate a view as private, use the following property in JSX:
{% code title="JSX" overflow="wrap" %}
```jsx
this.textView = c} style={styles.welcome}>This is a private view!
```
{% endcode %}
To make the view private, use the following API:
{% code title="JavaScript" %}
```javascript
Luciq.addPrivateView(this.textView);
```
{% endcode %}
{% hint style="info" %}
Good to Know
* Views that are only used for layout or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Therefore, calling Luciq.addPrivateView on a view that has no style or is redundant won’t mask it, as the view will be optimized out.
* For iOS, private view black out screenshots (Repro Steps) and screen recordings.
* For Android, private view doesn’t black out screens in screen recording, to achieve this use Android’s [FLAG SECURE](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#FLAG_SECURE). To override flag secure for debugging, see [Overriding Secure Flag](#overriding-secure-flag-android-only) below.
{% endhint %}
### Overriding Secure Flag (Android Only)
During development and testing, you may want Luciq to capture screenshots on Android screens marked with `FLAG_SECURE` to help with debugging. You can override this behavior by passing `ignoreAndroidSecureFlag` in the SDK initialization config:
{% code title="index.js" %}
```javascript
Luciq.init({
token: ‘APP_TOKEN’,
invocationEvents: [InvocationEvent.shake],
ignoreAndroidSecureFlag: true,
});
```
{% endcode %}
{% hint style="warning" %}
This option is intended for debug and staging builds. Avoid enabling it in production, as it will allow the SDK to capture screenshots on secure screens that may contain sensitive content.
{% endhint %}
### Disabling and Enabling Repro Steps
Repro Steps is by default enabled with screenshots for bug reporting and enabled without screenshots for crash reporting.
{% code title="JavaScript" overflow="wrap" %}
```javascript
import Luciq, { ReproStepsMode } from '@luciq/react-native';
Luciq.setReproStepsConfig({
bug: ReproStepsMode.enabled,
crash: ReproStepsMode.enabled,
});
```
{% endcode %}
To configure Repro Steps, use the Luciq.setReproStepsConfig() method. You can configure the desired mode for bug reports and crash reports separately using the bug and crash parameters or configure both using all parameters, which overrides both bug and crash.
{% code title="JavaScript" %}
```javascript
Luciq.setReproStepsConfig({
all: ReproStepsMode.enabled,
});
```
{% endcode %}
Here are the possible arguments.
{% code title="JavaScript" %}
```javascript
//Enable Repro Steps with screenshots
ReproStepsMode.enabled
//Enable Repro Steps without screenshots
ReproStepsMode.enabledWithNoScreenshots
//Disable Repro Steps
ReproStepsMode.disabled
```
{% endcode %}
**Example**
| API | Meaning |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Luciq.setReproStepsConfig({all: ReproStepsMode.enabled});` or `Luciq.setReproStepsConfig({bug: ReproStepsMode.enabled, crash: ReproStepsMode.enabled});` | Enable with screenshot for both Bug Reporting and Crash Reporting. When the all value is present, it overrides both the bug and crash arguments. |
| `Luciq.setReproStepsConfig({crash: ReproStepsMode.enabledWithNoScreenshots});` | Enable with no screenshots for Crash Reporting. (Bug Reporting still retains the default value enabled) |
| `Luciq.setReproStepsConfig({bug: ReproStepsMode.enabled});` | Enable with screenshot for Bug Reporting. (Crash Reporting still retains the default value enabled without screenshots) |
| `Luciq.setReproStepsConfig({all: ReproStepsMode.disabled});` or `Luciq.setReproStepsConfig({bug: ReproStepsMode.disabled, crash: ReproStepsMode.disabled});` | Completely disable for both Bug Reporting and Crash Reporting. |
{% hint style="warning" %}
Screenshots are always disabled with Crash Reporting.
For Crash Reporting, the screenshots are always disabled as the data is silently collected without any interaction from the user. This decision is part of our ongoing commitment to end-users' privacy.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.luciq.ai/react-native/setup-luciq-for-react-native/logs-and-profiling/repro-steps.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.