Add bottom sheet example (#556)

Reanimated Bottom Sheet is probably one of the most complex things built with reanimated and probably can be used while verifying bugs not observable in more primitive examples.
software-mansion · Jan 16, 2020 · 0447e5e · 0447e5e
1 parent 98d422e
commit 0447e5e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/Example/App.js b/Example/App.js
@@ -11,6 +11,7 @@ import {
 import { RectButton, ScrollView } from 'react-native-gesture-handler';
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
+import BottomSheetPlayground from 'reanimated-bottom-sheet/Example/App'
 
 import ChatHeads from './chatHeads';
 import Code from './code';
@@ -46,6 +47,7 @@ const SCREENS = {
   Test: { screen: Test, title: 'Test' },
   ImageViewer: { screen: ImageViewer, title: 'Image Viewer' },
   Interactable: { screen: InteractablePlayground, title: 'Interactable' },
+  BottomSheet: { screen: BottomSheetPlayground, title: 'BottomSheet Playground' },
   Interpolate: { screen: Interpolate, title: 'Interpolate' },
   Colors: { screen: Colors, title: 'Colors' },
   StartAPI: { screen: StartAPI, title: 'Start API' },
@@ -91,6 +93,7 @@ class MainScreen extends React.Component {
   static navigationOptions = {
     title: '🎬 Reanimated Examples',
   };
+
   render() {
     const data = Object.keys(SCREENS).map(key => ({ key }));
     return (

diff --git a/Example/babel.config.js b/Example/babel.config.js
@@ -17,6 +17,7 @@ module.exports = api => {
         {
           alias: {
             'react-native-reanimated': '../src/Animated',
+            'reanimated-bottom-sheet': './node_modules/reanimated-bottom-sheet',
             react: './node_modules/react',
             'react-native': './node_modules/react-native',
             '@babel': './node_modules/@babel',

diff --git a/Example/package.json b/Example/package.json
@@ -17,7 +17,8 @@
     "react-native-gesture-handler": "^1.5.0",
     "react-native-web": "^0.11.7",
     "react-navigation": "4.0.3",
-    "react-navigation-stack": "^1.7.3"
+    "react-navigation-stack": "^1.7.3",
+    "reanimated-bottom-sheet": "osdnk/react-native-reanimated-bottom-sheet#reanimated-example"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",

diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -5977,6 +5977,10 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+reanimated-bottom-sheet@osdnk/react-native-reanimated-bottom-sheet#reanimated-example:
+  version "1.0.0-alpha.18"
+  resolved "https://codeload.github.com/osdnk/react-native-reanimated-bottom-sheet/tar.gz/3e2c887eabdbd0d5daa4372d4059bcbebfeb4732"
+
 regenerate-unicode-properties@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"