Skip to main content

Best practices

Conditional Rendering​

If you want to show views based on conditional rendering, it is important that ReactNavigationPerformanceView is rendered unconditionally. You can take a look at the following example for reference:

ts
// Property determining which component is rendered
let componentNumber = 0;
// Component0 and Component1 should not be wrapped in `ReactNavigationPerformanceView`
const childView = componentNumber === 0 ? <Component0 /> : <Component1 />;
<ReactNavigationPerformanceView screenName="MyScreen" interactive renderPassName={`interactive_${componentNumber}`}>
  {childView}
</ReactNavigationPerformanceView>;
ts
// Property determining which component is rendered
let componentNumber = 0;
// Component0 and Component1 should not be wrapped in `ReactNavigationPerformanceView`
const childView = componentNumber === 0 ? <Component0 /> : <Component1 />;
<ReactNavigationPerformanceView screenName="MyScreen" interactive renderPassName={`interactive_${componentNumber}`}>
  {childView}
</ReactNavigationPerformanceView>;