Add pull to resfresh example

Author: Nhacsam

example/Pages/Menu.js

@@ -74,6 +74,7 @@ const Menu = props =>
       text="Forms and buttons"
       target="avignon"
     />
+    <Button {...props} image={require('../assets/pullrefresh.jpg')} text="Pull To Refresh" target="pullrefresh" />
   </ScrollView>;
 
 Menu.route = {

example/Pages/PullToRefresh.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  Image,
+  TouchableOpacity,
+  View,
+  Dimensions,
+  RefreshControl,
+} from 'react-native';
+import { Header } from 'react-navigation';
+
+import HeaderImageScrollView from 'react-native-image-header-scroll-view';
+
+const MIN_HEIGHT = Header.HEIGHT;
+const MAX_HEIGHT = 200;
+
+class BasicUsage extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      refreshing: false,
+    };
+  }
+
+  _onRefresh() {
+    this.setState({
+      refreshing: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        refreshing: false,
+      });
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <HeaderImageScrollView
+          maxHeight={MAX_HEIGHT}
+          minHeight={MIN_HEIGHT}
+          minOverlayOpacity={0.4}
+          renderHeader={() =>
+            <Image source={require('../assets/pullrefresh.jpg')} style={styles.image} />}
+          refreshControl={
+            <RefreshControl
+              refreshing={this.state.refreshing}
+              onRefresh={this._onRefresh.bind(this)}
+              tintColor="white"
+            />
+          }
+          renderTouchableFixedForeground={() =>
+            <View style={{ height: MAX_HEIGHT, justifyContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
+                <Text style={styles.buttonText}>Click Me!</Text>
+              </TouchableOpacity>
+            </View>}
+        >
+          <View style={{ height: 1000 }} />
+        </HeaderImageScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    height: MAX_HEIGHT,
+    width: Dimensions.get('window').width,
+  },
+  button: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    borderColor: 'white',
+    backgroundColor: '#00000066',
+  },
+  buttonText: {
+    color: 'white',
+    backgroundColor: 'transparent',
+  },
+});
+
+export default BasicUsage;

example/Pages/index.js

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

example/assets/pullrefresh.jpg

@@ -998,7 +998,8 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
-				INFOPLIST_FILE = imageHeaderScrollView/Info.plist;
+				DEVELOPMENT_TEAM = "";
+				INFOPLIST_FILE = "$(SRCROOT)/imageHeaderScrollViewTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1015,7 +1016,8 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
-				INFOPLIST_FILE = imageHeaderScrollView/Info.plist;
+				DEVELOPMENT_TEAM = "";
+				INFOPLIST_FILE = "$(SRCROOT)/imageHeaderScrollViewTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",

example/ios/imageHeaderScrollView.xcodeproj/project.pbxproj

@@ -1,6 +1,6 @@
 import { StackNavigator } from 'react-navigation';
 
-import { Menu, TvShow, BasicUsage, ColorsPage, Avignon } from './Pages';
+import { Menu, TvShow, BasicUsage, ColorsPage, Avignon, PullToRefresh } from './Pages';
 
 export const App = StackNavigator(
   {
@@ -19,6 +19,9 @@ export const App = StackNavigator(
     avignon: {
       screen: Avignon,
     },
+    pullrefresh: {
+      screen: PullToRefresh,
+    },
   },
   {
     navigationOptions: {