Skip to content

Commit 3cd8cff

Browse files
committed
Fix documentation for lazy in native tabs
1 parent 080f770 commit 3cd8cff

2 files changed

Lines changed: 12 additions & 2 deletions

File tree

versioned_docs/version-7.x/native-bottom-tab-navigator.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -558,7 +558,11 @@ The content is rendered twice for both placements, but only one is visible at a
558558

559559
#### `lazy`
560560

561-
Whether this screen should render only after the first time it's accessed. Defaults to `true`. Set it to `false` if you want to render the screen on the initial render of the navigator.
561+
Whether this screen should render only after the first time it's accessed. Defaults to `false`.
562+
563+
Enabling this option can cause a flicker when you tap a tab for the first time. The native component switches to the selected tab before React receives the event and re-renders the tab navigator with the screen content.
564+
565+
An alternative is to render a placeholder component in your screen that stays visible until the data for the screen is ready, and start fetching data in [`useFocusEffect`](use-focus-effect.md) or when [`useIsFocused`](use-is-focused.md) returns `true`. This way, the placeholder is shown when you switch to the screen for the first time instead of a blank screen.
562566

563567
#### `popToTopOnBlur`
564568

versioned_docs/version-8.x/bottom-tab-navigator.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,13 @@ See [Inactive screens](navigation-lifecycle.md#inactive-screens) for more detail
362362

363363
#### `lazy`
364364

365-
Whether this screen should render only after the first time it's accessed. Defaults to `true`. Set it to `false` if you want to render the screen on the initial render of the navigator.
365+
Whether this screen should render only after the first time it's accessed.
366+
367+
Defaults to `false` for the `native` implementation and `true` for the `custom` implementation.
368+
369+
When using the `native` implementation, enabling this option can cause a flicker when you tap a tab for the first time. The native component switches to the selected tab before React receives the event and re-renders the tab navigator with the screen content.
370+
371+
An alternative is to render a placeholder component in your screen that stays visible until the data for the screen is ready, and start fetching data in [`useFocusEffect`](use-focus-effect.md) or when [`useIsFocused`](use-is-focused.md) returns `true`. This way, the placeholder is shown when you switch to the screen for the first time instead of a blank screen.
366372

367373
#### `title`
368374

0 commit comments

Comments
 (0)