feat: add example with maps

FabFit · Apr 11, 2020 · 9fff562 · 9fff562
1 parent 1be2c75
commit 9fff562
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 21 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,7 +1,7 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - fabfit-react-native-parallax-header (0.1.0):
+  - fabfit-react-native-parallax-header (0.3.0):
     - React
   - FBLazyVector (0.61.5)
   - FBReactNativeSpec (0.61.5):
@@ -184,6 +184,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
+  - react-native-maps (0.27.1):
+    - React
   - react-native-safe-area-context (0.7.3):
     - React
   - React-RCTActionSheet (0.61.5):
@@ -249,6 +251,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -302,6 +305,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-maps:
+    :path: "../node_modules/react-native-maps"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -338,7 +343,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  fabfit-react-native-parallax-header: 391903e4e86231ec5d31964135e8effb12297850
+  fabfit-react-native-parallax-header: f0851bc1629ee643d0b4ba55a7941c54a1bbe61f
   FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
@@ -352,6 +357,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
+  react-native-maps: f4b89da81626ad7f151a8bfcb79733295d31ce5c
   react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360

diff --git a/example/package.json b/example/package.json
@@ -15,6 +15,7 @@
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-gesture-handler": "^1.6.1",
+    "react-native-maps": "^0.27.1",
     "react-native-reanimated": "^1.7.1",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.4.0"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,6 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import ImageScreen from './screens/image';
 import ImageWithOverlayScreen from './screens/imageWithOverlay';
