feat: exposing Animated.Value props from PanGestureHandler (#113, #105,

#69) (#160)

docs/PROPSMETHODS.md

@@ -168,6 +168,14 @@ Using this prop will enable/disable pan gesture
 | -------- | -------- | -------- |
 | bool     | No       | `true`   |
 
+### `panGestureAnimatedValue`
+
+Animated.Value of the modal position between 0 and 1
+
+| Type               | Required |
+| ------------------ | -------- |
+| Animated.Value     | No       |
+
 ### `closeOnOverlayTap`
 
 Using this prop will enable/disable overlay tap gesture

examples/expo/App.js

@@ -11,6 +11,7 @@ import { CustomStyle } from './src/components/modals/CustomStyle';
 import { FlatList } from './src/components/modals/FlatList';
 import { SectionList } from './src/components/modals/SectionList';
 import { AlwaysOpen } from './src/components/modals/AlwaysOpen';
+import { AnimatedValue } from './src/components/modals/AnimatedValue';
 
 export default () => {
   const modal = [];
@@ -33,6 +34,7 @@ export default () => {
         'Modal with custom style',
         'Modal with a Flat List',
         'Modal with a Section List',
+        'Modal with an Animated Value',
       ])}
 
       <SimpleContent
@@ -70,6 +72,11 @@ export default () => {
           modal[6] = el;
         }}
       />
+      <AnimatedValue
+        ref={el => {
+          modal[7] = el;
+        }}
+      />
       <AlwaysOpen />
     </Layout>
   );

examples/expo/src/components/button/Button.js

@@ -9,10 +9,10 @@ export const Button = ({ onPress, name }) => (
 
 const s = StyleSheet.create({
   button: {
-    paddingVertical: 15,
-    marginBottom: 15,
+    paddingVertical: 12,
+    marginBottom: 10,
 
-    width: 240,
+    width: 220,
 
     backgroundColor: '#333',
     borderRadius: 6,

examples/expo/src/components/modals/AnimatedValue.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View, Animated } from 'react-native';
+import { Modalize } from 'react-native-modalize';
+import faker from 'faker';
+
+export class AnimatedValue extends React.PureComponent {
+  modal = React.createRef();
+  animated = new Animated.Value(0);
+
+  get contentHeader() {
+    return {
+      padding: this.animated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 50],
+      }),
+    };
+  }
+
+  get contentSquare() {
+    return {
+      transform: [
+        {
+          scale: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.5, 1.25],
+          }),
+        },
+        {
+          translateX: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 115],
+          }),
+        },
+        {
+          translateY: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 40],
+          }),
+        },
+      ],
+    };
+  }
+
+  get contentHeading() {
+    return {
+      opacity: this.animated.interpolate({
+        inputRange: [0, 0.35],
+        outputRange: [1, 0],
+      }),
+    };
+  }
+
+  get contentInner() {
+    return {
+      transform: [
+        {
+          translateY: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 80],
+          }),
+        },
+      ],
+    };
+  }
+
+  renderContent = () => (
+    <>
+      <View style={s.content__header}>
+        <Animated.View style={[s.content__cover, this.contentSquare]}>
+          <Image style={{ width: '100%', height: '100%' }} source={{ uri: faker.image.avatar() }} />
+        </Animated.View>
+
+        <Animated.Text style={[s.content__heading, this.contentHeading]}>
+          More about me
+        </Animated.Text>
+      </View>
+
+      <Animated.View style={[s.content__inner, this.contentInner]}>
+        <Text style={s.content__heading}>Hey that's about me!</Text>
+        <Text style={s.content__subheading}>
+          You wanted to know what I was playing when I was young? Well I don't remember.
+        </Text>
+        <Text style={s.content__paragraph}>{faker.lorem.paragraphs(3)}</Text>
+      </Animated.View>
+    </>
+  );
+
+  openModal = () => {
+    if (this.modal.current) {
+      this.modal.current.open();
+    }
+  };
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        panGestureAnimatedValue={this.animated}
+        snapPoint={120}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content__header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  content__cover: {
+    width: 120,
+    height: 120,
+
+    overflow: 'hidden',
+
+    borderRadius: 120,
+    backgroundColor: '#f2f2f2',
+  },
+
+  content__image: {
+    width: 120,
+    height: 120,
+  },
+
+  content__inner: {
+    padding: 20,
+  },
+
+  content__heading: {
+    marginBottom: 2,
+
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__subheading: {
+    marginBottom: 20,
+
+    fontSize: 16,
+    color: '#ccc',
+  },
+
+  content__paragraph: {
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});

