diff --git a/src/Container.tsx b/src/Container.tsx index e782b903..c53ff134 100644 --- a/src/Container.tsx +++ b/src/Container.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback } from 'react' import { StyleSheet, useWindowDimensions, View } from 'react-native' import PagerView from 'react-native-pager-view' import Animated, { @@ -71,11 +71,11 @@ export const Container = React.memo( headerContainerStyle, cancelTranslation, containerStyle, - lazy, - cancelLazyFadeIn, pagerProps, onIndexChange, onTabChange, + lazy, + cancelLazyFadeIn, width: customWidth, allowHeaderOverscroll, }, @@ -349,6 +349,27 @@ export const Container = React.memo( [onTabPress] ) + const renderContent = useCallback( + (tabName: string, i: number) => { + if (lazy) { + return ( + + {React.Children.toArray(children)[i] as React.ReactElement} + + ) + } + return ( + <>{React.Children.toArray(children)[i] as React.ReactElement} + ) + }, + [cancelLazyFadeIn, children, lazy] + ) + return ( - - { - React.Children.toArray(children)[ - i - ] as React.ReactElement - } - + {renderContent(tabName, i)} )