fix: remove minHeight from contentContainerStyle

related to #8

README.md

@@ -247,8 +247,7 @@ Disable scroll for unfocused routes is optional, but prevents weird/delayed anim
 #### contentContainerStyle
 
 Content container style with top padding with the same height
-as the tab bar + header height, and a minHeight to prevent blanck space
-if the scroll content is smaller than the screen.
+as the tab bar + header height.
 
 in#### progressViewOffset
 

example/src/App.tsx

@@ -18,6 +18,7 @@ import Constants from 'expo-constants';
 import { Ionicons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-community/async-storage';
 import CollapsibleTabViewExample from './CollapsibleTabViewExample';
+import CollapsibleTabViewSmallContentExample from './CollapsibleTabViewSmallContentExample';
 import CollapsibleTabViewNoSnapExample from './CollapsibleTabViewNoSnapExample';
 import CollapsibleTabViewResizeExample from './CollapsibleTabViewResizeExample';
 import CollapsibleTabViewDemoExample from './CollapsibleTabViewDemoExample';
@@ -47,6 +48,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   CollapsibleTabViewNoSnapExample,
   CollapsibleTabViewResizeExample,
   CollapsibleTabViewDemoExample,
+  CollapsibleTabViewSmallContentExample,
 ];
 
 const KeepAwake = () => {

example/src/CollapsibleTabViewSmallContentExample.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Platform,
+  Dimensions,
+  StatusBar,
+} from 'react-native';
+import { SceneMap, NavigationState } from 'react-native-tab-view';
+
+import {
+  CollapsibleTabView,
+  useCollapsibleScene,
+  CollapsibleTabViewProps,
+} from 'react-native-collapsible-tab-view';
+
+import { AnimatedAlbums } from './Shared/Albums';
+
+type Route = {
+  key: string;
+  title: string;
+};
+
+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'
+  );
+
+  return (
+    <AnimatedAlbums
+      nCovers={2} // only two covers
+      {...rest}
+      contentContainerStyle={{
+        ...contentContainerStyle,
+        minHeight: DEVICE_HEIGHT + HEADER_HEIGHT - APP_HEADER_HEIGHT,
+      }}
+    />
+  );
+};
+
+export const AlbumsLargeScene = () => {
+  const scenePropsAndRef = useCollapsibleScene('albums-large');
+  return <AnimatedAlbums {...scenePropsAndRef} />;
+};
+
+export default class CollapsibleTabViewSmallContentExample extends React.Component<
+  Partial<CollapsibleTabViewProps<Route>>,
+  State
+> {
+  // eslint-disable-next-line react/sort-comp
+  static title = 'Collapsible Tab View Small Content';
+  static backgroundColor = '#2196f3';
+  static appbarElevation = 0;
+
+  state = {
+    index: 0,
+    routes: [
+      { key: 'albums-small', title: 'Small' },
+      { key: 'albums-large', title: 'Large' },
+    ],
+  };
+
+  private handleIndexChange = (index: number) =>
+    this.setState({
+      index,
+    });
+
+  private renderHeader = () => (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>COLLAPSIBLE</Text>
+    </View>
+  );
+
+  private renderScene = SceneMap({
+    'albums-small': AlbumsSmallScene,
+    'albums-large': AlbumsLargeScene,
+  });
+
+  render() {
+    return (
+      <CollapsibleTabView<Route>
+        navigationState={this.state}
+        renderScene={this.renderScene}
+        renderHeader={this.renderHeader}
+        onIndexChange={this.handleIndexChange}
+        headerHeight={HEADER_HEIGHT}
+        {...this.props}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    height: HEADER_HEIGHT,
+    backgroundColor: '#2196f3',
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 4,
+  },
+  headerText: {
+    color: 'white',
+    fontSize: 24,
+  },
+});

example/src/Shared/Albums.tsx

@@ -21,8 +21,8 @@ const COVERS = [
   require('../../assets/album-art-8.jpg'),
 ];
 
-const albumsContent = () =>
-  COVERS.map((source, i) => (
+const albumsContent = (n = 8) =>
+  [...COVERS.filter((_e, i) => i < n)].map((source, i) => (
     // eslint-disable-next-line react/no-array-index-key
     <Image key={i} source={source} style={styles.cover} />
   ));
@@ -45,16 +45,17 @@ export const AnimatedAlbums = React.forwardRef<
   any,
   {
     contentContainerStyle?: ViewStyle;
+    nCovers?: number;
   }
->(({ contentContainerStyle, ...rest }, ref) => {
+>(({ nCovers = 8, contentContainerStyle, ...rest }, ref) => {
   return (
     <Animated.ScrollView
       ref={ref}
       style={styles.container}
       contentContainerStyle={[styles.content, contentContainerStyle]}
       {...rest}
     >
-      {albumsContent()}
+      {albumsContent(nCovers)}
     </Animated.ScrollView>
   );
 });

src/types.ts

@@ -74,12 +74,10 @@ export type CollapsibleScenePropsAndRef = {
   ref: GetRef;
   /**
    * Content container style with top padding with the same height
-   * as the tab bar + header height, and a minHeight to prevent blanck space
-   * if the scroll content is smaller than the screen.
+   * as the tab bar + header height
    */
   contentContainerStyle: {
     paddingTop: number;
-    minHeight: number;
   };
   /**
    * Needed for the loading indicator to show correctly on android.

src/useCollapsibleScene.tsx

@@ -1,4 +1,4 @@
-import { Animated, Dimensions } from 'react-native';
+import { Animated } from 'react-native';
 import { Route } from 'react-native-tab-view';
 
 import type { CollapsibleScenePropsAndRef } from './types';
@@ -53,7 +53,6 @@ const useCollapsibleScene = <T extends Route>(
     ref: buildGetRef(routeKey),
     contentContainerStyle: {
       paddingTop: headerHeight + tabBarHeight,
-      minHeight: Dimensions.get('window').height + headerHeight - tabBarHeight,
     },
     progressViewOffset: headerHeight + tabBarHeight,
     ...rest,