examples/react-native-navigation/src/components/button/Button.js

@@ -9,10 +9,10 @@ export const Button = ({ onPress, name }) => (
 
 const s = StyleSheet.create({
   button: {
-    paddingVertical: 15,
-    marginBottom: 15,
+    paddingVertical: 12,
+    marginBottom: 10,
 
-    width: 240,
+    width: 220,
 
     backgroundColor: '#333',
     borderRadius: 6,

examples/react-native-navigation/src/screens/AnimatedValue.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View, Animated } from 'react-native';
+import { Modalize } from 'react-native-modalize';
+import faker from 'faker';
+
+export class AnimatedValue extends React.PureComponent {
+  modal = React.createRef();
+  animated = new Animated.Value(0);
+
+  get contentHeader() {
+    return {
+      padding: this.animated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 50],
+      }),
+    };
+  }
+
+  get contentSquare() {
+    return {
+      transform: [
+        {
+          scale: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.5, 1.25],
+          }),
+        },
+        {
+          translateX: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 115],
+          }),
+        },
+        {
+          translateY: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 40],
+          }),
+        },
+      ],
+    };
+  }
+
+  get contentHeading() {
+    return {
+      opacity: this.animated.interpolate({
+        inputRange: [0, 0.35],
+        outputRange: [1, 0],
+      }),
+    };
+  }
+
+  get contentInner() {
+    return {
+      transform: [
+        {
+          translateY: this.animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 80],
+          }),
+        },
+      ],
+    };
+  }
+
+  renderContent = () => (
+    <>
+      <View style={s.content__header}>
+        <Animated.View style={[s.content__cover, this.contentSquare]}>
+          <Image style={{ width: '100%', height: '100%' }} source={{ uri: faker.image.avatar() }} />
+        </Animated.View>
+
+        <Animated.Text style={[s.content__heading, this.contentHeading]}>
+          More about me
+        </Animated.Text>
+      </View>
+
+      <Animated.View style={[s.content__inner, this.contentInner]}>
+        <Text style={s.content__heading}>Hey that's about me!</Text>
+        <Text style={s.content__subheading}>
+          You wanted to know what I was playing when I was young? Well I don't remember.
+        </Text>
+        <Text style={s.content__paragraph}>{faker.lorem.paragraphs(3)}</Text>
+      </Animated.View>
+    </>
+  );
+
+  openModal = () => {
+    if (this.modal.current) {
+      this.modal.current.open();
+    }
+  };
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        panGestureAnimatedValue={this.animated}
+        snapPoint={120}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content__header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  content__cover: {
+    width: 120,
+    height: 120,
+
+    overflow: 'hidden',
+
+    borderRadius: 120,
+    backgroundColor: '#f2f2f2',
+  },
+
+  content__image: {
+    width: 120,
+    height: 120,
+  },
+
+  content__inner: {
+    padding: 20,
+  },
+
+  content__heading: {
+    marginBottom: 2,
+
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__subheading: {
+    marginBottom: 20,
+
+    fontSize: 16,
+    color: '#ccc',
+  },
+
+  content__paragraph: {
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});

examples/react-native-navigation/src/screens/App.js

@@ -9,6 +9,7 @@ import {
   SECTION_LIST,
   SIMPLE_CONTENT,
   SNAPPING_LIST,
+  ANIMATED_VALUE,
 } from '../screens';
 import { Layout } from '../components/layout/Layout';
 import { Header } from '../components/header/Header';
@@ -44,6 +45,7 @@ export const App = () => {
         { name: 'Modal with custom style', id: CUSTOM_STYLE },
         { name: 'Modal with a Flat List', id: FLAT_LIST },
         { name: 'Modal with a Section List', id: SECTION_LIST },
+        { name: 'Modal with an Animated Value', id: ANIMATED_VALUE },
       ])}
 
       <AlwaysOpen />