From 2b67ee30bedf1e837ebfc40ba75a6241e401b085 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 6 Mar 2021 23:10:03 +0100
Subject: [PATCH] feat: support a function for lazy

---
 README.md       | 23 ++++++++++++++++++++---
 src/TabView.tsx |  6 ++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 80d0c149..22973507 100644
--- a/README.md
+++ b/README.md
@@ -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`
 
@@ -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.
 
diff --git a/src/TabView.tsx b/src/TabView.tsx
index 0ee9c2e6..fe8cf9b1 100644
--- a/src/TabView.tsx
+++ b/src/TabView.tsx
@@ -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>;
@@ -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}