Merge pull request meliorence#650 from brianshano/patch-1

doc(ParallaxImage): Update Hooks example to a more standalone component

Author: Benoît Delmaire

doc/PARALLAX_IMAGE.md

@@ -84,55 +84,94 @@ const styles = StyleSheet.create({
 ## Example to use with React Hooks
 
 ```javascript
-import React, { useRef } from 'react'
-import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
-import { View, Dimensions, StyleSheet } from 'react-native';
+import React, {useRef, useState, useEffect} from 'react';
+import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+
+const ENTRIES1 = [
+  {
+    title: 'Beautiful and dramatic Antelope Canyon',
+    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
+    illustration: 'https://i.imgur.com/UYiroysl.jpg',
+  },
+  {
+    title: 'Earlier this morning, NYC',
+    subtitle: 'Lorem ipsum dolor sit amet',
+    illustration: 'https://i.imgur.com/UPrs1EWl.jpg',
+  },
+  {
+    title: 'White Pocket Sunset',
+    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
+    illustration: 'https://i.imgur.com/MABUbpDl.jpg',
+  },
+  {
+    title: 'Acrocorinth, Greece',
+    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
+    illustration: 'https://i.imgur.com/KZsmUi2l.jpg',
+  },
+  {
+    title: 'The lone tree, majestic landscape of New Zealand',
+    subtitle: 'Lorem ipsum dolor sit amet',
+    illustration: 'https://i.imgur.com/2nCt3Sbl.jpg',
+  },
+];
+const {width: screenWidth} = Dimensions.get('window');
 
-const { width: screenWidth } = Dimensions.get('window')
+const MyCarousel = props => {
+  const [entries, setEntries] = useState([]);
+  const carouselRef = useRef(null);
 
-const MyCarousel = (props) => {
-    const carouselRef = useRef(null)
+  const goForward = () => {
+    carouselRef.current.snapToNext();
+  };
 
-    const goForward = () => {
-        carouselRef.current.snapToNext()
-    }
-
-    const _renderItem = ({item, index}, parallaxProps) => {
-        return (
-            <View style={styles.item}>
-                <ParallaxImage
-                    source={{ uri: item.thumbnail }}
-                    containerStyle={styles.imageContainer}
-                    style={styles.image}
-                    parallaxFactor={0.4}
-                    {...parallaxProps}
-                />
-                <Text style={styles.title} numberOfLines={2}>
-                    { item.title }
-                </Text>
-            </View>
-        );
-    }
+  useEffect(() => {
+    setEntries(ENTRIES1);
+  }, []);
 
+  const renderItem = ({item, index}, parallaxProps) => {
     return (
-        <View style={styles.container}>
-            <TouchableOpacity onPress={goForward}>
-                <Text>go to next slide</Text>
-            </TouchableOpacity>
-            <Carousel
-                ref={carouselRef}
-                sliderWidth={screenWidth}
-                sliderHeight={screenWidth}
-                itemWidth={screenWidth - 60}
-                data={this.state.entries}
-                renderItem={this._renderItem}
-                hasParallaxImages={true}
-            />
-        </View>
+      <View style={styles.item}>
+        <ParallaxImage
+          source={{uri: item.illustration}}
+          containerStyle={styles.imageContainer}
+          style={styles.image}
+          parallaxFactor={0.4}
+          {...parallaxProps}
+        />
+        <Text style={styles.title} numberOfLines={2}>
+          {item.title}
+        </Text>
+      </View>
     );
-}
-
-export default MyCarousel
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={goForward}>
+        <Text>go to next slide</Text>
+      </TouchableOpacity>
+      <Carousel
+        ref={carouselRef}
+        sliderWidth={screenWidth}
+        sliderHeight={screenWidth}
+        itemWidth={screenWidth - 60}
+        data={entries}
+        renderItem={renderItem}
+        hasParallaxImages={true}
+      />
+    </View>
+  );
+};
+
+export default MyCarousel;
 
 const styles = StyleSheet.create({
   container: {
@@ -144,13 +183,14 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     flex: 1,
-    marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
+    marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
     backgroundColor: 'white',
     borderRadius: 8,
   },
   image: {
     ...StyleSheet.absoluteFillObject,
     resizeMode: 'cover',
   },
-})
+});
+
 ```