feat: add lazy support

fix #19

README.md

@@ -45,9 +45,10 @@ The [react-native-tab-view](https://github.com/satya164/react-native-tab-view) e
 - Animations and interactions on the UI thread
 - Highly customizable
 - Fully typed with [TypeScript](https://typescriptlang.org)
+- Lazy support with fade-in animation
 - DiffClamp tabs
-- Interpotated tabs
-- Scroll snap (with interpotated tabs)
+- Interpolated tabs
+- Scroll snap (with interpolated tabs)
 - Animated snap (with diffClamp tabs)
 
 ## Installation
@@ -257,6 +258,8 @@ const Example: React.FC<Props> = () => {
 | `headerContainerStyle?` | Styles applied to the header and tabbar container                                              |         |
 | `containerStyle?`       | Styles applied to the view container.                                                          |         |
 | `cancelTranslation?`    | This will cancel the collapsible effect, and render a static tabbar / header.                  | `false` |
+| `lazy?`                 | Mount the screen only when it's focused. It has a default fade in animation.                   | `false` |
+| `cancelLazyFadeIn?`     | Cancel the fade in animation if `lazy={true}`                                                  | `false` |
 
 ### `Tabs.ScrollView` and `Tabs.FlatList`
 

example/src/App.tsx

@@ -16,6 +16,7 @@ import {
 import Default from './Default'
 import DiffClamp from './DiffClamp'
 import DiffClampSnap from './DiffClampSnap'
+import Lazy from './Lazy'
 import QuickStartDemo from './QuickStartDemo'
 import ScrollOnHeader from './ScrollOnHeader'
 import Snap from './Snap'
@@ -26,6 +27,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   Snap,
   DiffClamp,
   DiffClampSnap,
+  Lazy,
   // CenteredEmptyList,
   ScrollOnHeader,
   QuickStartDemo,

example/src/Lazy.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import ExampleComponent from './Shared/ExampleComponent'
+import { buildHeader } from './Shared/Header'
+import { ExampleComponentType } from './types'
+
+const title = 'Lazy Example'
+
+const Header = buildHeader(title)
+
+const DefaultExample: ExampleComponentType = () => {
+  return <ExampleComponent HeaderComponent={Header} lazy />
+}
+
+DefaultExample.title = title
+
+export default DefaultExample

src/createCollapsibleTabs.tsx

@@ -14,6 +14,7 @@ import Animated, {
   useAnimatedReaction,
   scrollTo,
   withTiming,
+  runOnJS,
 } from 'react-native-reanimated'
 
 import { Props, ContextType, ScrollViewProps, FlatListProps } from './types'
@@ -22,6 +23,12 @@ const windowWidth = Dimensions.get('window').width
 
 const AnimatedFlatList = Animated.createAnimatedComponent(RNFlatList)
 
+export const getItemLayout = (_: unknown, index: number) => ({
+  length: windowWidth,
+  offset: windowWidth * index,
+  index,
+})
+
 const createCollapsibleTabs = <T extends string>() => {
   const Context = React.createContext<ContextType<T> | undefined>(undefined)
 
@@ -45,6 +52,8 @@ const createCollapsibleTabs = <T extends string>() => {
     headerContainerStyle,
     cancelTranslation,
     containerStyle,
+    lazy,
+    cancelLazyFazeIn,
   }) => {
     const [containerHeight, setContainerHeight] = React.useState<
       number | undefined
@@ -64,7 +73,8 @@ const createCollapsibleTabs = <T extends string>() => {
     const oldAccScrollY = useSharedValue(0)
     const accDiffClamp = useSharedValue(0)
     const index = useSharedValue(0)
-    const tabNames = useSharedValue(Object.keys(refMap))
+    // @ts-ignore
+    const tabNames = useSharedValue<T[]>(Object.keys(refMap))
     // @ts-ignore
     const focusedTab = useSharedValue<T>(tabNames.value[index.value])
 
@@ -115,10 +125,23 @@ const createCollapsibleTabs = <T extends string>() => {
     )
 
     const renderItem = React.useCallback(
-      ({ index }) => {
-        return children[index]
+      ({ index: i }) => {
+        return lazy ? (
+          <Lazy
+            name={tabNames.value[i]}
+            // todo:
+            // set startMounted to initial scene instead of 0,
+            // to support starting on specific tab
+            startMounted={i === 0}
+            cancelLazyFazeIn={cancelLazyFazeIn}
+          >
+            {children[i]}
+          </Lazy>
+        ) : (
+          children[i]
+        )
       },
-      [children]
+      [children, lazy, tabNames.value, cancelLazyFazeIn]
     )
 
     const stylez = useAnimatedStyle(() => {
@@ -235,12 +258,75 @@ const createCollapsibleTabs = <T extends string>() => {
             pagingEnabled
             onScroll={scrollHandlerX}
             showsHorizontalScrollIndicator={false}
+            getItemLayout={getItemLayout}
           />
         </View>
       </Context.Provider>
     )
   }
 
+  const Lazy: React.FC<{
+    name: T
+    startMounted?: boolean
+    cancelLazyFazeIn?: boolean
+    children: React.ReactElement
+  }> = ({ children, name, startMounted, cancelLazyFazeIn }) => {
+    const { focusedTab, refMap, scrollY, tabNames } = useTabsContext()
+    const [canMount, setCanMount] = React.useState(!!startMounted)
+    const opacity = useSharedValue(cancelLazyFazeIn ? 1 : 0)
+
+    const allowToMount = React.useCallback(() => {
+      // wait the scene to be at least 50 ms focused, before mouting
+      setTimeout(() => {
+        if (focusedTab.value === name) {
+          setCanMount(true)
+        }
+      }, 50)
+    }, [focusedTab.value, name])
+
+    useAnimatedReaction(
+      () => {
+        return focusedTab.value === name
+      },
+      (focused) => {
+        if (focused && !canMount) {
+          runOnJS(allowToMount)()
+        }
+      },
+      [canMount, focusedTab]
+    )
+
+    useDerivedValue(() => {
+      if (canMount) {
+        const tabIndex = tabNames.value.findIndex((n) => n === name)
+        // @ts-ignore
+        scrollTo(refMap[name], 0, scrollY.value[tabIndex], false)
+        if (!cancelLazyFazeIn) opacity.value = withTiming(1)
+      }
+    }, [canMount, cancelLazyFazeIn])
+
+    const stylez = useAnimatedStyle(() => {
+      return {
+        opacity: opacity.value,
+      }
+    }, [])
+
+    return canMount ? (
+      cancelLazyFazeIn ? (
+        children
+      ) : (
+        <Animated.View
+          pointerEvents="box-none"
+          style={[styles.container, !cancelLazyFazeIn && stylez]}
+        >
+          {children}
+        </Animated.View>
+      )
+    ) : (
+      <ScrollView name={name} />
+    )
+  }
+
   const useScrollHandlerY = (name: T) => {
     const {
       accDiffClamp,
@@ -425,7 +511,7 @@ const createCollapsibleTabs = <T extends string>() => {
     )
   }
 
-  return { FlatList, ScrollView, Container, useTabsContext }
+  return { FlatList, ScrollView, Container, useTabsContext, Lazy }
 }
 
 const styles = StyleSheet.create({

src/types.ts

@@ -36,6 +36,8 @@ export type Props<T extends string> = {
   headerContainerStyle?: StyleProp<Animated.AnimateStyle<ViewStyle>>
   containerStyle?: ViewStyle
   cancelTranslation?: boolean
+  lazy?: boolean
+  cancelLazyFazeIn?: boolean
 }
 
 export type ContextType<T extends string> = {