Add Basic Usage Demo

Author: Nhacsam

example/Pages/BasicUsage.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
+import { NavigationBar } from '@exponent/ex-navigation';
+
+import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
+
+const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: -MIN_HEIGHT,
+    flex: 1,
+  },
+  image: {
+    height: 200,
+    width: Dimensions.get('window').width,
+  },
+});
+
+
+class BasicUsage extends React.Component {
+  render() {
+    return (
+      <View style={styles.container} >
+        <HeaderImageScrollView
+          maxHeight={200}
+          minHeight={MIN_HEIGHT}
+          renderHeader={() => (
+            <Image source={require('../assets/NZ.jpg')} style={styles.image} />
+          )}
+        >
+          <View style={{ height: 1000 }}>
+            <TriggeringView onHide={() => console.log('text hidden')} >
+              <Text>Scroll Me!</Text>
+            </TriggeringView>
+          </View>
+        </HeaderImageScrollView>
+      </View>
+    );
+  }
+}
+
+BasicUsage.route = {
+  navigationBar: {
+    tintColor: 'white',
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    statusBarHeight: 0,
+    elevation: 0,
+  },
+};
+
+export default BasicUsage;

example/Pages/Menu.js

@@ -14,8 +14,8 @@ const styles = StyleSheet.create({
   button: {
     height: 100,
     width: Dimensions.get('window').width - 60,
-    backgroundColor: '#cccccc',
     borderRadius: 10,
+    marginVertical: 15,
   },
   buttonText: {
     color: 'white',
@@ -32,8 +32,6 @@ const styles = StyleSheet.create({
   }
 });
 
-console.log(Router);
-
 @withNavigation
 class Button extends React.Component {
   render() {
@@ -55,6 +53,7 @@ class Button extends React.Component {
 const Menu = () => (
   <View style={styles.page}>
     <StatusBar />
+    <Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
     <Button image={tvShowContent.image} text="TV Show" target="tvShow" />
   </View>
 );

example/Pages/index.js

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

example/Pages/tvShow.js

@@ -12,8 +12,7 @@ import * as Animatable from 'react-native-animatable';
 import { NavigationBar } from '@exponent/ex-navigation';
 
 
-// import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
-import HeaderImageScrollView, { TriggeringView } from '../ImageHeaderScrollView';
+import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
 import tvShowContent from '../assets/tvShowContent';
 
 const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;

example/assets/NZ.jpg

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