├── .eslintignore
├── .eslintrc.js
├── .github
    └── workflows
    │   └── nodejs.yml
├── .gitignore
├── .prettierrc
├── .prettierrc.json
├── .release-it.json
├── Example
    ├── .gitignore
    ├── App.js
    ├── BlurToolbar.js
    ├── Collapsable.js
    ├── Imperative.js
    ├── Map.js
    ├── Sections.js
    ├── Test.js
    ├── app.json
    ├── assets
    │   ├── airport-photo.jpg
    │   ├── avicii-tim.jpg
    │   ├── fonts
    │   │   └── SpaceMono-Regular.ttf
    │   ├── icon.png
    │   ├── map-bg.jpg
    │   ├── menu.png
    │   └── splash.png
    ├── babel.config.js
    ├── metro.config.js
    ├── package.json
    ├── src
    │   └── screen
    │   │   └── AppleMusic.tsx
    ├── tsconfig.json
    └── yarn.lock
├── LICENSE.md
├── README.md
├── commitlint.config.js
├── gifs
    ├── 1.gif
    ├── 2.gif
    ├── 3.gif
    └── 4.gif
├── package.json
├── src
    └── index.tsx
├── tsconfig.json
└── yarn.lock


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es6: true,
 5 |   },
 6 |   extends: [
 7 |     'eslint:recommended',
 8 |     'plugin:react/recommended',
 9 |     'eslint-config-prettier',
10 |     'eslint-config-prettier/react',
11 |   ],
12 |   plugins: ['react', 'prettier'],
13 |   settings: {
14 |     react: {
15 |       pragma: 'React',
16 |       version: '16.3',
17 |     },
18 |   },
19 |   parserOptions: {
20 |     ecmaFeatures: {
21 |       jsx: true,
22 |     },
23 |     ecmaVersion: 2018,
24 |     sourceType: 'module',
25 |   },
26 |   rules: {
27 |     'max-len': ['off', 80],
28 |     'no-undef': 'off',
29 |     'linebreak-style': ['error', 'unix'],
30 |     'prettier/prettier': 'error',
31 |     'react/prop-types': 'off',
32 |   },
33 |   overrides: [
34 |     {
35 |       files: ['*.js'],
36 |       parser: 'babel-eslint',
37 |     },
38 |     {
39 |       files: ['*.ts', '*.tsx'],
40 |       parser: '@typescript-eslint/parser',
41 |       plugins: ['@typescript-eslint/eslint-plugin'],
42 |       rules: {
43 |         '@typescript-eslint/no-unused-vars': [
44 |           'error',
45 |           { argsIgnorePattern: '^_' },
46 |         ],
47 | 
48 |         'no-dupe-class-members': 'off',
49 |         'no-unused-vars': 'off',
50 |       },
51 |     },
52 |   ],
53 | };
54 | 


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | name: Node.js CI
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     strategy:
11 |       matrix:
12 |         node-version: [8.x, 10.x, 12.x]
13 | 
14 |     steps:
15 |     - uses: actions/checkout@v2
16 |     - name: Use Node.js ${{ matrix.node-version }}
17 |       uses: actions/setup-node@v1
18 |       with:
19 |         node-version: ${{ matrix.node-version }}
20 |     - run: yarn
21 |     - run: yarn lint
22 |     - run: yarn typescript
23 |       env:
24 |         CI: true
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IJ
26 | #
27 | *.iml
28 | .idea
29 | .gradle
30 | local.properties
31 | 
32 | # node.js
33 | #
34 | node_modules/
35 | npm-debug.log
36 | package-lock.json
37 | 
38 | # vscode
39 | jsconfig.json
40 | .project
41 | .vscode
42 | 
43 | # BUCK
44 | buck-out/
45 | bin/
46 | \.buckd/
47 | android/app/libs
48 | android/keystores/debug.keystore
49 | 
50 | # generated by bob
51 | lib/
52 | 
53 | .expo
54 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   'singleQuote': true,
3 |   'tabWidth': 2,
4 |   'trailingComma': 'es5',
5 |   'useTabs': false,
6 |   'semi': false,
7 | }
8 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "tabWidth": 2,
4 |   "trailingComma": "es5",
5 |   "useTabs": false,
6 |   "semi": false
7 | }
8 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "changelog": "conventional-changelog -p angular | tail -n +3"
 4 |   },
 5 |   "git": {
 6 |     "commitMessage": "chore: release %s",
 7 |     "tagName": "v%s"
 8 |   },
 9 |   "plugins": {
10 |     "@release-it/conventional-changelog": {
11 |       "preset": "angular"
12 |     }
13 |   },
14 |   "npm": {
15 |     "publish": true
16 |   },
17 |   "github": {
18 |     "release": true
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/Example/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 | *.jks
5 | *.p12
6 | *.key
7 | *.mobileprovision
8 | web-build
9 | 


--------------------------------------------------------------------------------
/Example/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {
  3 |   Text,
  4 |   View,
  5 |   FlatList,
  6 |   StyleSheet,
  7 |   TouchableOpacity,
  8 | } from 'react-native'
  9 | import { createAppContainer } from 'react-navigation'
 10 | import { createStackNavigator } from 'react-navigation-stack'
 11 | 
 12 | import AppleMusic from './src/screen/AppleMusic'
 13 | import Map from './Map'
 14 | import BlurToolbar from './BlurToolbar'
 15 | import Imperative from './Imperative'
 16 | import Test from './Test'
 17 | import Sections from './Sections'
 18 | import Collapsable from './Collapsable'
 19 | 
 20 | const SCREENS = {
 21 |   appleMusic: {
 22 |     screen: AppleMusic,
 23 |     title: 'Apple Music',
 24 |   },
 25 |   map: {
 26 |     screen: Map,
 27 |     title: 'Apple Map',
 28 |   },
 29 |   toolbar: {
 30 |     screen: BlurToolbar,
 31 |     title: 'Blur Toolbar',
 32 |   },
 33 |   imperative: {
 34 |     screen: Imperative,
 35 |     title: 'Imperative managed view',
 36 |   },
 37 |   test: {
 38 |     screen: Test,
 39 |     title: 'Test',
 40 |   },
 41 |   sectionList: {
 42 |     screen: Sections,
 43 |     title: 'SectionList',
 44 |   },
 45 |   collapsable: {
 46 |     screen: Collapsable,
 47 |     title: 'Collapsable Header',
 48 |   },
 49 | }
 50 | 
 51 | class MainScreen extends React.Component {
 52 |   static navigationOptions = {
 53 |     title: 'Bottom Sheet Examples',
 54 |   }
 55 |   render() {
 56 |     const data = Object.keys(SCREENS).map(key => ({ key }))
 57 |     return (
 58 |       <FlatList
 59 |         style={styles.list}
 60 |         data={data}
 61 |         ItemSeparatorComponent={ItemSeparator}
 62 |         renderItem={props => (
 63 |           <MainScreenItem
 64 |             {...props}
 65 |             onPressItem={({ key }) => this.props.navigation.navigate(key)}
 66 |           />
 67 |         )}
 68 |       />
 69 |     )
 70 |   }
 71 | }
 72 | 
 73 | const ItemSeparator = () => <View style={styles.separator} />
 74 | 
 75 | class MainScreenItem extends React.Component {
 76 |   _onPress = () => this.props.onPressItem(this.props.item)
 77 |   render() {
 78 |     const { key } = this.props.item
 79 |     return (
 80 |       <TouchableOpacity style={styles.button} onPress={this._onPress}>
 81 |         <Text style={styles.buttonText}>{SCREENS[key].title || key}</Text>
 82 |       </TouchableOpacity>
 83 |     )
 84 |   }
 85 | }
 86 | 
 87 | const ExampleApp = createAppContainer(
 88 |   createStackNavigator(
 89 |     {
 90 |       Main: { screen: MainScreen },
 91 |       ...SCREENS,
 92 |     },
 93 |     {
 94 |       initialRouteName: 'Main',
 95 |     }
 96 |   )
 97 | )
 98 | 
 99 | const styles = StyleSheet.create({
100 |   list: {
101 |     backgroundColor: '#EFEFF4',
102 |   },
103 |   separator: {
104 |     height: 1,
105 |     backgroundColor: '#DBDBE0',
106 |   },
107 |   buttonText: {
108 |     backgroundColor: 'transparent',
109 |   },
110 |   button: {
111 |     flex: 1,
112 |     height: 60,
113 |     padding: 10,
114 |     flexDirection: 'row',
115 |     alignItems: 'center',
116 |     backgroundColor: '#fff',
117 |   },
118 | })
119 | 
120 | export default ExampleApp
121 | 


--------------------------------------------------------------------------------
/Example/BlurToolbar.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Image, StyleSheet, Text, View } from 'react-native'
  3 | import BottomSheet from 'reanimated-bottom-sheet'
  4 | import Animated from 'react-native-reanimated'
  5 | 
  6 | export default class Example extends React.Component {
  7 |   renderInner = () => (
  8 |     <View style={styles.panel}>
  9 |       <View style={styles.panelButton}>
 10 |         <Text style={styles.panelButtonTitle}>Copy</Text>
 11 |       </View>
 12 |       <View style={styles.panelButton}>
 13 |         <Text style={styles.panelButtonTitle}>Paste</Text>
 14 |       </View>
 15 |       <View style={styles.panelButton}>
 16 |         <Text style={styles.panelButtonTitle}>Crop</Text>
 17 |       </View>
 18 |       <View style={styles.panelButton}>
 19 |         <Text style={styles.panelButtonTitle}>Search</Text>
 20 |       </View>
 21 |       <View style={styles.panelButton}>
 22 |         <Text style={styles.panelButtonTitle}>Send</Text>
 23 |       </View>
 24 |     </View>
 25 |   )
 26 | 
 27 |   renderHeader = () => <View style={styles.header} />
 28 | 
 29 |   fall = new Animated.Value(1)
 30 | 
 31 |   render() {
 32 |     return (
 33 |       <View style={styles.container}>
 34 |         <BottomSheet
 35 |           snapPoints={[500, 50]}
 36 |           renderContent={this.renderInner}
 37 |           renderHeader={this.renderHeader}
 38 |           initialSnap={1}
 39 |           callbackNode={this.fall}
 40 |           enabledInnerScrolling={false}
 41 |         />
 42 |         <Animated.View
 43 |           style={{
 44 |             alignItems: 'center',
 45 |             opacity: Animated.add(0.1, Animated.multiply(this.fall, 0.9)),
 46 |           }}
 47 |         >
 48 |           <Text style={{ position: 'absolute', zIndex: 1 }}>
 49 |             Swipe up from very bottom
 50 |           </Text>
 51 |           <Image style={styles.map} source={require('./assets/map-bg.jpg')} />
 52 |         </Animated.View>
 53 |       </View>
 54 |     )
 55 |   }
 56 | }
 57 | 
 58 | const IMAGE_SIZE = 200
 59 | 
 60 | const styles = StyleSheet.create({
 61 |   container: {
 62 |     flex: 1,
 63 |     backgroundColor: '#2c2c2f',
 64 |   },
 65 |   box: {
 66 |     width: IMAGE_SIZE,
 67 |     height: IMAGE_SIZE,
 68 |   },
 69 |   panelContainer: {
 70 |     position: 'absolute',
 71 |     top: 0,
 72 |     bottom: 0,
 73 |     left: 0,
 74 |     right: 0,
 75 |   },
 76 |   panel: {
 77 |     height: 600,
 78 |     padding: 20,
 79 |     backgroundColor: '#2c2c2fAA',
 80 |     paddingTop: 20,
 81 |     borderTopLeftRadius: 20,
 82 |     borderTopRightRadius: 20,
 83 |     shadowColor: '#000000',
 84 |     shadowOffset: { width: 0, height: 0 },
 85 |     shadowRadius: 5,
 86 |     shadowOpacity: 0.4,
 87 |   },
 88 |   header: {
 89 |     width: '100%',
 90 |     height: 50,
 91 |   },
 92 |   panelHeader: {
 93 |     alignItems: 'center',
 94 |   },
 95 |   panelHandle: {
 96 |     width: 40,
 97 |     height: 8,
 98 |     borderRadius: 4,
 99 |     backgroundColor: '#00000040',
100 |     marginBottom: 10,
101 |   },
102 |   panelTitle: {
103 |     fontSize: 27,
104 |     height: 35,
105 |   },
106 |   panelSubtitle: {
107 |     fontSize: 14,
108 |     color: 'gray',
109 |     height: 30,
110 |     marginBottom: 10,
111 |   },
112 |   panelButton: {
113 |     padding: 20,
114 |     borderRadius: 10,
115 |     backgroundColor: '#292929',
116 |     alignItems: 'center',
117 |     marginVertical: 10,
118 |   },
119 |   panelButtonTitle: {
120 |     fontSize: 17,
121 |     fontWeight: 'bold',
122 |     color: 'white',
123 |   },
124 |   photo: {
125 |     width: '100%',
126 |     height: 225,
127 |     marginTop: 30,
128 |   },
129 |   map: {
130 |     height: '100%',
131 |     width: '100%',
132 |   },
133 | })
134 | 


