Update readme

kyaroru · Jul 20, 2020 · 27da5c1 · 27da5c1
1 parent c824e8e
commit 27da5c1
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -25,17 +25,87 @@ $ npm i react-native-parallax-header --save
 ![iPhone 8](https://i.gyazo.com/eebeff28c7df7b0233fabb9cf2a9c5dc.gif)
 
 ## Example
+Refer to [TestParallax](https://github.com/kyaroru/TestParallax) for working example
 ```jsx
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  StatusBar,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
 import ReactNativeParallaxHeader from 'react-native-parallax-header';
 
+const {height: SCREEN_HEIGHT} = Dimensions.get('window');
+
 const IS_IPHONE_X = SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 896;
 const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
 const HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 64;
 const NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT;
 
-const images = {
-  background: require('../img/test.jpg'), // Put your own image here
+const renderNavBar = () => (
+  <View style={styles.navContainer}>
+    <View style={styles.statusBar} />
+    <View style={styles.navBar}>
+      <TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
+        <Text style={{color: 'white'}}>About</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.iconRight} onPress={() => {}}>
+        <Text style={{color: 'white'}}>Me</Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+);
+
+const renderContent = () => {
+  return (
+    <View style={styles.body}>
+      {Array.from(Array(30).keys()).map((i) => (
+        <View
+          key={i}
+          style={{padding: 15, alignItems: 'center', justifyContent: 'center'}}>
+          <Text>Item {i + 1}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const title = () => {
+  return (
+    <View style={styles.body}>
+      <Text style={{color: 'white', fontSize: 25}}>Parallax Header</Text>
+    </View>
+  );
+};
+
+const App = () => {
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <ReactNativeParallaxHeader
+        headerMinHeight={HEADER_HEIGHT}
+        headerMaxHeight={250}
+        extraScrollHeight={20}
+        navbarColor="#3498db"
+        titleStyle={styles.titleStyle}
+        title={title()}
+        backgroundImage={require('./bg.png')}
+        backgroundImageScale={1.2}
+        renderNavBar={renderNavBar}
+        renderContent={renderContent}
+        containerStyle={styles.container}
+        contentContainerStyle={styles.contentContainer}
+        innerContainerStyle={styles.container}
+        scrollViewProps={{
+          onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
+          onScrollEndDrag: () => console.log('onScrollEndDrag'),
+        }}
+      />
+    </>
+  );
 };
 
 const styles = StyleSheet.create({
@@ -67,45 +137,7 @@ const styles = StyleSheet.create({
   },
 });
 
-renderNavBar = () => (
-  <View style={styles.navContainer}>
-    <View style={styles.statusBar} />
-    <View style={styles.navBar}>
-      <TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
-        <Icon name="add" size={25} color="#fff" />
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.iconRight} onPress={() => {}}>
-        <Icon name="search" size={25} color="#fff" />
-      </TouchableOpacity>
-    </View>
-  </View>
-)
-
-render() {
-  return (
-    <View style={styles.container}>
-      <ReactNativeParallaxHeader
-        headerMinHeight={HEADER_HEIGHT}
-        headerMaxHeight={250}
-        extraScrollHeight={20}
-        navbarColor="#3498db"
-        title="Parallax Header ~"
-        titleStyle={styles.titleStyle}
-        backgroundImage={images.background}
-        backgroundImageScale={1.2}
-        renderNavBar={this.renderNavBar}
-        renderContent={this.renderContent}
-        containerStyle={styles.container}
-        contentContainerStyle={styles.contentContainer}
-        innerContainerStyle={styles.container}
-        scrollViewProps={{
-          onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
-          onScrollEndDrag: () => console.log('onScrollEndDrag'),
-        }}
-      />
-    </View>
-  );
-}
+export default App;
 ```
 
 ## API Usage