Merge pull request #10 from bamlab/fix-content-size

Fix the height bug #7

Author: Nhacsam

example/Pages/Colors.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, Image, View, Dimensions } from 'react-native';
+import { NavigationBar } from '@exponent/ex-navigation';
+
+import HeaderImageScrollView from 'react-native-image-header-scroll-view';
+
+const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+
+const styles = StyleSheet.create({
+  image: {
+    height: 200,
+    width: Dimensions.get('window').width,
+  },
+});
+
+class ColorsPage extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
+        <HeaderImageScrollView
+          maxHeight={150}
+          minHeight={80}
+          fadeOutForeground
+          renderHeader={() => (
+            <Image source={require('../assets/cutecat.jpg')} style={styles.image} />
+          )}
+        >
+          <View style={{ height: 100, backgroundColor: 'blue' }} />
+          <View style={{ height: 100, backgroundColor: 'red' }} />
+          <View style={{ height: 100, backgroundColor: 'green' }} />
+          <View style={{ height: 100, backgroundColor: 'purple' }} />
+          <View style={{ height: 100, backgroundColor: 'orange' }} />
+          <View style={{ height: 100, backgroundColor: 'pink' }} />
+          <View style={{ height: 100, backgroundColor: 'brown' }} />
+          <View style={{ height: 100, backgroundColor: 'yellow' }} />
+        </HeaderImageScrollView>
+      </View>
+    );
+  }
+}
+
+ColorsPage.route = {
+  navigationBar: {
+    tintColor: 'white',
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    statusBarHeight: 0,
+    elevation: 0,
+  },
+};
+
+export default ColorsPage;

example/Pages/Menu.js

@@ -55,6 +55,7 @@ const Menu = () => (
     <StatusBar />
     <Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
     <Button image={tvShowContent.image} text="TV Show" target="tvShow" />
+    <Button image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
   </View>
 );
 

example/Pages/index.js

@@ -1,3 +1,4 @@
 export { default as Menu } from './Menu';
 export { default as TvShow } from './TvShow';
 export { default as BasicUsage } from './BasicUsage';
+export { default as ColorsPage } from './Colors';

example/assets/cutecat.jpg

@@ -11,12 +11,13 @@ import {
   StackNavigation,
 } from '@exponent/ex-navigation';
 
-import { Menu, TvShow, BasicUsage } from './Pages';
+import { Menu, TvShow, BasicUsage, ColorsPage } from './Pages';
 
 export const Router = createRouter(() => ({
   menu: () => Menu,
   tvShow: () => TvShow,
   basicUsage: () => BasicUsage,
+  colors: () => ColorsPage,
 }));
 
 class App extends React.Component {

example/main.js

@@ -148,7 +148,7 @@ class ImageHeaderScrollView extends Component {
 
     const childrenContainerStyle = StyleSheet.flatten([
       { transform: [{ translateY: headerScrollDistance }] },
-      { backgroundColor: 'white' },
+      { backgroundColor: 'white', paddingBottom: this.props.maxHeight },
       this.props.childrenStyle,
     ]);