Merge pull request #1 from rgommezz/feat/migration_to_reanimated

rgommezz · May 13, 2020 · 70191fc · 70191fc
2 parents 4f6a310 + e95cfb8
commit 70191fc
Show file tree

Hide file tree

Showing 6 changed files with 583 additions and 322 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
-import { StyleSheet, Text, View, Dimensions } from 'react-native';
+import { StyleSheet, Text, View, Dimensions, Button } from 'react-native';
+import Animated, {
+  Value,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
 import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
 
-const windowHeight = Dimensions.get('window').height;
-const snapPointsFromTop = [128, '50%', windowHeight - 56 - 24];
-
 export default function App() {
+  const windowHeight = Dimensions.get('window').height;
+  const snapPointsFromTop = [128, '50%', windowHeight - 200];
+  const bottomSheetRef = React.useRef<ScrollBottomSheet<any> | null>(null);
+
   const renderItem = React.useCallback(
     ({ item }) => (
       <View style={styles.item}>
@@ -15,16 +21,34 @@ export default function App() {
     []
   );
 
+  const animatedPosition = React.useRef(new Value(0));
+  const opacity = interpolate(animatedPosition.current, {
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: Extrapolate.CLAMP,
+  });
+
   return (
     <View style={styles.container}>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          { backgroundColor: 'black', opacity },
+        ]}
+      />
       <ScrollBottomSheet<string>
+        ref={bottomSheetRef}
         componentType="FlatList"
         topInset={24}
+        animatedPosition={animatedPosition.current}
         snapPoints={snapPointsFromTop}
         initialSnapIndex={2}
+        onSettle={index => {
+          console.log('Next snap index: ', index);
+        }}
         renderHandle={() => (
-          <View style={styles.header}>
-            <View style={styles.panelHeader}>
+          <View style={styles.headerContainer}>
+            <View style={styles.header}>
               <View style={styles.panelHandle} />
             </View>
           </View>
@@ -34,6 +58,37 @@ export default function App() {
         keyExtractor={i => i}
         renderItem={renderItem}
       />
+      <View style={[StyleSheet.absoluteFillObject]} pointerEvents="box-none">
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 24,
+            padding: 32,
+          }}
+        >
+          <Button
+            title="snapTo 0"
+            onPress={() => {
+              bottomSheetRef.current?.snapTo(0);
+            }}
+          />
+          <Button
+            title="snapTo 1"
+            onPress={() => {
+              bottomSheetRef.current?.snapTo(1);
+            }}
+          />
+          <Button
+            title="snapTo 2"
+            onPress={() => {
+              bottomSheetRef.current?.snapTo(2);
+            }}
+          />
+        </View>
+      </View>
     </View>
   );
 }
@@ -46,24 +101,35 @@ const styles = StyleSheet.create({
     padding: 24,
     backgroundColor: '#F3F4F9',
   },
+  headerContainer: {
+    overflow: 'hidden',
+    paddingTop: 20,
+  },
   header: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.5,
-    shadowRadius: 2,
-    shadowColor: '#000000',
+    alignItems: 'center',
     backgroundColor: '#F3F4F9',
+    borderTopWidth: 0.5,
+    borderLeftWidth: 0.5,
+    borderRightWidth: 0.5,
     paddingTop: 20,
+    borderLeftColor: '#F3F4F9',
+    borderRightColor: '#F3F4F9',
+    borderTopColor: '#F3F4F9',
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-  },
-  panelHeader: {
-    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -10,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 5.0,
+    elevation: 16,
   },
   panelHandle: {
     width: 40,
     height: 2,
     borderRadius: 4,
-    backgroundColor: '#00000040',
     marginBottom: 10,
   },
   item: {

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -12,8 +12,10 @@
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
     "react-native-screens": "~2.2.0",
-    "react-native-scroll-bottom-sheet": "^0.1.1",
+    "react-native-scroll-bottom-sheet": "^0.4.0",
     "react-native-web": "~0.11.7"
   },
   "devDependencies": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-scroll-bottom-sheet",
-  "version": "0.1.1",
-  "description": "Cross platform scrollable bottom sheet with virtualisation support, running at 60 FPS and fully implemented in JS land",
+  "version": "0.4.0",
+  "description": "Cross platform scrollable bottom sheet with virtualization support, running at 60 FPS and fully implemented in JS land",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -38,7 +38,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": "*"
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^8.3.4",
@@ -58,6 +59,7 @@
     "react": "~16.9.0",
     "react-native": "^0.62.2",
     "react-native-gesture-handler": "^1.6.1",
+    "react-native-reanimated": "^1.8.0",
     "release-it": "^12.6.3",
     "typescript": "^3.7.5"
   },