diff --git a/example/src/CollapsibleTabViewSmallContentExample.tsx b/example/src/CollapsibleTabViewSmallContentExample.tsx index 82164eab..c56034ba 100644 --- a/example/src/CollapsibleTabViewSmallContentExample.tsx +++ b/example/src/CollapsibleTabViewSmallContentExample.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; -import { - StyleSheet, - View, - Text, - Platform, - Dimensions, - StatusBar, -} from 'react-native'; +import { StyleSheet, View, Text } from 'react-native'; import { SceneMap, NavigationState } from 'react-native-tab-view'; import { @@ -25,33 +18,14 @@ type Route = { type State = NavigationState; const HEADER_HEIGHT = 250; -const APP_HEADER_HEIGHT = 56; // from "./App" - -const RN_DEVICE_HEIGHT = Dimensions.get('window').height; - -// Fix for android devices with noch -const DEVICE_HEIGHT = - Platform.select({ - ios: RN_DEVICE_HEIGHT, - android: - !StatusBar.currentHeight || StatusBar.currentHeight > 24 - ? RN_DEVICE_HEIGHT - : RN_DEVICE_HEIGHT - StatusBar.currentHeight, - }) || RN_DEVICE_HEIGHT; export const AlbumsSmallScene = () => { - const { contentContainerStyle, ...rest } = useCollapsibleScene( - 'albums-small' - ); + const propsAndRef = useCollapsibleScene('albums-small'); return ( ); }; diff --git a/example/src/Shared/Albums.tsx b/example/src/Shared/Albums.tsx index ac4d0f6f..9c5f033d 100644 --- a/example/src/Shared/Albums.tsx +++ b/example/src/Shared/Albums.tsx @@ -8,6 +8,7 @@ import { StyleSheet, ViewStyle, Animated, + View, } from 'react-native'; const COVERS = [ @@ -52,10 +53,10 @@ export const AnimatedAlbums = React.forwardRef< - {albumsContent(nCovers)} + {albumsContent(nCovers)} ); }); diff --git a/src/CollapsibleTabView.tsx b/src/CollapsibleTabView.tsx index d98dfca2..76016fcd 100644 --- a/src/CollapsibleTabView.tsx +++ b/src/CollapsibleTabView.tsx @@ -4,6 +4,7 @@ import { Animated, ViewStyle, LayoutChangeEvent, + View, } from 'react-native'; import { TabView, @@ -295,25 +296,36 @@ const CollapsibleTabView = ({ ); }; + const [containerHeight, setContainerHeight] = React.useState< + number | undefined + >(undefined); + + const onLayout = React.useCallback((e: LayoutChangeEvent) => { + setContainerHeight(e.nativeEvent.layout.height); + }, []); + return ( - - - + + + + + ); }; @@ -324,6 +336,10 @@ const styles = StyleSheet.create({ position: 'absolute', width: '100%', }, + container: { + flex: 1, + overflow: 'hidden', + }, }); export default CollapsibleTabView; diff --git a/src/types.ts b/src/types.ts index 53d11e9f..228dc2e0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -48,6 +48,7 @@ export type CollapsibleContext = { buildGetRef: (routeKey: string) => GetRef; headerHeight: number; tabBarHeight: number; + containerHeight: number; onMomentumScrollBegin: ( event: NativeSyntheticEvent ) => void; @@ -78,6 +79,7 @@ export type CollapsibleScenePropsAndRef = { */ contentContainerStyle: { paddingTop: number; + minHeight: number; }; /** * Needed for the loading indicator to show correctly on android. diff --git a/src/useCollapsibleScene.tsx b/src/useCollapsibleScene.tsx index bca02bd3..7c9a0dcc 100644 --- a/src/useCollapsibleScene.tsx +++ b/src/useCollapsibleScene.tsx @@ -36,6 +36,7 @@ const useCollapsibleScene = ( buildGetRef, headerHeight, tabBarHeight, + containerHeight, ...rest } = context; @@ -53,6 +54,7 @@ const useCollapsibleScene = ( ref: buildGetRef(routeKey), contentContainerStyle: { paddingTop: headerHeight + tabBarHeight, + minHeight: containerHeight + headerHeight, }, progressViewOffset: headerHeight + tabBarHeight, ...rest,