feat: initial release

Author: janicduplessis

.circleci/config.yml

@@ -17,6 +17,7 @@ module.exports = function (api) {
           },
         },
       ],
+      'react-native-reanimated/plugin',
     ],
   };
 };

example/babel.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pak = require('../package.json');
 
@@ -16,11 +16,11 @@ module.exports = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: blacklist(
+    blockList: exclusionList(
       modules.map(
         (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+      ),
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {

example/metro.config.js

@@ -12,19 +12,22 @@
     "test": "jest"
   },
   "dependencies": {
-    "expo": "^42.0.0",
-    "expo-splash-screen": "~0.11.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-unimodules": "~0.14.5",
-    "react-native-web": "~0.13.12"
+    "@gorhom/bottom-sheet": "^4.3.1",
+    "@react-navigation/native": "^6.0.10",
+    "expo": "^45.0.5",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-web": "0.17.7"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
-    "@babel/runtime": "^7.9.6",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.13"
+    "@babel/core": "~7.18.2",
+    "@babel/runtime": "^7.18.3",
+    "@types/react": "~17.0.21",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-expo": "9.1.0",
+    "expo-cli": "^5.4.9"
   }
 }

example/package.json

@@ -1,31 +1,18 @@
 import * as React from 'react';
-
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from '@th3rdwave/react-navigation-bottom-sheet';
+import { StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SimpleExample } from './SimpleExample';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
-
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <GestureHandlerRootView style={styles.container}>
+      <SimpleExample />
+    </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
   },
 });

example/src/App.tsx

@@ -0,0 +1,97 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  BottomSheetScreenProps,
+  createBottomSheetNavigator,
+} from '@th3rdwave/react-navigation-bottom-sheet';
+import * as React from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+
+type BottomSheetParams = {
+  Home: undefined;
+  Sheet: { id: number };
+};
+
+const BottomSheet = createBottomSheetNavigator<BottomSheetParams>();
+
+function HomeScreen({
+  navigation,
+}: BottomSheetScreenProps<BottomSheetParams, 'Home'>) {
+  return (
+    <View style={styles.container}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Open sheet"
+        onPress={() => {
+          navigation.navigate('Sheet', { id: 1 });
+        }}
+      />
+    </View>
+  );
+}
+
+function SheetScreen({
+  route,
+  navigation,
+}: BottomSheetScreenProps<BottomSheetParams, 'Sheet'>) {
+  return (
+    <View style={styles.container}>
+      <Text>Sheet Screen {route.params.id}</Text>
+      <Button
+        title="Open new sheet"
+        onPress={() => {
+          navigation.navigate('Sheet', { id: route.params.id + 1 });
+        }}
+      />
+      <Button
+        title="Close sheet"
+        onPress={() => {
+          navigation.goBack();
+        }}
+      />
+      <Button
+        title="Snap to top"
+        onPress={() => {
+          navigation.snapTo(1);
+        }}
+      />
+    </View>
+  );
+}
+
+export function SimpleExample() {
+  const renderBackdrop = React.useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+      />
+    ),
+    [],
+  );
+  return (
+    <NavigationContainer>
+      <BottomSheet.Navigator
+        screenOptions={{
+          snapPoints: ['70%', '90%'],
+          backdropComponent: renderBackdrop,
+        }}
+      >
+        <BottomSheet.Screen name="Home" component={HomeScreen} />
+        <BottomSheet.Screen
+          name="Sheet"
+          component={SheetScreen}
+          getId={({ params }) => `sheet-${params.id}`}
+        />
+      </BottomSheet.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

example/src/SimpleExample.tsx

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@th3rdwave/react-navigation-bottom-sheet": ["../"],
+      "react": ["./node_modules/@types/react"],
+    }
+  },
+  "extends": "expo/tsconfig.base"
+}