import React , { memo , ReactElement } from "react" ; import { Animated , FlatListProps , Platform , ViewProps } from "react-native" ; import { Theme } from "./CBTheme" ; export const CBTabViewOffset = Platform . OS === "ios" ? - Theme . sizing . header : 0 ; export interface CBAnimatedTabViewProps < T > extends ViewProps , Pick < FlatListProps < T > , "data" | "getItemLayout" | "initialNumToRender" | "maxToRenderPerBatch" | "onContentSizeChange" | "onMomentumScrollBegin" | "onMomentumScrollEnd" | "onScrollEndDrag" | "renderItem" | "updateCellsBatchingPeriod" | "windowSize" | "ListEmptyComponent" > { onRef : ( scrollableChild : Animated . FlatList < T > ) => void ; scrollY ? : Animated . AnimatedValue ; refreshControl ? : ReactElement ; } const CBAnimatedTabViewWithoutMemo = < T extends any > ( { data , renderItem , getItemLayout , onContentSizeChange , initialNumToRender , maxToRenderPerBatch , onMomentumScrollBegin , onMomentumScrollEnd , onScrollEndDrag , onRef , scrollY , refreshControl , ListEmptyComponent , } ) => { const handleScroll = scrollY && Animated . event ( [ { nativeEvent : { contentOffset : { y : scrollY } } } ] , { useNativeDriver : true } ) ; return ( < Animated . FlatList < T > style = { { marginBottom : Theme . sizing . tabbar } } data = { data as readonly Animated . WithAnimatedValue < T > [ ] } renderItem = { renderItem } keyboardShouldPersistTaps = "always" ListEmptyComponent = { ListEmptyComponent } getItemLayout = { getItemLayout } initialNumToRender = { initialNumToRender } maxToRenderPerBatch = { maxToRenderPerBatch } ref = { onRef } refreshControl = { refreshControl } onContentSizeChange = { onContentSizeChange } onMomentumScrollBegin = { onMomentumScrollBegin } onMomentumScrollEnd = { onMomentumScrollEnd } onScroll = { handleScroll } onScrollEndDrag = { onScrollEndDrag } contentInset = { Platform . select ( { ios : { top : Theme . sizing . header } } ) } contentOffset = { Platform . select ( { ios : { x : 0 , y : - Theme . sizing . header } } ) } contentContainerStyle = { Platform . select ( { ios : { flexGrow : 1 , paddingBottom : Theme . spacing . gutter } , android : { flexGrow : 1 , paddingTop : Theme . sizing . header , paddingBottom : Theme . spacing . gutter } } ) } / > ) ; } ; export const CBAnimatedTabView = memo ( CBAnimatedTabViewWithoutMemo ) as typeof CBAnimatedTabViewWithoutMemo ;