feat: add content container minHeight

related: #6, #8
PedroBern · Dec 4, 2020 · a633910 · a633910
1 parent e9905e1
commit a633910
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 49 deletions.
diff --git 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<Route>;
 
 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 (
     <AnimatedAlbums
       nCovers={2} // only two covers
-      {...rest}
-      contentContainerStyle={{
-        ...contentContainerStyle,
-        minHeight: DEVICE_HEIGHT + HEADER_HEIGHT - APP_HEADER_HEIGHT,
-      }}
+      {...propsAndRef}
     />
   );
 };

diff --git 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<
     <Animated.ScrollView
       ref={ref}
       style={styles.container}
-      contentContainerStyle={[styles.content, contentContainerStyle]}
+      contentContainerStyle={contentContainerStyle}
       {...rest}
     >
-      {albumsContent(nCovers)}
+      <View style={styles.content}>{albumsContent(nCovers)}</View>
     </Animated.ScrollView>
   );
 });

diff --git 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 = <T extends Route>({
     );
   };
 
+  const [containerHeight, setContainerHeight] = React.useState<
+    number | undefined
+  >(undefined);
+
+  const onLayout = React.useCallback((e: LayoutChangeEvent) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+
   return (
-    <CollapsibleContextProvider
-      value={{
-        activeRouteKey: routes[index][routeKeyProp as keyof Route] as string,
-        scrollY,
-        buildGetRef,
-        headerHeight,
-        tabBarHeight,
-        onMomentumScrollBegin,
-        onScrollEndDrag,
-        onMomentumScrollEnd,
-      }}
-    >
-      <TabView
-        {...tabViewProps}
-        navigationState={{ index, routes }}
-        renderTabBar={renderTabBar}
-      />
-    </CollapsibleContextProvider>
+    <View style={styles.container} onLayout={onLayout}>
+      <CollapsibleContextProvider
+        value={{
+          activeRouteKey: routes[index][routeKeyProp as keyof Route] as string,
+          scrollY,
+          buildGetRef,
+          headerHeight,
+          tabBarHeight,
+          onMomentumScrollBegin,
+          onScrollEndDrag,
+          onMomentumScrollEnd,
+          containerHeight: containerHeight || 0,
+        }}
+      >
+        <TabView
+          {...tabViewProps}
+          navigationState={{ index, routes }}
+          renderTabBar={renderTabBar}
+        />
+      </CollapsibleContextProvider>
+    </View>
   );
 };
 
@@ -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
@@ -48,6 +48,7 @@ export type CollapsibleContext = {
   buildGetRef: (routeKey: string) => GetRef;
   headerHeight: number;
   tabBarHeight: number;
+  containerHeight: number;
   onMomentumScrollBegin: (
     event: NativeSyntheticEvent<NativeScrollEvent>
   ) => 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
@@ -36,6 +36,7 @@ const useCollapsibleScene = <T extends Route>(
     buildGetRef,
     headerHeight,
     tabBarHeight,
+    containerHeight,
     ...rest
   } = context;
 
@@ -53,6 +54,7 @@ const useCollapsibleScene = <T extends Route>(
     ref: buildGetRef(routeKey),
     contentContainerStyle: {
       paddingTop: headerHeight + tabBarHeight,
+      minHeight: containerHeight + headerHeight,
     },
     progressViewOffset: headerHeight + tabBarHeight,
     ...rest,