--------------------------------------------------------------------------------
/Example/Collapsable.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { StyleSheet, Text, View } from 'react-native'
  3 | import BottomSheet from 'reanimated-bottom-sheet'
  4 | import Animated from 'react-native-reanimated'
  5 | 
  6 | const { block, set, greaterThan, lessThan, Value, cond, sub } = Animated
  7 | 
  8 | const Lorem = () => (
  9 |   <View style={{ backgroundColor: 'green' }}>
 10 |     <Text>
 11 |       At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
 12 |       praesentium voluptatum deleniti atque corrupti quos dolores et quas
 13 |       molestias excepturi sint occaecati cupiditate non provident, similique
 14 |       sunt in culpa qui officia deserunt mollitia animi, id est laborum et
 15 |       dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
 16 |       Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
 17 |       impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
 18 |       assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
 19 |       officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
 20 |       repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
 21 |       tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
 22 |       consequatur aut perferendis doloribus asperiores repellat. At vero eos et
 23 |       accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
 24 |       voluptatum deleniti atque corrupti quos dolores et quas molestias
 25 |       excepturi sint occaecati cupiditate non provident, similique sunt in culpa
 26 |       qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
 27 |       harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
 28 |       cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
 29 |       maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
 30 |       repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
 31 |       necessitatibus saepe eveniet ut et voluptates repudiandae sint et
 32 |       molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
 33 |       delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
 34 |       perferendis doloribus asperiores repellat.
 35 |     </Text>
 36 |   </View>
 37 | )
 38 | export default class Example extends React.Component {
 39 |   trans = new Value(0)
 40 |   untraversedPos = new Value(0)
 41 |   prevTrans = new Value(0)
 42 |   headerPos = block([
 43 |     cond(
 44 |       lessThan(this.untraversedPos, sub(this.trans, 100)),
 45 |       set(this.untraversedPos, sub(this.trans, 100))
 46 |     ),
 47 |     cond(
 48 |       greaterThan(this.untraversedPos, this.trans),
 49 |       set(this.untraversedPos, this.trans)
 50 |     ),
 51 |     set(this.prevTrans, this.trans),
 52 |     this.untraversedPos,
 53 |   ])
 54 |   renderHeader = name => (
 55 |     <View
 56 |       style={{
 57 |         width: '100%',
 58 |         backgroundColor: 'blue',
 59 |         height: 100,
 60 |         borderWidth: 2,
 61 |       }}
 62 |     >
 63 |       <Text>{name}</Text>
 64 |     </View>
 65 |   )
 66 | 
 67 |   renderInner = () => (
 68 |     <View>
 69 |       <Animated.View
 70 |         style={{
 71 |           zIndex: 1,
 72 |           transform: [
 73 |             {
 74 |               translateY: this.headerPos,
 75 |             },
 76 |           ],
 77 |         }}
 78 |       >
 79 |         {this.renderHeader('one')}
 80 |       </Animated.View>
 81 |       <Lorem />
 82 |       <Lorem />
 83 |     </View>
 84 |   )
 85 | 
 86 |   render() {
 87 |     return (
 88 |       <View style={styles.container}>
 89 |         <BottomSheet
 90 |           contentPosition={this.trans}
 91 |           snapPoints={[100, 400]}
 92 |           renderContent={this.renderInner}
 93 |         />
 94 |       </View>
 95 |     )
 96 |   }
 97 | }
 98 | 
 99 | const IMAGE_SIZE = 200
100 | 
101 | const styles = StyleSheet.create({
102 |   container: {
103 |     flex: 1,
104 |     backgroundColor: 'red',
105 |   },
106 |   box: {
107 |     width: IMAGE_SIZE,
108 |     height: IMAGE_SIZE,
109 |   },
110 | })
111 | 


--------------------------------------------------------------------------------
/Example/Imperative.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
  3 | import BottomSheet from 'reanimated-bottom-sheet'
  4 | 
  5 | export default class Example extends React.Component {
  6 |   renderInner = () => (
  7 |     <View style={styles.panel}>
  8 |       <TouchableOpacity style={styles.panelButton}>
  9 |         <Text style={styles.panelButtonTitle}>Sample</Text>
 10 |       </TouchableOpacity>
 11 |       <TouchableOpacity style={styles.panelButton}>
 12 |         <Text style={styles.panelButtonTitle}>Buttons</Text>
 13 |       </TouchableOpacity>
 14 |       <TouchableOpacity style={styles.panelButton}>
 15 |         <Text style={styles.panelButtonTitle}>Which</Text>
 16 |       </TouchableOpacity>
 17 |       <TouchableOpacity style={styles.panelButton}>
 18 |         <Text style={styles.panelButtonTitle}>Could</Text>
 19 |       </TouchableOpacity>
 20 |       <TouchableOpacity style={styles.panelButton}>
 21 |         <Text style={styles.panelButtonTitle}>Be</Text>
 22 |       </TouchableOpacity>
 23 |       <TouchableOpacity style={styles.panelButton}>
 24 |         <Text style={styles.panelButtonTitle}>Clicked</Text>
 25 |       </TouchableOpacity>
 26 |     </View>
 27 |   )
 28 | 
 29 |   bs = React.createRef()
 30 | 
 31 |   render() {
 32 |     return (
 33 |       <View style={styles.container}>
 34 |         <BottomSheet
 35 |           ref={this.bs}
 36 |           snapPoints={[500, 200, 100, 0]}
 37 |           renderContent={this.renderInner}
 38 |           initialSnap={1}
 39 |           enabledGestureInteraction={false}
 40 |         />
 41 |         <View
 42 |           style={{
 43 |             alignItems: 'center',
 44 |             flexDirection: 'row',
 45 |             justifyContent: 'space-between',
 46 |           }}
 47 |         >
 48 |           <TouchableOpacity
 49 |             style={styles.commandButton}
 50 |             onPress={() => this.bs.current.snapTo(0)}
 51 |           >
 52 |             <Text style={styles.panelButtonTitle}>1</Text>
 53 |           </TouchableOpacity>
 54 |           <TouchableOpacity
 55 |             style={styles.commandButton}
 56 |             onPress={() => this.bs.current.snapTo(1)}
 57 |           >
 58 |             <Text style={styles.panelButtonTitle}>2</Text>
 59 |           </TouchableOpacity>
 60 |           <TouchableOpacity
 61 |             style={styles.commandButton}
 62 |             onPress={() => this.bs.current.snapTo(2)}
 63 |           >
 64 |             <Text style={styles.panelButtonTitle}>3</Text>
 65 |           </TouchableOpacity>
 66 |           <TouchableOpacity
 67 |             style={styles.commandButton}
 68 |             onPress={() => this.bs.current.snapTo(3)}
 69 |           >
 70 |             <Text style={styles.panelButtonTitle}>4</Text>
 71 |           </TouchableOpacity>
 72 |         </View>
 73 |       </View>
 74 |     )
 75 |   }
 76 | }
 77 | 
 78 | const IMAGE_SIZE = 200
 79 | 
 80 | const styles = StyleSheet.create({
 81 |   container: {
 82 |     flex: 1,
 83 |     backgroundColor: '#6f6f76',
 84 |   },
 85 |   box: {
 86 |     width: IMAGE_SIZE,
 87 |     height: IMAGE_SIZE,
 88 |   },
 89 |   panelContainer: {
 90 |     position: 'absolute',
 91 |     top: 0,
 92 |     bottom: 0,
 93 |     left: 0,
 94 |     right: 0,
 95 |   },
 96 |   commandButton: {
 97 |     padding: 20,
 98 |     borderRadius: 10,
 99 |     backgroundColor: '#292929',
100 |     alignItems: 'center',
101 |     margin: 7,
102 |   },
103 |   panel: {
104 |     height: 600,
105 |     padding: 20,
106 |     backgroundColor: '#2c2c2fAA',
107 |     paddingTop: 20,
108 |     borderTopLeftRadius: 20,
109 |     borderTopRightRadius: 20,
110 |     shadowColor: '#000000',
111 |     shadowOffset: { width: 0, height: 0 },
112 |     shadowRadius: 5,
113 |     shadowOpacity: 0.4,
114 |   },
115 |   header: {
116 |     width: '100%',
117 |     height: 50,
118 |   },
119 |   panelHeader: {
120 |     alignItems: 'center',
121 |   },
122 |   panelHandle: {
123 |     width: 40,
124 |     height: 8,
125 |     borderRadius: 4,
126 |     backgroundColor: '#00000040',
127 |     marginBottom: 10,
128 |   },
129 |   panelTitle: {
130 |     fontSize: 27,
131 |     height: 35,
132 |   },
133 |   panelSubtitle: {
134 |     fontSize: 14,
135 |     color: 'gray',
136 |     height: 30,
137 |     marginBottom: 10,
138 |   },
139 |   panelButton: {
140 |     padding: 13,
141 |     borderRadius: 10,
142 |     backgroundColor: '#292929',
143 |     alignItems: 'center',
144 |     marginVertical: 7,
145 |   },
146 |   panelButtonTitle: {
147 |     fontSize: 17,
148 |     fontWeight: 'bold',
149 |     color: 'white',
150 |   },
151 |   photo: {
152 |     width: '100%',
153 |     height: 225,
154 |     marginTop: 30,
155 |   },
156 |   map: {
157 |     height: '100%',
158 |     width: '100%',
159 |   },
160 | })
161 | 


--------------------------------------------------------------------------------
/Example/Map.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {
  3 |   Image,
  4 |   StyleSheet,
  5 |   Text,
  6 |   TouchableWithoutFeedback,
  7 |   View,
  8 |   TextInput,
  9 | } from 'react-native'
 10 | import BottomSheet from 'reanimated-bottom-sheet'
 11 | 
 12 | export default class Example extends React.Component {
 13 |   renderInner = () => (
 14 |     <View style={styles.panel}>
 15 |       <TextInput
 16 |         style={styles.search}
 17 |         onFocus={() => {
 18 |           this.bs.current.snapTo(1)
 19 |         }}
 20 |         placeholder="search"
 21 |       />
 22 |       <Text style={styles.panelTitle}>San Francisco Airport</Text>
 23 |       <Text style={styles.panelSubtitle}>
 24 |         International Airport - 40 miles away
 25 |       </Text>
 26 |       <View style={styles.panelButton}>
 27 |         <Text style={styles.panelButtonTitle}>Directions</Text>
 28 |       </View>
 29 |       <View style={styles.panelButton}>
 30 |         <Text style={styles.panelButtonTitle}>Search Nearby</Text>
 31 |       </View>
 32 |       <Image
 33 |         style={styles.photo}
 34 |         source={require('./assets/airport-photo.jpg')}
 35 |       />
 36 |     </View>
 37 |   )
 38 | 
 39 |   renderHeader = () => (
 40 |     <View style={styles.header}>
 41 |       <View style={styles.panelHeader}>
 42 |         <View style={styles.panelHandle} />
 43 |       </View>
 44 |     </View>
 45 |   )
 46 | 
 47 |   bs = React.createRef()
 48 | 
 49 |   render() {
 50 |     return (
 51 |       <View style={styles.container}>
 52 |         <BottomSheet
 53 |           ref={this.bs}
 54 |           snapPoints={[500, 250, 0]}
 55 |           renderContent={this.renderInner}
 56 |           renderHeader={this.renderHeader}
 57 |           initialSnap={1}
 58 |         />
 59 |         <TouchableWithoutFeedback onPress={() => this.bs.current.snapTo(0)}>
 60 |           <Image style={styles.map} source={require('./assets/map-bg.jpg')} />
 61 |         </TouchableWithoutFeedback>
 62 |       </View>
 63 |     )
 64 |   }
 65 | }
 66 | 
 67 | const IMAGE_SIZE = 200
 68 | 
 69 | const styles = StyleSheet.create({
 70 |   search: {
 71 |     borderColor: 'gray',
 72 |     borderWidth: StyleSheet.hairlineWidth,
 73 |     height: 40,
 74 |     borderRadius: 10,
 75 |     paddingHorizontal: 15,
 76 |   },
 77 |   container: {
 78 |     flex: 1,
 79 |     backgroundColor: '#F5FCFF',
 80 |   },
 81 |   box: {
 82 |     width: IMAGE_SIZE,
 83 |     height: IMAGE_SIZE,
 84 |   },
 85 |   panelContainer: {
 86 |     position: 'absolute',
 87 |     top: 0,
 88 |     bottom: 0,
 89 |     left: 0,
 90 |     right: 0,
 91 |   },
 92 |   panel: {
 93 |     height: 600,
 94 |     padding: 20,
 95 |     backgroundColor: '#f7f5eee8',
 96 |   },
 97 |   header: {
 98 |     backgroundColor: '#f7f5eee8',
 99 |     shadowColor: '#000000',
100 |     paddingTop: 20,
101 |     borderTopLeftRadius: 20,
102 |     borderTopRightRadius: 20,
103 |   },
104 |   panelHeader: {
105 |     alignItems: 'center',
106 |   },
107 |   panelHandle: {
108 |     width: 40,
109 |     height: 8,
110 |     borderRadius: 4,
111 |     backgroundColor: '#00000040',
112 |     marginBottom: 10,
113 |   },
114 |   panelTitle: {
115 |     fontSize: 27,
116 |     height: 35,
117 |   },
118 |   panelSubtitle: {
119 |     fontSize: 14,
120 |     color: 'gray',
121 |     height: 30,
122 |     marginBottom: 10,
123 |   },
124 |   panelButton: {
125 |     padding: 20,
126 |     borderRadius: 10,
127 |     backgroundColor: '#318bfb',
128 |     alignItems: 'center',
129 |     marginVertical: 10,
130 |   },
131 |   panelButtonTitle: {
132 |     fontSize: 17,
133 |     fontWeight: 'bold',
134 |     color: 'white',
135 |   },
136 |   photo: {
137 |     width: '100%',
138 |     height: 225,
139 |     marginTop: 30,
140 |   },
141 |   map: {
142 |     height: '100%',
143 |     width: '100%',
144 |   },
145 | })
146 | 