+import CustomHeaderMap from './screens/customHeaderMap';
 
 function HomeScreen({ navigation }: any) {
   return (
@@ -14,6 +15,10 @@ function HomeScreen({ navigation }: any) {
         title="with Image and Overlay"
         onPress={() => navigation.navigate('ImageWithOverlay')}
       />
+      <Button
+        title="with Map Header"
+        onPress={() => navigation.navigate('Maps')}
+      />
     </View>
   );
 }
@@ -30,6 +35,7 @@ function App() {
           name="ImageWithOverlay"
           component={ImageWithOverlayScreen}
         />
+        <Stack.Screen name="Maps" component={CustomHeaderMap} />
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/example/src/screens/customHeaderMap.tsx b/example/src/screens/customHeaderMap.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import MapView from 'react-native-maps';
+import ParallaxHeader from '@fabfit/react-native-parallax-header';
+import Content from './content';
+
+export default function CustomHeaderMap() {
+  return (
+    <ParallaxHeader
+      maxHeight={300}
+      minHeight={100}
+      renderHeader={() => (
+        <MapView
+          initialRegion={{
+            latitude: 51.5074,
+            longitude: 0.1278,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
+          }}
+        />
+      )}
+    >
+      <Content title="This is an example of a ParallaxHeader with a standard image and an overlay" />
+    </ParallaxHeader>
+  );
+}
diff --git a/example/src/screens/imageWithOverlay.tsx b/example/src/screens/imageWithOverlay.tsx
@@ -12,11 +12,6 @@ export default function ImageWithOverlayScreen() {
       renderOverlay={() => (
         <View
           style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: 300,
             justifyContent: 'center',
             alignItems: 'center',
           }}

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3670,6 +3670,11 @@ react-native-iphone-x-helper@^1.2.1:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
   integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
 
+react-native-maps@^0.27.1:
+  version "0.27.1"
+  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.27.1.tgz#2f10cd417bb2fd938c9e015b1c9b6d9b1a44b97f"
+  integrity sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw==
+
 react-native-reanimated@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.7.1.tgz#6363c7f3ebbabc56a05d5dccaf09d95f3b6a2d69"

diff --git a/src/parallax-header/index.models.ts b/src/parallax-header/index.models.ts
@@ -2,9 +2,9 @@ import { ReactElement } from 'react';
 import { ImageSourcePropType } from 'react-native';
 
 export interface RenderOverlayParameters {
-  scrollPositionY: any;
-  scrollDistance: number;
-  maxHeight: number;
+  scrollPositionY?: any;
+  scrollDistance?: number;
+  maxHeight?: number;
 }
 
 export interface IParallaxHeaderProps {

diff --git a/src/parallax-header/index.tsx b/src/parallax-header/index.tsx
@@ -10,14 +10,15 @@ const ParallaxHeader: React.FunctionComponent<IParallaxHeaderProps> = ({
   renderHeader,
   heroImage,
 }) => {
-  const scrollPositionY = React.useMemo(() => new Animated.Value(0), []);
-
   const HEADER_MAX_HEIGHT = React.useMemo(() => (maxHeight ? maxHeight : 550), [
     maxHeight,
   ]);
   const HEADER_MIN_HEIGHT = React.useMemo(() => (minHeight ? minHeight : 170), [
     minHeight,
   ]);
+
+  const scrollPositionY = React.useMemo(() => new Animated.Value(0), []);
+
   const HEADER_SCROLL_DISTANCE = React.useMemo(
     () => HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT,
     [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT]
@@ -49,15 +50,23 @@ const ParallaxHeader: React.FunctionComponent<IParallaxHeaderProps> = ({
         onScroll={Animated.event(
           [
             {
-              nativeEvent: { contentOffset: { y: scrollPositionY } },
+              nativeEvent: {
+                contentOffset: { y: scrollPositionY },
+              },
             },
           ],
           {
             useNativeDriver: true,
           }
         )}
       >
-        <View style={{ marginTop: HEADER_MAX_HEIGHT }}>{children}</View>
+        <View
+          style={{
+            marginTop: HEADER_MAX_HEIGHT,
+          }}
+        >
+          {children}
+        </View>
       </Animated.ScrollView>
       <Animated.View
         style={[
@@ -66,7 +75,7 @@ const ParallaxHeader: React.FunctionComponent<IParallaxHeaderProps> = ({
           { transform: [{ translateY: headerTranslate }] },
         ]}
       >
-        {!!heroImage && (
+        {!!heroImage && !renderHeader && (
           <>
             <Animated.Image
               style={[
@@ -83,13 +92,56 @@ const ParallaxHeader: React.FunctionComponent<IParallaxHeaderProps> = ({
             {/* <Overlay /> */}
           </>
         )}
-        {renderHeader?.()}
+        {renderHeader && (
+          <Animated.View
+            style={[
+              styles.backgroundImage,
+              {
+                opacity: imageOpacity,
+                height: HEADER_MAX_HEIGHT,
+                transform: [{ translateY: imageTranslate }],
+              },
+            ]}
+          >
+            {React.cloneElement(renderHeader(), {
+              style: {
+                ...StyleSheet.absoluteFillObject,
+                height: HEADER_MAX_HEIGHT,
+              },
+            })}
+          </Animated.View>
+        )}
       </Animated.View>
-      {renderOverlay?.({
-        scrollPositionY,
-        scrollDistance: HEADER_SCROLL_DISTANCE,
-        maxHeight: HEADER_MAX_HEIGHT,
-      })}
+      {renderOverlay && (
+        <>
+          {React.cloneElement(
+            renderOverlay({
+              scrollPositionY,
+              scrollDistance: HEADER_SCROLL_DISTANCE,
+              maxHeight: HEADER_MAX_HEIGHT,
+            }),
+            {
+              style: {
+                ...StyleSheet.absoluteFillObject,
+                height: HEADER_MAX_HEIGHT,
+                ...renderOverlay({}).props.style,
+              },
+            }
+          )}
+        </>
+      )}
+      {/* <Animated.View
+        style={[
+          {
+            height: HEADER_MAX_HEIGHT,
+            backgroundColor: '#fff',
+            ...StyleSheet.absoluteFillObject,
+            top: HEADER_MAX_HEIGHT,
+            zIndex: 99,
+          },
+          { transform: [{ translateY: headerTranslate }] },
+        ]}
+      /> */}
     </>
   );
 };