Skip to content
This repository has been archived by the owner on Nov 27, 2022. It is now read-only.

Commit

Permalink
feat: support a function for lazy
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Mar 6, 2021
1 parent e1f96ef commit 2b67ee3
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 5 deletions.
23 changes: 20 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -317,9 +317,26 @@ Position of the tab bar in the tab view. Possible values are `'top'` and `'botto

##### `lazy`

Boolean indicating whether to lazily render the scenes. By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of unfocused scenes until the user sees them. To enable lazy rendering, set `lazy` to `true`.
Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes.

When you enable `lazy`, the unfocused screens will usually take some time to render when they come into focus. You can use the `renderLazyPlaceholder` prop to customize what the user sees during this short period.
By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of unfocused scenes until the user sees them. To enable lazy rendering for a particular scene, return `true` from `getLazy` for that `route`:

```js
<TabView
lazy={({ route }) => route.name === 'Albums'}
...
/>
```

When you enable lazy rendering for a screen, it will usually take some time to render when it comes into focus. You can use the `renderLazyPlaceholder` prop to customize what the user sees during this short period.

You can also pass a boolean to enable lazy for all of the scenes:

```js
<TabView
lazy
/>
```

##### `lazyPreloadDistance`

Expand Down Expand Up @@ -580,7 +597,7 @@ Opacity for pressed tab (iOS and Android < 5.0 only).

##### `scrollEnabled`

Boolean indicating whether to enable scrollable tabs.
Boolean indicating whether to make the tab bar scrollable.

If you set `scrollEnabled` to `true`, you should also specify a `width` in `tabStyle` to improve the initial render.

Expand Down
6 changes: 4 additions & 2 deletions src/TabView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export type Props<T extends Route> = PagerCommonProps & {
) => React.ReactNode;
tabBarPosition: 'top' | 'bottom';
initialLayout?: { width?: number; height?: number };
lazy: boolean;
lazy: ((props: { route: T }) => boolean) | boolean;
lazyPreloadDistance: number;
removeClippedSubviews?: boolean;
sceneContainerStyle?: StyleProp<ViewStyle>;
Expand Down Expand Up @@ -184,7 +184,9 @@ export default class TabView<T extends Route> extends React.Component<
removeListener={removeListener}
key={route.key}
index={i}
lazy={lazy}
lazy={
typeof lazy === 'function' ? lazy({ route }) : lazy
}
lazyPreloadDistance={lazyPreloadDistance}
navigationState={navigationState}
style={sceneContainerStyle}
Expand Down

0 comments on commit 2b67ee3

Please sign in to comment.