--------------------------------------------------------------------------------
/Example/Sections.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { StyleSheet, Text, View } from 'react-native'
  3 | import BottomSheet from 'reanimated-bottom-sheet'
  4 | import Animated from 'react-native-reanimated'
  5 | 
  6 | const Lorem = () => (
  7 |   <View style={{ height: 500, backgroundColor: 'green' }}>
  8 |     <Text>
  9 |       At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
 10 |       praesentium voluptatum deleniti atque corrupti quos dolores et quas
 11 |       molestias excepturi sint occaecati cupiditate non provident, similique
 12 |       sunt in culpa qui officia deserunt mollitia animi, id est laborum et
 13 |       dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
 14 |       Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
 15 |       impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
 16 |       assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
 17 |       officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
 18 |       repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
 19 |       tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
 20 |       consequatur aut perferendis doloribus asperiores repellat. At vero eos et
 21 |       accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
 22 |       voluptatum deleniti atque corrupti quos dolores et quas molestias
 23 |       excepturi sint occaecati cupiditate non provident, similique sunt in culpa
 24 |       qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
 25 |       harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
 26 |       cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
 27 |       maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
 28 |       repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
 29 |       necessitatibus saepe eveniet ut et voluptates repudiandae sint et
 30 |       molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
 31 |       delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
 32 |       perferendis doloribus asperiores repellat.
 33 |     </Text>
 34 |   </View>
 35 | )
 36 | export default class Example extends React.Component {
 37 |   trans = new Animated.Value(0)
 38 |   renderHeader = name => (
 39 |     <View
 40 |       style={{
 41 |         width: '100%',
 42 |         backgroundColor: 'blue',
 43 |         height: 40,
 44 |         borderWidth: 2,
 45 |       }}
 46 |     >
 47 |       <Text>{name}</Text>
 48 |     </View>
 49 |   )
 50 | 
 51 |   renderInner = () => (
 52 |     <View>
 53 |       <Animated.View
 54 |         style={{
 55 |           zIndex: 1,
 56 |           transform: [
 57 |             {
 58 |               translateY: this.trans.interpolate({
 59 |                 inputRange: [0, 500, 510],
 60 |                 outputRange: [0, 500, 500],
 61 |               }),
 62 |             },
 63 |           ],
 64 |         }}
 65 |       >
 66 |         {this.renderHeader('one')}
 67 |       </Animated.View>
 68 |       <Lorem />
 69 | 
 70 |       <Animated.View
 71 |         style={{
 72 |           zIndex: 1,
 73 |           transform: [
 74 |             {
 75 |               translateY: this.trans.interpolate({
 76 |                 inputRange: [0, 540, 1040, 1050],
 77 |                 outputRange: [0, 0, 500, 500],
 78 |               }),
 79 |             },
 80 |           ],
 81 |         }}
 82 |       >
 83 |         {this.renderHeader('XXX')}
 84 |       </Animated.View>
 85 |       <Lorem />
 86 |       <Animated.View
 87 |         style={{
 88 |           zIndex: 1,
 89 |           transform: [
 90 |             {
 91 |               translateY: this.trans.interpolate({
 92 |                 inputRange: [0, 1080, 1580, 1590],
 93 |                 outputRange: [0, 0, 500, 500],
 94 |               }),
 95 |             },
 96 |           ],
 97 |         }}
 98 |       >
 99 |         {this.renderHeader('two')}
100 |       </Animated.View>
101 |       <Lorem />
102 |       <Animated.View
103 |         style={{
104 |           zIndex: 1,
105 |           transform: [
106 |             {
107 |               translateY: this.trans.interpolate({
108 |                 inputRange: [0, 1620, 2120, 2130],
109 |                 outputRange: [0, 0, 500, 500],
110 |               }),
111 |             },
112 |           ],
113 |         }}
114 |       >
115 |         {this.renderHeader('three')}
116 |       </Animated.View>
117 |       <Lorem />
118 |       <Animated.View
119 |         style={{
120 |           zIndex: 1,
121 |           transform: [
122 |             {
123 |               translateY: this.trans.interpolate({
124 |                 inputRange: [0, 2160, 2660, 2670],
125 |                 outputRange: [0, 0, 500, 500],
126 |               }),
127 |             },
128 |           ],
129 |         }}
130 |       >
131 |         {this.renderHeader('mmm')}
132 |       </Animated.View>
133 |       <Lorem />
134 |     </View>
135 |   )
136 | 
137 |   render() {
138 |     return (
139 |       <View style={styles.container}>
140 |         <BottomSheet
141 |           contentPosition={this.trans}
142 |           snapPoints={[100, 400]}
143 |           renderContent={this.renderInner}
144 |         />
145 |       </View>
146 |     )
147 |   }
148 | }
149 | 
150 | const IMAGE_SIZE = 200
151 | 
152 | const styles = StyleSheet.create({
153 |   container: {
154 |     flex: 1,
155 |     backgroundColor: 'red',
156 |   },
157 |   box: {
158 |     width: IMAGE_SIZE,
159 |     height: IMAGE_SIZE,
160 |   },
161 | })
162 | 


--------------------------------------------------------------------------------
/Example/Test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { StyleSheet, Text, Button, View } from 'react-native'
 3 | import BottomSheet from 'reanimated-bottom-sheet'
 4 | 
 5 | export default class Example extends React.Component {
 6 |   renderInner = () => (
 7 |     <React.Fragment>
 8 |       {[...Array(60)].map((e, i) => (
 9 |         <View
10 |           key={i}
11 |           style={{ height: 40, backgroundColor: `#${i % 10}88424` }}
12 |         >
13 |           <Text>computed</Text>
14 |         </View>
15 |       ))}
16 |     </React.Fragment>
17 |   )
18 | 
19 |   renderHeader = () => (
20 |     <View
21 |       style={{
22 |         height: 40,
23 |         backgroundColor: 'red',
24 |       }}
25 |     >
26 |       <Text>123</Text>
27 |     </View>
28 |   )
29 | 
30 |   bs = React.createRef()
31 | 
32 |   render() {
33 |     return (
34 |       <View style={styles.container}>
35 |         <BottomSheet
36 |           ref={this.bs}
37 |           snapPoints={[450, 300, '50%', 0]}
38 |           renderContent={this.renderInner}
39 |           renderHeader={this.renderHeader}
40 |         />
41 |         <Button onPress={() => this.bs.current.snapTo(0)} title="0" />
42 |         <Button onPress={() => this.bs.current.snapTo(1)} title="1" />
43 |         <Button
44 |           onPress={() => this.bs.current.snapTo(2)}
45 |           style={{
46 |             zIndex: 0,
47 |           }}
48 |           title="2"
49 |         />
50 |         <Button onPress={() => this.bs.current.snapTo(3)} title="3" />
51 |       </View>
52 |     )
53 |   }
54 | }
55 | 
56 | const IMAGE_SIZE = 200
57 | 
58 | const styles = StyleSheet.create({
59 |   container: {
60 |     flex: 1,
61 |     backgroundColor: '#F5FCFF',
62 |   },
63 |   box: {
64 |     width: IMAGE_SIZE,
65 |     height: IMAGE_SIZE,
66 |   },
67 | })
68 | 


--------------------------------------------------------------------------------
/Example/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Reanimated BottomSheet example",
 4 |     "slug": "reanimated-bottomsheet-example",
 5 |     "platforms": [
 6 |       "ios",
 7 |       "android",
 8 |       "web"
 9 |     ],
10 |     "version": "1.0.0",
11 |     "orientation": "portrait",
12 |     "icon": "./assets/icon.png",
13 |     "splash": {
14 |       "image": "./assets/splash.png",
15 |       "resizeMode": "contain",
16 |       "backgroundColor": "#ffffff"
17 |     },
18 |     "updates": {
19 |       "fallbackToCacheTimeout": 0
20 |     },
21 |     "assetBundlePatterns": [
22 |       "**/*"
23 |     ],
24 |     "ios": {
25 |       "supportsTablet": true
26 |     },
27 |     "description": "",
28 |     "githubUrl": "https://github.com/osdnk/reanimated-bottom-sheet"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/Example/assets/airport-photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/airport-photo.jpg


--------------------------------------------------------------------------------
/Example/assets/avicii-tim.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/avicii-tim.jpg


--------------------------------------------------------------------------------
/Example/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/Example/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/icon.png


--------------------------------------------------------------------------------
/Example/assets/map-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/map-bg.jpg


--------------------------------------------------------------------------------
/Example/assets/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/menu.png


--------------------------------------------------------------------------------
/Example/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/Example/assets/splash.png


--------------------------------------------------------------------------------
/Example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true)
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/Example/metro.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const fs = require('fs')
 3 | const blacklist = require('metro-config/src/defaults/blacklist')
 4 | const escape = require('escape-string-regexp')
 5 | 
 6 | const root = path.resolve(__dirname, '..')
 7 | const pak = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'))
 8 | 
 9 | const modules = [
10 |   '@babel/runtime',
11 |   '@expo/vector-icons',
12 |   ...Object.keys(pak.peerDependencies),
13 | ]
14 | 
15 | module.exports = {
16 |   projectRoot: __dirname,
17 |   watchFolders: [root],
18 | 
19 |   resolver: {
20 |     blacklistRE: blacklist([
21 |       new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
22 |     ]),
23 | 
24 |     extraNodeModules: modules.reduce((acc, name) => {
25 |       acc[name] = path.join(__dirname, 'node_modules', name)
26 |       return acc
27 |     }, {}),
28 |   },
29 | 
30 |   transformer: {
31 |     getTransformOptions: async () => ({
32 |       transform: {
33 |         experimentalImportSupport: false,
34 |         inlineRequires: true,
35 |       },
36 |     }),
37 |   },
38 | }
39 | 


--------------------------------------------------------------------------------
/Example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "expo": "~37.0.3",
12 |     "expo-blur": "~8.1.0",
13 |     "react": "~16.9.0",
14 |     "react-dom": "~16.9.0",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
16 |     "react-native-gesture-handler": "~1.6.1",
17 |     "react-native-reanimated": "~1.7.0",
18 |     "react-native-screens": "~2.2.0",
19 |     "react-native-web": "~0.11.7",
20 |     "react-navigation": "^4.3.8",
21 |     "react-navigation-stack": "^1.10.3",
22 |     "scheduler": "^0.18.0"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/core": "^7.8.6",
26 |     "@babel/runtime": "^7.9.2",
27 |     "@types/expo": "~33.0.1",
28 |     "@types/expo__vector-icons": "^9.0.1",
29 |     "babel-preset-expo": "~8.1.0",
30 |     "escape-string-regexp": "^2.0.0",
31 |     "expo-cli": "^3.8.0",
32 |     "babel-plugin-module-resolver": "4.0.0"
33 |   },
34 |   "private": true
35 | }
36 | 


--------------------------------------------------------------------------------
/Example/src/screen/AppleMusic.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {
  3 |   View,
  4 |   Image,
  5 |   Text,
  6 |   StyleSheet,
  7 |   Dimensions,
  8 |   TouchableOpacity,
  9 |   FlatList,
 10 | } from 'react-native'
 11 | import { BlurView } from 'expo-blur'
 12 | import { Ionicons } from '@expo/vector-icons'
 13 | import BottomSheet from 'reanimated-bottom-sheet'
 14 | import Animated from 'react-native-reanimated'
 15 | import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
 16 | 
 17 | const AnimatedView = Animated.View
 18 | const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
 19 | 
 20 | const songCoverSizes = [50, Dimensions.get('window').width - 60]
 21 | const songCoverTopPositions = [
 22 |   10,
 23 |   Dimensions.get('window').width / 2 - songCoverSizes[1] / 2,
 24 | ]
 25 | const songCoverLeftPositions = [
 26 |   20,
 27 |   Dimensions.get('window').width / 2 - songCoverSizes[1] / 2,
 28 | ]
 29 | const snapPoints = [
 30 |   70,
 31 |   songCoverSizes[1] + songCoverTopPositions[1] + 15 + 24 + 10 + 30 + 28,
 32 | ]
 33 | 
 34 | const song = {
 35 |   id: '0',
 36 |   name: `Ain't A Thing`,
 37 |   album: 'TIM',
 38 |   artist: 'Avicii',
 39 |   length: '3:04',
 40 | }
 41 | 
 42 | const songs = [...Array(40)].map((_, index) => ({
 43 |   id: `${index}`,
 44 |   name: 'Song Name',
 45 |   artist: 'Artist Name',
 46 |   cover: '#' + (((1 << 24) * Math.random()) | 0).toString(16),
 47 | }))
 48 | 
 49 | const AppleMusic = () => {
 50 |   let bottomSheetRef = React.createRef<BottomSheet>()
 51 |   let fall = new Animated.Value(1)
 52 | 
 53 |   const animatedSongCoverTopPosition = Animated.interpolate(fall, {
 54 |     inputRange: [0, 1],
 55 |     outputRange: songCoverTopPositions.slice().reverse(),
 56 |     extrapolate: Animated.Extrapolate.CLAMP,
 57 |   })
 58 | 
 59 |   const animatedSongCoverSize = Animated.interpolate(fall, {
 60 |     inputRange: [0, 1],
 61 |     outputRange: [songCoverSizes[0], songCoverSizes[1]].slice().reverse(),
 62 |     extrapolate: Animated.Extrapolate.CLAMP,
 63 |   })
 64 | 
 65 |   const animatedHeaderContentOpacity = Animated.interpolate(fall, {
 66 |     inputRange: [0.75, 1],
 67 |     outputRange: [0, 1],
 68 |     extrapolate: Animated.Extrapolate.CLAMP,
 69 |   })
 70 | 
 71 |   const onFlatListTouchStart = () => {
 72 |     bottomSheetRef.current!.snapTo(0)
 73 |   }
 74 | 
 75 |   const onHeaderPress = () => {
 76 |     bottomSheetRef.current!.snapTo(1)
 77 |   }
 78 | 
 79 |   const renderContent = () => {
 80 |     const animatedBackgroundOpacity = Animated.sub(
 81 |       1,
 82 |       animatedHeaderContentOpacity
 83 |     )
 84 |     const animatedContentOpacity = Animated.interpolate(fall, {
 85 |       inputRange: [0, 1],
 86 |       outputRange: [1, 0],
 87 |       extrapolate: Animated.Extrapolate.CLAMP,
 88 |     })
 89 | 
 90 |     return (
 91 |       <AnimatedView style={[styles.contentContainer]}>
 92 |         <AnimatedView
 93 |           style={[
 94 |             styles.contentBackground,
 95 |             { opacity: animatedBackgroundOpacity },
 96 |           ]}
 97 |         />
 98 | 
 99 |         <AnimatedView style={{ opacity: animatedContentOpacity }}>
100 |           <AnimatedView
101 |             style={{
102 |               height: Animated.add(
103 |                 Animated.sub(animatedSongCoverSize, snapPoints[0]),
104 |                 animatedSongCoverTopPosition
105 |               ),
106 |             }}
107 |           />
108 | 
109 |           <View style={styles.seekBarContainer}>
110 |             <View style={styles.seekBarTrack} />
111 |             <View style={styles.seekBarThumb} />
112 |             <View style={styles.seekBarTimingContainer}>
113 |               <Text style={styles.seekBarTimingText}>0:00</Text>
114 |               <Text style={styles.seekBarTimingText}>{`-${song.length}`}</Text>
115 |             </View>
116 |           </View>
117 | 
118 |           <Text style={styles.songTitleLarge}>{song.name}</Text>
119 |           <Text style={styles.songInfoText}>{`${song.artist} ⏤ ${
120 |             song.album
121 |           }`}</Text>
122 |         </AnimatedView>
123 |       </AnimatedView>
124 |     )
125 |   }
126 | 
127 |   const renderSongCover = () => {
128 |     const animatedSongCoverLeftPosition = Animated.interpolate(fall, {
129 |       inputRange: [0, 1],
130 |       outputRange: songCoverLeftPositions.slice().reverse(),
131 |       extrapolate: Animated.Extrapolate.CLAMP,
132 |     })
133 | 
134 |     return (
135 |       <AnimatedView
136 |         key={'song-cover-container'}
137 |         style={[
138 |           styles.songCoverContainer,
139 |           {
140 |             height: animatedSongCoverSize,
141 |             width: animatedSongCoverSize,
142 |             left: animatedSongCoverLeftPosition,
143 |             top: animatedSongCoverTopPosition,
144 |           },
145 |         ]}
146 |       >
147 |         <Image
148 |           key={'song-cover'}
149 |           style={styles.songCoverImage}
150 |           source={require('../../assets/avicii-tim.jpg')}
151 |         />
152 |       </AnimatedView>
153 |     )
154 |   }
155 | 
156 |   const renderHeader = () => {
157 |     const animatedBackgroundOpacity = Animated.sub(
158 |       1,
159 |       animatedHeaderContentOpacity
160 |     )
161 |     return [
162 |       <TouchableWithoutFeedback
163 |         key={'header-container'}
164 |         onPress={onHeaderPress}
165 |       >
166 |         <AnimatedView style={styles.headerContainer}>
167 |           <AnimatedView
168 |             style={[
169 |               styles.headerBackground,
170 |               {
171 |                 opacity: animatedBackgroundOpacity,
172 |               },
173 |             ]}
174 |           >
175 |             {renderHandler()}
176 |           </AnimatedView>
177 |           <AnimatedBlurView
178 |             intensity={100}
179 |             tint={'default'}
180 |             style={[
181 |               styles.headerContentContainer,
182 |               {
183 |                 opacity: animatedHeaderContentOpacity,
184 |               },
185 |             ]}
186 |           >
187 |             <View style={styles.headerTopBorder} />
188 |             <Text style={styles.songTitleSmall}>{song.name}</Text>
189 |             <TouchableOpacity style={styles.headerActionButton}>
190 |               <Ionicons name="ios-play" size={32} />
191 |             </TouchableOpacity>
192 |             <TouchableOpacity style={styles.headerActionButton}>
193 |               <Ionicons name="ios-fastforward" size={32} />
194 |             </TouchableOpacity>
195 |           </AnimatedBlurView>
196 |         </AnimatedView>
197 |       </TouchableWithoutFeedback>,
198 |       renderSongCover(),
199 |     ]
200 |   }
201 | 
202 |   const renderShadow = () => {
203 |     const animatedShadowOpacity = Animated.interpolate(fall, {
204 |       inputRange: [0, 1],
205 |       outputRange: [0.5, 0],
206 |     })
207 | 
208 |     return (
209 |       <AnimatedView
210 |         pointerEvents="none"
211 |         style={[
212 |           styles.shadowContainer,
213 |           {
214 |             opacity: animatedShadowOpacity,
215 |           },
216 |         ]}
217 |       />
218 |     )
219 |   }
220 | 
221 |   const renderHandler = () => {
222 |     const animatedBar1Rotation = (outputRange: number[]) =>
223 |       Animated.interpolate(fall, {
224 |         inputRange: [0, 1],
225 |         outputRange: outputRange,
226 |         extrapolate: Animated.Extrapolate.CLAMP,
227 |       })
228 | 
229 |     return (
230 |       <View style={styles.handlerContainer}>
231 |         <AnimatedView
232 |           style={[
233 |             styles.handlerBar,
234 |             {
235 |               left: -7.5,
236 |               transform: [
237 |                 {
238 |                   rotate: Animated.concat(
239 |                     // @ts-ignore
240 |                     animatedBar1Rotation([0.3, 0]),
241 |                     'rad'
242 |                   ),
243 |                 },
244 |               ],
245 |             },
246 |           ]}
247 |         />
248 |         <AnimatedView
249 |           style={[
250 |             styles.handlerBar,
251 |             {
252 |               right: -7.5,
253 |               transform: [
254 |                 {
255 |                   rotate: Animated.concat(
256 |                     // @ts-ignore
257 |                     animatedBar1Rotation([-0.3, 0]),
258 |                     'rad'
259 |                   ),
260 |                 },
261 |               ],
262 |             },
263 |           ]}
264 |         />
265 |       </View>
266 |     )
267 |   }
268 | 
269 |   const renderSongItem = ({ item }: { item: any }) => {
270 |     return (
271 |       <View style={styles.songListItemContainer}>
272 |         <View
273 |           style={[
274 |             {
275 |               backgroundColor: `${item.cover}`,
276 |             },
277 |             styles.songListItemCover,
278 |           ]}
279 |         />
280 |         <View style={styles.songListItemInfoContainer}>
281 |           <Text>{item.name}</Text>
282 |           <Text style={styles.songListItemSecondaryText}>{item.artist}</Text>
283 |         </View>
284 |       </View>
285 |     )
286 |   }
287 | 
288 |   return (
289 |     <View style={styles.container}>
290 |       <BottomSheet
291 |         ref={bottomSheetRef}
292 |         initialSnap={0}
293 |         callbackNode={fall}
294 |         snapPoints={snapPoints}
295 |         renderHeader={renderHeader}
296 |         renderContent={renderContent}
297 |       />
298 |       <FlatList
299 |         data={songs}
300 |         renderItem={renderSongItem}
301 |         keyExtractor={(item, index) => `${item.id}${index}`}
302 |         onTouchStart={onFlatListTouchStart}
303 |       />
304 |       {renderShadow()}
305 |     </View>
306 |   )
307 | }
308 | 
309 | const styles = StyleSheet.create({
310 |   // Screen
311 |   container: {
312 |     flex: 1,
313 |     backgroundColor: '#fff',
314 |   },
315 | 
316 |   // Shadow
317 |   shadowContainer: {
318 |     ...StyleSheet.absoluteFillObject,
319 |     backgroundColor: '#000',
320 |   },
321 | 
322 |   // Content
323 |   contentContainer: {
324 |     alignItems: 'center',
325 |     height: snapPoints[1] - snapPoints[0],
326 |     overflow: 'visible',
327 |   },
328 | 
329 |   contentBackground: {
330 |     ...StyleSheet.absoluteFillObject,
331 |     backgroundColor: '#fff',
332 |   },
333 | 
334 |   // Header
335 |   headerContainer: {
336 |     height: snapPoints[0],
337 |   },
338 | 
339 |   headerBackground: {
340 |     ...StyleSheet.absoluteFillObject,
341 |     borderTopLeftRadius: 10,
342 |     borderTopRightRadius: 10,
343 |     overflow: 'hidden',
344 |     backgroundColor: '#fff',
345 |   },
346 | 
347 |   headerContentContainer: {
348 |     ...StyleSheet.absoluteFillObject,
349 |     flexDirection: 'row',
350 |     alignItems: 'center',
351 |     paddingVertical: 10,
352 |     paddingRight: 20,
353 |     paddingLeft: 20 + songCoverSizes[0] + 20,
354 |   },
355 | 
356 |   headerTopBorder: {
357 |     position: 'absolute',
358 |     left: 0,
359 |     right: 0,
360 |     top: 0,
361 |     opacity: 0.5,
362 |     height: 0.25,
363 |     backgroundColor: '#9B9B9B',
364 |   },
365 | 
366 |   headerActionButton: {
367 |     justifyContent: 'center',
368 |     alignItems: 'center',
369 |     minHeight: 50,
370 |     minWidth: 50,
371 |   },
372 | 
373 |   // Handler
374 |   handlerContainer: {
375 |     position: 'absolute',
376 |     alignSelf: 'center',
377 |     top: 10,
378 |     height: 20,
379 |     width: 20,
380 |   },
381 | 
382 |   handlerBar: {
383 |     position: 'absolute',
384 |     backgroundColor: '#D1D1D6',
385 |     top: 5,
386 |     borderRadius: 3,
387 |     height: 5,
388 |     width: 20,
389 |   },
390 | 
391 |   // Song
392 |   songCoverContainer: {
393 |     position: 'absolute',
394 |     top: 10,
395 |     left: 20,
396 | 
397 |     shadowColor: '#000',
398 |     shadowOffset: {
399 |       width: 0,
400 |       height: 15,
401 |     },
402 |     shadowOpacity: 0.25,
403 |     shadowRadius: 15.0,
404 |   },
405 | 
406 |   songTitleLarge: {
407 |     marginTop: 10,
408 |     textAlign: 'center',
409 |     color: '#333',
410 |     fontWeight: 'bold',
411 |     fontSize: 30,
412 |     lineHeight: 30,
413 |   },
414 | 
415 |   songTitleSmall: {
416 |     flexGrow: 1,
417 |     color: '#333',
418 |     fontWeight: '500',
419 |     fontSize: 16,
420 |     lineHeight: 16,
421 |   },
422 | 
423 |   songInfoText: {
424 |     textAlign: 'center',
425 |     color: '#FE2D55',
426 |     fontSize: 24,
427 |     lineHeight: 28,
428 |   },
429 | 
430 |   songCoverImage: {
431 |     width: '100%',
432 |     height: '100%',
433 |     borderRadius: 4,
434 |     backgroundColor: '#333',
435 |   },
436 | 
437 |   // Seek Bar
438 |   seekBarContainer: {
439 |     height: 24,
440 |     marginTop: 15,
441 |     width: songCoverSizes[1],
442 |   },
443 | 
444 |   seekBarThumb: {
445 |     position: 'absolute',
446 |     backgroundColor: '#8E8E93',
447 |     top: -2,
448 |     borderRadius: 6,
449 |     width: 6,
450 |     height: 6,
451 |   },
452 | 
453 |   seekBarTrack: {
454 |     backgroundColor: '#DDDEDD',
455 |     height: 2,
456 |     borderRadius: 4,
457 |   },
458 | 
459 |   seekBarTimingContainer: {
460 |     flexDirection: 'row',
461 |     justifyContent: 'space-between',
462 |   },
463 | 
464 |   seekBarTimingText: {
465 |     marginTop: 5,
466 |     fontSize: 13,
467 |     lineHeight: 13,
468 |     fontWeight: '500',
469 |     color: '#8E8E93',
470 |   },
471 | 
472 |   // Song List Item
473 |   songListItemContainer: {
474 |     flexDirection: 'row',
475 |   },
476 | 
477 |   songListItemCover: {
478 |     marginLeft: 20,
479 |     marginRight: 15,
480 |     marginVertical: 5,
481 |     width: songCoverSizes[0],
482 |     height: songCoverSizes[0],
483 |     borderRadius: 4,
484 |   },
485 | 
486 |   songListItemInfoContainer: {
487 |     flexGrow: 1,
488 |     borderBottomColor: '#CAC9CE',
489 |     borderBottomWidth: 0.5,
490 |     justifyContent: 'center',
491 |   },
492 | 
493 |   songListItemSecondaryText: {
494 |     fontSize: 12,
495 |     color: '#8E8D92',
496 |   },
497 | })
498 | 
499 | export default AppleMusic
500 | 


--------------------------------------------------------------------------------
/Example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "allowUnreachableCode": false,
 5 |     "allowUnusedLabels": false,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "jsx": "react",
 9 |     "lib": ["esnext"],
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "noFallthroughCasesInSwitch": true,
13 |     "noImplicitReturns": true,
14 |     "noImplicitUseStrict": false,
15 |     "noStrictGenericChecks": false,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "resolveJsonModule": true,
19 |     "skipLibCheck": true,
20 |     "strict": true,
21 |     "target": "esnext",
22 |     "paths": {
23 |       "reanimated-bottom-sheet": ["../src/index"]
24 |     }
25 |   },
26 |   "include": ["src"]
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright 2019 – present
 2 | Michał Osadnik
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 5 | 
 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 7 | 
 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 9 | 
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Reanimated Bottom Sheet
  2 | Highly configurable component imitating [native bottom sheet behavior](https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet), with fully native 60 FPS animations!
  3 | 
  4 | Built from scratch with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
  5 | 
  6 | Usable with Expo with no extra native dependencies!
  7 | 
  8 | ![](gifs/1.gif)  |  ![](gifs/2.gif) |  ![](gifs/3.gif)  |  ![](gifs/4.gif)  |
  9 | :---------------:|:----------------:|:-----------------:|:-----------------:|
 10 | 
 11 | 
 12 | ## Installation
 13 | 
 14 | Open a Terminal in the project root and run:
 15 | 
 16 | ```sh
 17 | yarn add reanimated-bottom-sheet
 18 | ```
 19 | 
 20 | Or if you use npm:
 21 | 
 22 | ```sh
 23 | npm install reanimated-bottom-sheet
 24 | ```
 25 | 
 26 | Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated).
 27 | 
 28 | If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
 29 | 
 30 | ```sh
 31 | expo install react-native-gesture-handler react-native-reanimated
 32 | ```
 33 | 
 34 | If you are not using Expo, run the following:
 35 | 
 36 | ```sh
 37 | yarn add react-native-reanimated react-native-gesture-handler
 38 | ```
 39 | 
 40 | Or if you use npm:
 41 | 
 42 | ```sh
 43 | npm install react-native-reanimated react-native-gesture-handler
 44 | ```
 45 | 
 46 | We're done! Now you can build and run the app on your device/simulator.
 47 | 
 48 | ## Usage
 49 | 
 50 | ```javascript
 51 | import * as React from 'react';
 52 | import { StyleSheet, Text, View, Button } from 'react-native';
 53 | import Animated from 'react-native-reanimated';
 54 | import BottomSheet from 'reanimated-bottom-sheet';
 55 | 
 56 | export default function App() {
 57 |   const renderContent = () => (
 58 |     <View
 59 |       style={{
 60 |         backgroundColor: 'white',
 61 |         padding: 16,
 62 |         height: 450,
 63 |       }}
 64 |     >
 65 |       <Text>Swipe down to close</Text>
 66 |     </View>
 67 |   );
 68 | 
 69 |   const sheetRef = React.useRef(null);
 70 | 
 71 |   return (
 72 |     <>
 73 |       <View
 74 |         style={{
 75 |           flex: 1,
 76 |           backgroundColor: 'papayawhip',
 77 |           alignItems: 'center',
 78 |           justifyContent: 'center',
 79 |         }}
 80 |       >
 81 |         <Button
 82 |           title="Open Bottom Sheet"
 83 |           onPress={() => sheetRef.current.snapTo(0)}
 84 |         />
 85 |       </View>
 86 |       <BottomSheet
 87 |         ref={sheetRef}
 88 |         snapPoints={[450, 300, 0]}
 89 |         borderRadius={10}
 90 |         renderContent={renderContent}
 91 |       />
 92 |     </>
 93 |   );
 94 | }
 95 | ```
 96 | 
 97 | ## Props
 98 | 
 99 | | name                      | required | default | description |
100 | | ------------------------- | -------- | ------- | ------------|
101 | | snapPoints                | yes      |         | E.g. `[300, 200, 0]`. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. `'20%'`) for points or percents of screen height from bottom. Note: Array values must be in descending order. |
102 | | initialSnap               | no       |    0    | Determines initial snap point of bottom sheet. The value is the index from snapPoints. |
103 | | renderContent             | no       |         | Method for rendering scrollable content of bottom sheet. |
104 | | renderHeader              | no       |         | Method for rendering non-scrollable header of bottom sheet. |
105 | | enabledGestureInteraction | no       | `true`  | Defines if bottom sheet could be scrollable by gesture. |
106 | | enabledHeaderGestureInteraction | no       | `true`  | Defines if bottom sheet header could be scrollable by gesture. |
107 | | enabledContentGestureInteraction | no       | `true`  | Defines if bottom sheet content could be scrollable by gesture. |
108 | | enabledContentTapInteraction | no       | `true`  | Defines whether bottom sheet content could be tapped. **Note:** If you use `Touchable*` components inside your `renderContent`, you'll have to switch this to `false` to make handlers like `onPress` work. (See [this comment](https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/219#issuecomment-625894292).) |
109 | | enabledManualSnapping     | no       | `true`  | If `false` blocks snapping using `snapTo` method. |
110 | | enabledBottomClamp        | no       | `false` | If `true` block movement is clamped from bottom to minimal snapPoint. |
111 | | enabledBottomInitialAnimation        | no       | `false` | If `true` sheet will grows up from bottom to initial snapPoint. |
112 | | enabledInnerScrolling     | no       | `true`  | Defines whether it's possible to scroll inner content of bottom sheet. |
113 | | callbackNode              | no       |         | `reanimated` node which holds position of bottom sheet, where `0` it the highest snap point and `1` is the lowest. |
114 | | contentPosition           | no       |         | `reanimated` node which holds position of bottom sheet's content (in dp) |
115 | | headerPosition           | no       |         | `reanimated` node which holds position of bottom sheet's header (in dp) |
116 | | overdragResistanceFactor  | no       |   0     | `Defines how violently sheet has to stopped while overdragging. 0 means no overdrag |
117 | | springConfig              | no       | `{ }`   | Overrides config for spring animation |
118 | | innerGestureHandlerRefs   | no       |         | Refs for gesture handlers used for building bottom sheet. The array consists fo three refs. The first for PanGH used for inner content scrolling. The second for PanGH used for header. The third for TapGH used for stopping scrolling the content.   |
119 | | simultaneousHandlers | no       |         | Accepts a react ref object or an array of refs to handler components. |
120 | | onOpenStart | no       |         | Accepts a function to be called when the bottom sheet starts to open. |
121 | | onOpenEnd | no       |         | Accepts a function to be called when the bottom sheet is almost fully openned. |
122 | | onCloseStart | no       |         | Accepts a function to be called when the bottom sheet starts to close. |
123 | | onCloseEnd | no       |         | Accepts a function to be called when the bottom sheet is almost closing. |
124 | | callbackThreshold | no       |    0.01     | Accepts a float value from 0 to 1 indicating the percentage (of the gesture movement) when the callbacks are gonna be called. |
125 | | borderRadius | no       |        | Border radius of content wrapper (excluding header) |
126 | 
127 | 
128 | ## Methods
129 | 
130 | ### `snapTo(index)`
131 | 
132 | Imperative method on for snapping to snap point in given index. E.g.
133 | 
134 | ```javascript
135 | // Snap to the snap point at index 0 (e.g. 450 in [450, 300, 0])
136 | this.bottomSheetRef.current.snapTo(0)
137 | ```
138 | 
139 | Here `this.bottomSheetRef` refers [to the `ref`](https://reactjs.org/docs/react-api.html#reactcreateref) passed to the `BottomSheet` component.
140 | 
141 | ## Example
142 | 
143 | More complex examples can be found in the `Example` folder. To view the examples in the [Expo app](https://expo.io/), open a Terminal and run:
144 | 
145 | ```sh
146 | yarn
147 | yarn prepare
148 | cd Example
149 | yarn
150 | expo start
151 | ```
152 | 
153 | The example app is also available on [Expo](https://expo.io/@osdnk/reanimated-bottomsheet-expample).
154 | 
155 | ## Todo
156 | 
157 | It's not finished and some work has to be done yet.
158 | 
159 | 1. Play with magic config values
160 | 2. Horizontal mode
161 | 3. Deal with GH in inner scrollView
162 | 4. Cleanup code (e.g. measuring of components)
163 | 
164 | ## Contributing
165 | 
166 | ### Publishing a release
167 | 
168 | We use [release-it](https://github.com/release-it/release-it) to automate our release. If you have publish access to the NPM package, run the following from the master branch to publish a new release:
169 | 
170 | ```sh
171 | yarn release
172 | ```
173 | 
174 | NOTE: You must have a `GITHUB_TOKEN` environment variable available. You can create a GitHub access token with the "repo" access [here](https://github.com/settings/tokens).
175 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional'],
3 | }
4 | 


--------------------------------------------------------------------------------
/gifs/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/gifs/1.gif


--------------------------------------------------------------------------------
/gifs/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/gifs/2.gif


--------------------------------------------------------------------------------
/gifs/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/gifs/3.gif


--------------------------------------------------------------------------------
/gifs/4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hamid/react-native-reanimated-bottom-sheet/7fe5cf363252715c1e26f0fc2f16af81fc00e21c/gifs/4.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reanimated-bottom-sheet",
 3 |   "version": "1.0.0-alpha.22",
 4 |   "description": "Bottom sheet component",
 5 |   "main": "lib/commonjs/index.js",
 6 |   "module": "lib/module/index.js",
 7 |   "react-native": "lib/module/index.js",
 8 |   "types": "lib/typescript/index.d.ts",
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1",
11 |     "lint": "eslint --ext .js,.ts,.tsx .",
12 |     "typescript": "tsc --noEmit",
13 |     "release": "release-it",
14 |     "prepare": "bob build"
15 |   },
16 |   "keywords": [
17 |     "react-native",
18 |     "bottom-sheet",
19 |     "reanimated",
20 |     "gesture",
21 |     "handler"
22 |   ],
23 |   "files": [
24 |     "lib/",
25 |     "src/",
26 |     "reanimated-bottom-sheet.d.ts",
27 |     "README.md"
28 |   ],
29 |   "author": "Michał Osadnik",
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/osdnk/reanimated-bottom-sheet.git"
33 |   },
34 |   "license": "MIT",
35 |   "peerDependencies": {
36 |     "react": "*",
37 |     "react-native": "*",
38 |     "react-native-gesture-handler": "*",
39 |     "react-native-reanimated": "*"
40 |   },
41 |   "devDependencies": {
42 |     "@commitlint/config-conventional": "^7.5.0",
43 |     "@react-native-community/bob": "^0.9.3",
44 |     "@release-it/conventional-changelog": "^1.1.0",
45 |     "@types/react": "^16.8.14",
46 |     "@types/react-native": "^0.57.50",
47 |     "@typescript-eslint/eslint-plugin": "^1.7.0",
48 |     "@typescript-eslint/parser": "^1.7.0",
49 |     "babel-eslint": "^10.0.1",
50 |     "commitlint": "^7.5.2",
51 |     "conventional-changelog-cli": "^2.0.12",
52 |     "eslint": "^5.16.0",
53 |     "eslint-config-prettier": "^4.2.0",
54 |     "eslint-plugin-prettier": "^3.0.1",
55 |     "eslint-plugin-react": "^7.12.4",
56 |     "husky": "^1.3.1",
57 |     "prettier": "^1.17.0",
58 |     "react-native-gesture-handler": "^1.6.1",
59 |     "react-native-reanimated": "^1.0.1",
60 |     "release-it": "^12.4.3",
61 |     "typescript": "^3.4.5"
62 |   },
63 |   "husky": {
64 |     "hooks": {
65 |       "pre-commit": "yarn lint && yarn typescript",
66 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
67 |     }
68 |   },
69 |   "@react-native-community/bob": {
70 |     "source": "src",
71 |     "output": "lib",
72 |     "targets": [
73 |       "commonjs",
74 |       "module",
75 |       "typescript"
76 |     ]
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
   1 | import * as React from 'react'
   2 | import { Dimensions, Platform, View, LayoutChangeEvent } from 'react-native'
   3 | import Animated from 'react-native-reanimated'
   4 | import {
   5 |   PanGestureHandler,
   6 |   TapGestureHandler,
   7 |   State as GestureState,
   8 | } from 'react-native-gesture-handler'
   9 | 
  10 | type Props = {
  11 |   /**
  12 |    * Points for snapping of bottom sheet component. They define distance from bottom of the screen.
  13 |    * Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom.
  14 |    */
  15 |   snapPoints: (number | string)[]
  16 | 
  17 |   /**
  18 |    * Determines initial snap point of bottom sheet. Defaults to 0.
  19 |    */
  20 |   initialSnap: number
  21 | 
  22 |   /**
  23 |    * Method for rendering scrollable content of bottom sheet.
  24 |    */
  25 |   renderContent?: () => React.ReactNode
  26 | 
  27 |   /**
  28 |    * Method for rendering non-scrollable header of bottom sheet.
  29 |    */
  30 |   renderHeader?: () => React.ReactNode
  31 | 
  32 |   /**
  33 |    * Defines if bottom sheet could be scrollable by gesture. Defaults to true.
  34 |    */
  35 |   enabledGestureInteraction?: boolean
  36 |   enabledHeaderGestureInteraction?: boolean
  37 |   enabledContentGestureInteraction?: boolean
  38 | 
  39 |   /**
  40 |    * Defines if bottom sheet content responds to taps. Defaults to true.
  41 |    */
  42 |   enabledContentTapInteraction?: boolean
  43 | 
  44 |   /**
  45 |    * When true, clamp bottom position to first snapPoint.
  46 |    */
  47 |   enabledBottomClamp?: boolean
  48 | 
  49 |   /**
  50 |    * When true, sheet will grows up from bottom to initial snapPoint.
  51 |    */
  52 |   enabledBottomInitialAnimation?: boolean
  53 | 
  54 |   /**
  55 |    * If false blocks snapping using snapTo method. Defaults to true.
  56 |    */
  57 |   enabledManualSnapping?: boolean
  58 | 
  59 |   /**
  60 |    * Defines whether it's possible to scroll inner content of bottom sheet. Defaults to true.
  61 |    */
  62 |   enabledInnerScrolling?: boolean
  63 | 
  64 |   /**
  65 |    * Reanimated node which holds position of bottom sheet, where 1 it the highest snap point and 0 is the lowest.
  66 |    */
  67 |   callbackNode?: Animated.Value<number>
  68 | 
  69 |   /**
  70 |    * Reanimated node which holds position of bottom sheet;s content (in dp).
  71 |    */
  72 |   contentPosition?: Animated.Value<number>
  73 | 
  74 |   /**
  75 |    * Reanimated node which holds position of bottom sheet's header (in dp).
  76 |    */
  77 |   headerPosition?: Animated.Value<number>
  78 | 
  79 |   /**
  80 |    * Defines how violently sheet has to stopped while overdragging. 0 means no overdrag. Defaults to 0.
  81 |    */
  82 |   overdragResistanceFactor: number
  83 | 
  84 |   /**
  85 |    * Array of Refs passed to gesture handlers for simultaneous event handling
  86 |    */
  87 |   simultaneousHandlers?: Array<React.RefObject<any>> | React.RefObject<any>
  88 | 
  89 |   /**
  90 |    * Overrides config for spring animation
  91 |    */
  92 |   springConfig: {
  93 |     damping?: number
  94 |     mass?: number
  95 |     stiffness?: number
  96 |     restSpeedThreshold?: number
  97 |     restDisplacementThreshold?: number
  98 |     toss?: number
  99 |   }
 100 | 
 101 |   /**
 102 |    * Refs for gesture handlers used for building bottomsheet
 103 |    */
 104 |   innerGestureHandlerRefs: [
 105 |     React.RefObject<PanGestureHandler>,
 106 |     React.RefObject<PanGestureHandler>,
 107 |     React.RefObject<TapGestureHandler>
 108 |   ]
 109 | 
 110 |   enabledImperativeSnapping?: boolean
 111 | 
 112 |   onOpenStart?: () => void
 113 |   onOpenEnd?: () => void
 114 |   onCloseStart?: () => void
 115 |   onCloseEnd?: () => void
 116 |   callbackThreshold?: number
 117 |   borderRadius?: number
 118 |   overflow?: 'visible' | 'hidden'
 119 | }
 120 | 
 121 | type State = {
 122 |   snapPoints: Animated.Value<number>[]
 123 |   init: any
 124 |   initSnap: number
 125 |   propsToNewIndices: { [key: string]: number }
 126 |   heightOfContent: Animated.Value<number>
 127 |   heightOfHeader: number
 128 |   heightOfHeaderAnimated: Animated.Value<number>
 129 | }
 130 | 
 131 | const { height: screenHeight } = Dimensions.get('window')
 132 | 
 133 | const P = <T extends any>(android: T, ios: T): T =>
 134 |   Platform.OS === 'ios' ? ios : android
 135 | 
 136 | const magic = {
 137 |   damping: 50,
 138 |   mass: 0.3,
 139 |   stiffness: 121.6,
 140 |   overshootClamping: true,
 141 |   restSpeedThreshold: 0.3,
 142 |   restDisplacementThreshold: 0.3,
 143 |   deceleration: 0.999,
 144 |   bouncyFactor: 1,
 145 |   velocityFactor: P(1, 0.8),
 146 |   toss: 0.4,
 147 |   coefForTranslatingVelocities: 5,
 148 | }
 149 | 
 150 | const {
 151 |   damping,
 152 |   mass,
 153 |   stiffness,
 154 |   overshootClamping,
 155 |   restSpeedThreshold,
 156 |   restDisplacementThreshold,
 157 |   deceleration,
 158 |   velocityFactor,
 159 |   toss,
 160 | } = magic
 161 | 
 162 | const {
 163 |   set,
 164 |   cond,
 165 |   onChange,
 166 |   block,
 167 |   eq,
 168 |   greaterOrEq,
 169 |   sqrt,
 170 |   not,
 171 |   defined,
 172 |   max,
 173 |   add,
 174 |   and,
 175 |   Value,
 176 |   spring,
 177 |   or,
 178 |   divide,
 179 |   greaterThan,
 180 |   sub,
 181 |   event,
 182 |   diff,
 183 |   multiply,
 184 |   clockRunning,
 185 |   startClock,
 186 |   stopClock,
 187 |   decay,
 188 |   Clock,
 189 |   lessThan,
 190 |   call,
 191 |   lessOrEq,
 192 |   neq,
 193 | } = Animated
 194 | 
 195 | function runDecay(
 196 |   clock: Animated.Clock,
 197 |   value: Animated.Node<number>,
 198 |   velocity: Animated.Node<number>,
 199 |   wasStartedFromBegin: Animated.Value<number>
 200 | ) {
 201 |   const state = {
 202 |     finished: new Value(0),
 203 |     velocity: new Value(0),
 204 |     position: new Value(0),
 205 |     time: new Value(0),
 206 |   }
 207 | 
 208 |   const config = { deceleration }
 209 | 
 210 |   return [
 211 |     cond(clockRunning(clock), 0, [
 212 |       cond(wasStartedFromBegin, 0, [
 213 |         set(wasStartedFromBegin, 1),
 214 |         set(state.finished, 0),
 215 |         set(state.velocity, multiply(velocity, velocityFactor)),
 216 |         set(state.position, value),
 217 |         set(state.time, 0),
 218 |         startClock(clock),
 219 |       ]),
 220 |     ]),
 221 |     cond(clockRunning(clock), decay(clock, state, config)),
 222 |     cond(state.finished, stopClock(clock)),
 223 |     state.position,
 224 |   ]
 225 | }
 226 | 
 227 | function withPreservingAdditiveOffset(
 228 |   drag: Animated.Node<number>,
 229 |   state: Animated.Node<number>
 230 | ) {
 231 |   const prev = new Value(0)
 232 |   const valWithPreservedOffset = new Value(0)
 233 |   return block([
 234 |     cond(
 235 |       eq(state, GestureState.BEGAN),
 236 |       [set(prev, 0)],
 237 |       [
 238 |         set(
 239 |           valWithPreservedOffset,
 240 |           add(valWithPreservedOffset, sub(drag, prev))
 241 |         ),
 242 |         set(prev, drag),
 243 |       ]
 244 |     ),
 245 |     valWithPreservedOffset,
 246 |   ])
 247 | }
 248 | 
 249 | function withDecaying(
 250 |   drag: Animated.Node<number>,
 251 |   state: Animated.Node<number>,
 252 |   decayClock: Animated.Clock,
 253 |   velocity: Animated.Node<number>,
 254 |   prevent: Animated.Value<number>
 255 | ) {
 256 |   const valDecayed = new Value(0)
 257 |   const offset = new Value(0)
 258 |   // since there might be moar than one clock
 259 |   const wasStartedFromBegin = new Value(0)
 260 |   return block([
 261 |     cond(
 262 |       eq(state, GestureState.END),
 263 |       [
 264 |         cond(
 265 |           prevent,
 266 |           stopClock(decayClock),
 267 |           set(
 268 |             valDecayed,
 269 |             runDecay(
 270 |               decayClock,
 271 |               add(drag, offset),
 272 |               velocity,
 273 |               wasStartedFromBegin
 274 |             )
 275 |           )
 276 |         ),
 277 |       ],
 278 |       [
 279 |         stopClock(decayClock),
 280 |         cond(eq(state, GestureState.BEGAN), set(prevent, 0)),
 281 |         cond(
 282 |           or(eq(state, GestureState.BEGAN), eq(state, GestureState.ACTIVE)),
 283 |           set(wasStartedFromBegin, 0)
 284 |         ),
 285 |         cond(eq(state, GestureState.BEGAN), [
 286 |           set(offset, sub(valDecayed, drag)),
 287 |         ]),
 288 |         set(valDecayed, add(drag, offset)),
 289 |       ]
 290 |     ),
 291 |     valDecayed,
 292 |   ])
 293 | }
 294 | 
 295 | export default class BottomSheetBehavior extends React.Component<Props, State> {
 296 |   static defaultProps = {
 297 |     overdragResistanceFactor: 0,
 298 |     initialSnap: 0,
 299 |     enabledImperativeSnapping: true,
 300 |     enabledGestureInteraction: true,
 301 |     enabledBottomClamp: false,
 302 |     enabledBottomInitialAnimation: false,
 303 |     enabledHeaderGestureInteraction: true,
 304 |     enabledContentGestureInteraction: true,
 305 |     enabledContentTapInteraction: true,
 306 |     enabledInnerScrolling: true,
 307 |     springConfig: {},
 308 |     innerGestureHandlerRefs: [
 309 |       React.createRef(),
 310 |       React.createRef(),
 311 |       React.createRef(),
 312 |     ],
 313 |     callbackThreshold: 0.01,
 314 |   }
 315 | 
 316 |   private decayClock = new Clock()
 317 |   private panState = new Value(0)
 318 |   private tapState = new Value(0)
 319 |   private velocity = new Value(0)
 320 |   private panMasterState: Animated.Value<number> = new Value(GestureState.END)
 321 |   private masterVelocity = new Value(0)
 322 |   private isManuallySetValue: Animated.Value<number> = new Value(0)
 323 |   private manuallySetValue = new Value(0)
 324 |   private masterClockForOverscroll = new Clock()
 325 |   private preventDecaying: Animated.Value<number> = new Value(0)
 326 |   private dragMasterY = new Value(0)
 327 |   private dragY = new Value(0)
 328 |   private translateMaster: Animated.Node<number>
 329 |   private panRef: React.RefObject<PanGestureHandler>
 330 |   private master: React.RefObject<PanGestureHandler>
 331 |   private tapRef: React.RefObject<TapGestureHandler>
 332 |   private snapPoint: Animated.Node<number>
 333 |   private Y: Animated.Node<number>
 334 |   private clampingValue: Animated.Value<number> = new Value(0)
 335 |   private onOpenStartValue: Animated.Value<number> = new Value(0)
 336 |   private onOpenEndValue: Animated.Value<number> = new Value(0)
 337 |   private onCloseStartValue: Animated.Value<number> = new Value(1)
 338 |   private onCloseEndValue: Animated.Value<number> = new Value(0)
 339 | 
 340 |   constructor(props: Props) {
 341 |     super(props)
 342 | 
 343 |     this.panRef = props.innerGestureHandlerRefs[0]
 344 |     this.master = props.innerGestureHandlerRefs[1]
 345 |     this.tapRef = props.innerGestureHandlerRefs[2]
 346 |     this.state = BottomSheetBehavior.getDerivedStateFromProps(props, undefined)
 347 | 
 348 |     const { snapPoints, init } = this.state
 349 |     const middlesOfSnapPoints: [
 350 |       Animated.Node<number>,
 351 |       Animated.Node<number>
 352 |     ][] = []
 353 | 
 354 |     for (let i = 1; i < snapPoints.length; i++) {
 355 |       const tuple: [Animated.Node<number>, Animated.Node<number>] = [
 356 |         add(snapPoints[i - 1], 10),
 357 |         sub(snapPoints[i], 25),
 358 |       ]
 359 |       middlesOfSnapPoints.push(tuple)
 360 |     }
 361 | 
 362 |     const masterOffseted = new Value(init)
 363 |     // destination point is a approximation of movement if finger released
 364 |     const tossForMaster =
 365 |       props.springConfig.hasOwnProperty('toss') &&
 366 |       props.springConfig.toss != undefined
 367 |         ? props.springConfig.toss
 368 |         : toss
 369 |     const destinationPoint = add(
 370 |       masterOffseted,
 371 |       multiply(tossForMaster, this.masterVelocity)
 372 |     )
 373 | 
 374 |     const positive = greaterOrEq(
 375 |       multiply(tossForMaster, this.masterVelocity),
 376 |       0
 377 |     )
 378 |     // method for generating condition for finding the nearest snap point
 379 |     const currentSnapPoint = (i = 0): Animated.Node<number> =>
 380 |       i + 1 === snapPoints.length
 381 |         ? snapPoints[i]
 382 |         : cond(
 383 |             positive,
 384 |             cond(
 385 |               greaterThan(destinationPoint, middlesOfSnapPoints[i][0]),
 386 |               cond(
 387 |                 lessThan(destinationPoint, middlesOfSnapPoints[i][1]),
 388 |                 snapPoints[i + 1],
 389 |                 currentSnapPoint(i + 1)
 390 |               ),
 391 |               snapPoints[i]
 392 |             ),
 393 |             cond(
 394 |               greaterThan(destinationPoint, middlesOfSnapPoints[i][1]),
 395 |               cond(
 396 |                 lessThan(destinationPoint, middlesOfSnapPoints[i][0]),
 397 |                 snapPoints[i + 1],
 398 |                 currentSnapPoint(i + 1)
 399 |               ),
 400 |               snapPoints[i]
 401 |             )
 402 |           )
 403 |     // current snap point desired
 404 |     this.snapPoint = currentSnapPoint()
 405 | 
 406 |     if (props.enabledBottomClamp) {
 407 |       this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
 408 |     }
 409 | 
 410 |     const masterClock = new Clock()
 411 |     const prevMasterDrag = new Value(0)
 412 |     const wasRun: Animated.Value<number> = new Value(0)
 413 |     this.translateMaster = block([
 414 |       cond(
 415 |         or(
 416 |           eq(this.panMasterState, GestureState.END),
 417 |           eq(this.panMasterState, GestureState.CANCELLED),
 418 |           eq(this.panMasterState, GestureState.FAILED)
 419 |         ),
 420 |         [
 421 |           set(prevMasterDrag, 0),
 422 |           cond(
 423 |             or(clockRunning(masterClock), not(wasRun), this.isManuallySetValue),
 424 |             [
 425 |               cond(this.isManuallySetValue, stopClock(masterClock)),
 426 |               set(
 427 |                 masterOffseted,
 428 |                 this.runSpring(
 429 |                   masterClock,
 430 |                   masterOffseted,
 431 |                   this.masterVelocity,
 432 |                   cond(
 433 |                     this.isManuallySetValue,
 434 |                     this.manuallySetValue,
 435 |                     this.snapPoint
 436 |                   ),
 437 |                   wasRun,
 438 |                   this.isManuallySetValue,
 439 |                   this.masterVelocity
 440 |                 )
 441 |               ),
 442 |               set(this.isManuallySetValue, 0),
 443 |             ]
 444 |           ),
 445 |         ],
 446 |         [
 447 |           stopClock(masterClock),
 448 |           set(this.preventDecaying, 1),
 449 |           set(
 450 |             masterOffseted,
 451 |             add(masterOffseted, sub(this.dragMasterY, prevMasterDrag))
 452 |           ),
 453 |           set(prevMasterDrag, this.dragMasterY),
 454 |           set(wasRun, 0), // not sure about this move for cond-began
 455 |           cond(
 456 |             eq(this.panMasterState, GestureState.BEGAN),
 457 |             stopClock(this.masterClockForOverscroll)
 458 |           ),
 459 |         ]
 460 |       ),
 461 |       cond(
 462 |         greaterThan(masterOffseted, snapPoints[0]),
 463 |         cond(
 464 |           and(
 465 |             props.enabledBottomClamp ? 1 : 0,
 466 |             greaterThan(masterOffseted, this.clampingValue)
 467 |           ),
 468 |           this.clampingValue,
 469 |           masterOffseted
 470 |         ),
 471 |         max(
 472 |           multiply(
 473 |             sub(
 474 |               snapPoints[0],
 475 |               sqrt(add(1, sub(snapPoints[0], masterOffseted)))
 476 |             ),
 477 |             !props.enabledInnerScrolling ? props.overdragResistanceFactor : 0
 478 |           ),
 479 |           masterOffseted
 480 |         )
 481 |       ),
 482 |     ])
 483 | 
 484 |     this.Y = this.withEnhancedLimits(
 485 |       withDecaying(
 486 |         withPreservingAdditiveOffset(this.dragY, this.panState),
 487 |         this.panState,
 488 |         this.decayClock,
 489 |         this.velocity,
 490 |         this.preventDecaying
 491 |       ),
 492 |       masterOffseted
 493 |     )
 494 |   }
 495 | 
 496 |   componentDidUpdate(_prevProps: Props, prevState: State) {
 497 |     const { snapPoints } = this.state
 498 |     if (this.props.enabledBottomClamp && snapPoints !== prevState.snapPoints) {
 499 |       this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
 500 |     }
 501 |   }
 502 | 
 503 |   private runSpring(
 504 |     clock: Animated.Clock,
 505 |     value: Animated.Value<number>,
 506 |     velocity: Animated.Node<number>,
 507 |     dest: Animated.Node<number>,
 508 |     wasRun: Animated.Value<number>,
 509 |     isManuallySet: Animated.Node<number> | number,
 510 |     valueToBeZeroed: Animated.Value<number>
 511 |   ) {
 512 |     const state = {
 513 |       finished: new Value(0),
 514 |       velocity: new Value(0),
 515 |       position: new Value(0),
 516 |       time: new Value(0),
 517 |     }
 518 | 
 519 |     const config = {
 520 |       damping,
 521 |       mass,
 522 |       stiffness,
 523 |       overshootClamping,
 524 |       restSpeedThreshold,
 525 |       restDisplacementThreshold,
 526 |       toValue: new Value(0),
 527 |       ...this.props.springConfig,
 528 |     }
 529 | 
 530 |     return [
 531 |       cond(clockRunning(clock), 0, [
 532 |         set(state.finished, 0),
 533 |         set(state.velocity, velocity),
 534 |         set(state.position, value),
 535 |         set(config.toValue, dest),
 536 |         cond(and(wasRun, not(isManuallySet)), 0, startClock(clock)),
 537 |         cond(defined(wasRun), set(wasRun, 1)),
 538 |       ]),
 539 |       spring(clock, state, config),
 540 |       cond(state.finished, [stopClock(clock), set(valueToBeZeroed, 0)]),
 541 |       state.position,
 542 |     ]
 543 |   }
 544 | 
 545 |   private handleMasterPan = event([
 546 |     {
 547 |       nativeEvent: {
 548 |         translationY: this.dragMasterY,
 549 |         state: this.panMasterState,
 550 |         velocityY: this.masterVelocity,
 551 |       },
 552 |     },
 553 |   ])
 554 | 
 555 |   private handlePan = event([
 556 |     {
 557 |       nativeEvent: {
 558 |         translationY: this.props.enabledInnerScrolling
 559 |           ? this.dragY
 560 |           : this.dragMasterY,
 561 |         state: this.props.enabledInnerScrolling
 562 |           ? this.panState
 563 |           : this.panMasterState,
 564 |         velocityY: this.props.enabledInnerScrolling
 565 |           ? this.velocity
 566 |           : this.masterVelocity,
 567 |       },
 568 |     },
 569 |   ])
 570 | 
 571 |   private handleTap = event([{ nativeEvent: { state: this.tapState } }])
 572 | 
 573 |   private withEnhancedLimits(
 574 |     val: Animated.Node<number>,
 575 |     masterOffseted: Animated.Value<number>
 576 |   ) {
 577 |     const wasRunMaster = new Value(0)
 578 |     const min = multiply(
 579 |       -1,
 580 |       add(this.state.heightOfContent, this.state.heightOfHeaderAnimated)
 581 |     )
 582 |     const prev = new Value(0)
 583 |     const limitedVal = new Value(0)
 584 |     const diffPres = new Value(0)
 585 |     const flagWasRunSpring = new Value(0)
 586 |     const justEndedIfEnded: Animated.Value<number> = new Value(1)
 587 |     const wasEndedMasterAfterInner: Animated.Value<number> = new Value(1)
 588 |     const prevMaster = new Value(1)
 589 |     const prevState = new Value(0)
 590 |     const rev = new Value(0)
 591 | 
 592 |     return block([
 593 |       set(rev, limitedVal),
 594 |       cond(
 595 |         or(
 596 |           eq(this.panState, GestureState.BEGAN),
 597 |           and(
 598 |             eq(this.panState, GestureState.ACTIVE),
 599 |             eq(prevState, GestureState.END)
 600 |           )
 601 |         ),
 602 |         [
 603 |           set(prev, val),
 604 |           set(flagWasRunSpring, 0),
 605 |           stopClock(this.masterClockForOverscroll),
 606 |           set(wasRunMaster, 0),
 607 |         ],
 608 |         [
 609 |           set(limitedVal, add(limitedVal, sub(val, prev))),
 610 |           cond(lessThan(limitedVal, min), set(limitedVal, min)),
 611 |         ]
 612 |       ),
 613 |       set(prevState, this.panState), // on iOS sometimes BEGAN event does not trigger
 614 |       set(diffPres, sub(prev, val)),
 615 |       set(prev, val),
 616 |       cond(
 617 |         or(greaterOrEq(limitedVal, 0), greaterThan(masterOffseted, 0)),
 618 |         [
 619 |           cond(
 620 |             eq(this.panState, GestureState.ACTIVE),
 621 |             set(masterOffseted, sub(masterOffseted, diffPres))
 622 |           ),
 623 |           cond(greaterThan(masterOffseted, 0), [set(limitedVal, 0)]),
 624 |           cond(
 625 |             not(eq(this.panState, GestureState.END)),
 626 |             set(justEndedIfEnded, 1)
 627 |           ),
 628 |           cond(
 629 |             or(
 630 |               eq(this.panState, GestureState.ACTIVE),
 631 |               eq(this.panMasterState, GestureState.ACTIVE)
 632 |             ),
 633 |             set(wasEndedMasterAfterInner, 0)
 634 |           ),
 635 |           cond(
 636 |             and(
 637 |               eq(prevMaster, GestureState.ACTIVE),
 638 |               eq(this.panMasterState, GestureState.END),
 639 |               eq(this.panState, GestureState.END)
 640 |             ),
 641 |             set(wasEndedMasterAfterInner, 1)
 642 |           ),
 643 |           set(prevMaster, this.panMasterState),
 644 |           cond(
 645 |             and(
 646 |               eq(this.panState, GestureState.END),
 647 |               not(wasEndedMasterAfterInner),
 648 |               not(eq(this.panMasterState, GestureState.ACTIVE)),
 649 |               not(eq(this.panMasterState, GestureState.BEGAN)),
 650 |               or(clockRunning(this.masterClockForOverscroll), not(wasRunMaster))
 651 |             ),
 652 |             [
 653 |               // cond(justEndedIfEnded, set(this.masterVelocity, diff(val))),
 654 |               set(
 655 |                 this.masterVelocity,
 656 |                 cond(justEndedIfEnded, diff(val), this.velocity)
 657 |               ),
 658 |               set(
 659 |                 masterOffseted,
 660 |                 this.runSpring(
 661 |                   this.masterClockForOverscroll,
 662 |                   masterOffseted,
 663 |                   diff(val),
 664 |                   this.snapPoint,
 665 |                   wasRunMaster,
 666 |                   0,
 667 |                   this.masterVelocity
 668 |                 )
 669 |               ),
 670 |               set(this.masterVelocity, 0),
 671 |             ]
 672 |           ),
 673 |           //   cond(eq(this.panState, State.END), set(wasEndedMasterAfterInner, 0)),
 674 |           cond(eq(this.panState, GestureState.END), set(justEndedIfEnded, 0)),
 675 |           set(this.preventDecaying, 1),
 676 |           0,
 677 |         ],
 678 |         [set(this.preventDecaying, 0), limitedVal]
 679 |       ),
 680 |     ])
 681 |   }
 682 | 
 683 |   snapTo = (index: number) => {
 684 |     if (!this.props.enabledImperativeSnapping) {
 685 |       return
 686 |     }
 687 | 
 688 |     this.isManuallySetValue.setValue(1)
 689 |     this.manuallySetValue.setValue(
 690 |       // @ts-ignore
 691 |       this.state.snapPoints[this.state.propsToNewIndices[index]]
 692 |     )
 693 |   }
 694 | 
 695 |   private height: Animated.Value<number> = new Value(0)
 696 | 
 697 |   private handleLayoutHeader = ({
 698 |     nativeEvent: {
 699 |       layout: { height: heightOfHeader },
 700 |     },
 701 |   }: LayoutChangeEvent) => {
 702 |     this.state.heightOfHeaderAnimated.setValue(heightOfHeader)
 703 |     this.setState({ heightOfHeader })
 704 |   }
 705 | 
 706 |   private handleFullHeader = ({
 707 |     nativeEvent: {
 708 |       layout: { height },
 709 |     },
 710 |   }: LayoutChangeEvent) =>
 711 |     requestAnimationFrame(() => this.height.setValue(height))
 712 | 
 713 |   private handleLayoutContent = ({
 714 |     nativeEvent: {
 715 |       layout: { height },
 716 |     },
 717 |   }: LayoutChangeEvent) =>
 718 |     this.state.heightOfContent.setValue(height - this.state.initSnap)
 719 | 
 720 |   static renumber = (str: string) =>
 721 |     (Number(str.split('%')[0]) * screenHeight) / 100
 722 | 
 723 |   static getDerivedStateFromProps(
 724 |     props: Props,
 725 |     state: State | undefined
 726 |   ): State {
 727 |     let snapPoints
 728 |     const sortedPropsSnapPoints: Array<{
 729 |       val: number
 730 |       ind: number
 731 |     }> = props.snapPoints
 732 |       .map(
 733 |         (
 734 |           s: number | string,
 735 |           i: number
 736 |         ): {
 737 |           val: number
 738 |           ind: number
 739 |         } => {
 740 |           if (typeof s === 'number') {
 741 |             return { val: s, ind: i }
 742 |           } else if (typeof s === 'string') {
 743 |             return { val: BottomSheetBehavior.renumber(s), ind: i }
 744 |           }
 745 | 
 746 |           throw new Error(`Invalid type for value ${s}: ${typeof s}`)
 747 |         }
 748 |       )
 749 |       .sort(({ val: a }, { val: b }) => b - a)
 750 |     if (state && state.snapPoints) {
 751 |       state.snapPoints.forEach(
 752 |         (s, i) =>
 753 |           // @ts-ignore
 754 |           s.__initialized &&
 755 |           s.setValue(
 756 |             sortedPropsSnapPoints[0].val - sortedPropsSnapPoints[i].val
 757 |           )
 758 |       )
 759 |       snapPoints = state.snapPoints
 760 |     } else {
 761 |       snapPoints = sortedPropsSnapPoints.map(
 762 |         p => new Value(sortedPropsSnapPoints[0].val - p.val)
 763 |       )
 764 |     }
 765 | 
 766 |     const propsToNewIndices: { [key: string]: number } = {}
 767 |     sortedPropsSnapPoints.forEach(({ ind }, i) => (propsToNewIndices[ind] = i))
 768 | 
 769 |     const { initialSnap } = props
 770 | 
 771 |     let init =
 772 |       sortedPropsSnapPoints[0].val -
 773 |       sortedPropsSnapPoints[propsToNewIndices[initialSnap]].val
 774 | 
 775 |     if (props.enabledBottomInitialAnimation) {
 776 |       init =
 777 |         sortedPropsSnapPoints[
 778 |           sortedPropsSnapPoints.length - 1 - propsToNewIndices[initialSnap]
 779 |         ].val
 780 |     }
 781 | 
 782 |     return {
 783 |       init,
 784 |       propsToNewIndices,
 785 |       heightOfHeaderAnimated:
 786 |         (state && state.heightOfHeaderAnimated) || new Value(0),
 787 |       heightOfContent: (state && state.heightOfContent) || new Value(0),
 788 |       initSnap: sortedPropsSnapPoints[0].val,
 789 |       snapPoints,
 790 |       heightOfHeader: (state && state.heightOfHeader) || 0,
 791 |     }
 792 |   }
 793 | 
 794 |   render() {
 795 |     const { borderRadius } = this.props
 796 |     return (
 797 |       <>
 798 |         <Animated.View
 799 |           style={{
 800 |             height: '100%',
 801 |             width: 0,
 802 |             position: 'absolute',
 803 |           }}
 804 |           onLayout={this.handleFullHeader}
 805 |         />
 806 |         <Animated.View
 807 |           style={{
 808 |             width: '100%',
 809 |             position: 'absolute',
 810 |             zIndex: 100,
 811 |             opacity: cond(this.height, 1, 0),
 812 |             transform: [
 813 |               {
 814 |                 translateY: this.translateMaster,
 815 |               },
 816 |               {
 817 |                 translateY: sub(this.height, this.state.initSnap) as any,
 818 |               },
 819 |             ],
 820 |           }}
 821 |         >
 822 |           <PanGestureHandler
 823 |             enabled={
 824 |               this.props.enabledGestureInteraction &&
 825 |               this.props.enabledHeaderGestureInteraction
 826 |             }
 827 |             ref={this.master}
 828 |             waitFor={this.panRef}
 829 |             onGestureEvent={this.handleMasterPan}
 830 |             onHandlerStateChange={this.handleMasterPan}
 831 |             simultaneousHandlers={this.props.simultaneousHandlers}
 832 |           >
 833 |             <Animated.View
 834 |               style={{
 835 |                 zIndex: 101,
 836 |               }}
 837 |               onLayout={this.handleLayoutHeader}
 838 |             >
 839 |               {this.props.renderHeader && this.props.renderHeader()}
 840 |             </Animated.View>
 841 |           </PanGestureHandler>
 842 |           <View
 843 |             style={
 844 |               this.props.enabledInnerScrolling && {
 845 |                 height: this.state.initSnap - this.state.heightOfHeader,
 846 |                 overflow: this.props.overflow || 'hidden',
 847 |                 borderTopLeftRadius: borderRadius,
 848 |                 borderTopRightRadius: borderRadius,
 849 |               }
 850 |             }
 851 |           >
 852 |             <PanGestureHandler
 853 |               enabled={
 854 |                 this.props.enabledGestureInteraction &&
 855 |                 this.props.enabledContentGestureInteraction
 856 |               }
 857 |               waitFor={this.master}
 858 |               ref={this.panRef}
 859 |               onGestureEvent={this.handlePan}
 860 |               onHandlerStateChange={this.handlePan}
 861 |               simultaneousHandlers={this.props.simultaneousHandlers}
 862 |             >
 863 |               <Animated.View>
 864 |                 <TapGestureHandler
 865 |                   ref={this.tapRef}
 866 |                   enabled={
 867 |                     this.props.enabledGestureInteraction &&
 868 |                     this.props.enabledContentGestureInteraction &&
 869 |                     this.props.enabledContentTapInteraction
 870 |                   }
 871 |                   onHandlerStateChange={this.handleTap}
 872 |                   simultaneousHandlers={this.props.simultaneousHandlers}
 873 |                 >
 874 |                   <Animated.View
 875 |                     style={{
 876 |                       width: '100%',
 877 |                       transform: [{ translateY: this.Y as any }],
 878 |                     }}
 879 |                     onLayout={this.handleLayoutContent}
 880 |                   >
 881 |                     {this.props.renderContent && this.props.renderContent()}
 882 |                   </Animated.View>
 883 |                 </TapGestureHandler>
 884 |               </Animated.View>
 885 |             </PanGestureHandler>
 886 |             <Animated.Code
 887 |               exec={onChange(
 888 |                 this.tapState,
 889 |                 cond(
 890 |                   eq(this.tapState, GestureState.BEGAN),
 891 |                   stopClock(this.decayClock)
 892 |                 )
 893 |               )}
 894 |             />
 895 |             {this.props.callbackNode && (
 896 |               <Animated.Code
 897 |                 exec={onChange(
 898 |                   this.translateMaster,
 899 |                   set(
 900 |                     this.props.callbackNode,
 901 |                     divide(
 902 |                       this.translateMaster,
 903 |                       this.state.snapPoints[this.state.snapPoints.length - 1]
 904 |                     )
 905 |                   )
 906 |                 )}
 907 |               />
 908 |             )}
 909 |             {(this.props.onOpenStart || this.props.onCloseEnd) && (
 910 |               <Animated.Code
 911 |                 exec={onChange(this.translateMaster, [
 912 |                   cond(
 913 |                     and(
 914 |                       lessOrEq(
 915 |                         divide(
 916 |                           this.translateMaster,
 917 |                           this.state.snapPoints[
 918 |                             this.state.snapPoints.length - 1
 919 |                           ]
 920 |                         ),
 921 |                         1 -
 922 |                           (this.props.callbackThreshold
 923 |                             ? this.props.callbackThreshold
 924 |                             : 0.01)
 925 |                       ),
 926 |                       neq(this.onOpenStartValue, 1)
 927 |                     ),
 928 |                     [
 929 |                       call([], () => {
 930 |                         if (this.props.onOpenStart) this.props.onOpenStart()
 931 |                       }),
 932 |                       set(this.onOpenStartValue, 1),
 933 |                       cond(
 934 |                         defined(this.onCloseEndValue),
 935 |                         set(this.onCloseEndValue, 0)
 936 |                       ),
 937 |                     ]
 938 |                   ),
 939 |                 ])}
 940 |               />
 941 |             )}
 942 |             {(this.props.onOpenEnd || this.props.onCloseStart) && (
 943 |               <Animated.Code
 944 |                 exec={onChange(this.translateMaster, [
 945 |                   cond(
 946 |                     and(
 947 |                       lessOrEq(
 948 |                         divide(
 949 |                           this.translateMaster,
 950 |                           this.state.snapPoints[
 951 |                             this.state.snapPoints.length - 1
 952 |                           ]
 953 |                         ),
 954 |                         this.props.callbackThreshold
 955 |                           ? this.props.callbackThreshold
 956 |                           : 0.01
 957 |                       ),
 958 |                       neq(this.onOpenEndValue, 1)
 959 |                     ),
 960 |                     [
 961 |                       call([], () => {
 962 |                         if (this.props.onOpenEnd) this.props.onOpenEnd()
 963 |                       }),
 964 |                       set(this.onOpenEndValue, 1),
 965 |                       cond(
 966 |                         defined(this.onCloseStartValue),
 967 |                         set(this.onCloseStartValue, 0)
 968 |                       ),
 969 |                     ]
 970 |                   ),
 971 |                 ])}
 972 |               />
 973 |             )}
 974 |             {(this.props.onCloseStart || this.props.onOpenEnd) && (
 975 |               <Animated.Code
 976 |                 exec={onChange(this.translateMaster, [
 977 |                   cond(
 978 |                     and(
 979 |                       greaterOrEq(
 980 |                         divide(
 981 |                           this.translateMaster,
 982 |                           this.state.snapPoints[
 983 |                             this.state.snapPoints.length - 1
 984 |                           ]
 985 |                         ),
 986 |                         this.props.callbackThreshold
 987 |                           ? this.props.callbackThreshold
 988 |                           : 0.01
 989 |                       ),
 990 |                       neq(this.onCloseStartValue, 1)
 991 |                     ),
 992 |                     [
 993 |                       call([], () => {
 994 |                         if (this.props.onCloseStart) this.props.onCloseStart()
 995 |                       }),
 996 |                       set(this.onCloseStartValue, 1),
 997 |                       cond(
 998 |                         defined(this.onCloseStartValue),
 999 |                         set(this.onOpenEndValue, 0)
1000 |                       ),
1001 |                     ]
1002 |                   ),
1003 |                 ])}
1004 |               />
1005 |             )}
1006 |             {(this.props.onCloseEnd || this.props.onOpenStart) && (
1007 |               <Animated.Code
1008 |                 exec={onChange(this.translateMaster, [
1009 |                   cond(
1010 |                     and(
1011 |                       greaterOrEq(
1012 |                         divide(
1013 |                           this.translateMaster,
1014 |                           this.state.snapPoints[
1015 |                             this.state.snapPoints.length - 1
1016 |                           ]
1017 |                         ),
1018 |                         1 -
1019 |                           (this.props.callbackThreshold
1020 |                             ? this.props.callbackThreshold
1021 |                             : 0.01)
1022 |                       ),
1023 |                       neq(this.onCloseEndValue, 1)
1024 |                     ),
1025 |                     [
1026 |                       call([], () => {
1027 |                         if (this.props.onCloseEnd) this.props.onCloseEnd()
1028 |                       }),
1029 |                       set(this.onCloseEndValue, 1),
1030 |                       cond(
1031 |                         defined(this.onOpenStartValue),
1032 |                         set(this.onOpenStartValue, 0)
1033 |                       ),
1034 |                       cond(
1035 |                         defined(this.onOpenEndValue),
1036 |                         set(this.onOpenEndValue, 0)
1037 |                       ),
1038 |                     ]
1039 |                   ),
1040 |                 ])}
1041 |               />
1042 |             )}
1043 |             {this.props.contentPosition && (
1044 |               <Animated.Code
1045 |                 exec={onChange(
1046 |                   this.Y,
1047 |                   set(this.props.contentPosition, sub(0, this.Y))
1048 |                 )}
1049 |               />
1050 |             )}
1051 |             {this.props.headerPosition && (
1052 |               <Animated.Code
1053 |                 exec={onChange(
1054 |                   this.translateMaster,
1055 |                   set(this.props.headerPosition, this.translateMaster)
1056 |                 )}
1057 |               />
1058 |             )}
1059 |           </View>
1060 |         </Animated.View>
1061 |       </>
1062 |     )
1063 |   }
1064 | }
1065 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "allowUnreachableCode": false,
 5 |     "allowUnusedLabels": false,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "jsx": "react",
 9 |     "lib": ["esnext"],
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "noFallthroughCasesInSwitch": true,
13 |     "noImplicitReturns": true,
14 |     "noImplicitUseStrict": false,
15 |     "noStrictGenericChecks": false,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "resolveJsonModule": true,
19 |     "skipLibCheck": true,
20 |     "strict": true,
21 |     "target": "esnext"
22 |   },
23 |   "include": ["src"]
24 | }
25 | 


--------------------------------------------------------------------------------