├── demo
    ├── assets
    │   ├── icon.png
    │   └── splash.png
    ├── babel.config.js
    ├── package.json
    ├── app.json
    ├── README.md
    └── App.js
├── LICENSE
├── README.md
├── DockingBottomSheet.js
└── ReactNativeExample.js


/demo/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamrajatsoni/DockingBottomSheet/HEAD/demo/assets/icon.png


--------------------------------------------------------------------------------
/demo/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamrajatsoni/DockingBottomSheet/HEAD/demo/assets/splash.png


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


--------------------------------------------------------------------------------
/demo/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 |     "docking-bottom-sheet": "^1.0.3",
12 |     "expo": "^34.0.1",
13 |     "react": "16.8.3",
14 |     "react-dom": "^16.8.6",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
16 |     "react-native-web": "^0.11.4"
17 |   },
18 |   "devDependencies": {
19 |     "babel-preset-expo": "^6.0.0"
20 |   },
21 |   "private": true
22 | }
23 | 


--------------------------------------------------------------------------------
/demo/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "DockingBottomSheet",
 4 |     "slug": "DockingBottomSheet",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "34.0.0",
 7 |     "platforms": [
 8 |       "ios",
 9 |       "android",
10 |       "web"
11 |     ],
12 |     "version": "1.0.0",
13 |     "orientation": "portrait",
14 |     "icon": "./assets/icon.png",
15 |     "splash": {
16 |       "image": "./assets/splash.png",
17 |       "resizeMode": "contain",
18 |       "backgroundColor": "#ffffff"
19 |     },
20 |     "updates": {
21 |       "fallbackToCacheTimeout": 0
22 |     },
23 |     "assetBundlePatterns": [
24 |       "**/*"
25 |     ],
26 |     "ios": {
27 |       "supportsTablet": true
28 |     }
29 |   }
30 | }


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # Docking-Bottom-Sheet demo
 2 | **A React Native demo in Expo for [Docking Bottom Sheet](https://www.npmjs.com/package/docking-bottom-sheet)**
 3 | - `npm install` inside this directory after cloning.
 4 | - Make sure you have `expo cli` installed, if not refer [this doc](https://facebook.github.io/react-native/docs/getting-started)
 5 | - Run `expo start` command from this directory.
 6 | 
 7 | To understand how [it](https://www.npmjs.com/package/docking-bottom-sheet) works, refer links below:
 8 | - [npm](https://www.npmjs.com/package/docking-bottom-sheet)
 9 | - [GitHub](https://github.com/iamrajatsoni/DockingBottomSheet)
10 | <br>
11 | <img src="https://cdn-images-1.medium.com/max/1600/1*6r_ovW9OgoEdLxjSNuZTiA.gif" alt="DockingBottomSheet"/>
12 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # docking-bottom-sheet [![NPM version](https://badge.fury.io/js/docking-bottom-sheet.svg)](https://npmjs.org/package/docking-bottom-sheet) [![Build Status](https://travis-ci.org/Rajat%20Soni/docking-bottom-sheet.svg?branch=master)](https://travis-ci.org/Rajat%20Soni/docking-bottom-sheet)
 4 | npm link: [https://www.npmjs.com/package/docking-bottom-sheet](https://www.npmjs.com/package/docking-bottom-sheet)<br>
 5 | Demo link: [https://github.com/iamrajatsoni/DockingBottomSheet/tree/master/demo](https://github.com/iamrajatsoni/DockingBottomSheet/tree/master/demo)
 6 | 
 7 | <img align="right" src="https://cdn-images-1.medium.com/max/1600/1*6r_ovW9OgoEdLxjSNuZTiA.gif" alt="DockingBottomSheet" hspace="24px" z-index="7"/>
 8 | 
 9 | > DockingBottomSheet offers a React Native component that takes in 2 types of content views as props.
10 | > One is Main content view and the other is Bottom-Sheet content view. Initially Main view is the active view when Bottom-Sheet is docked at the bottom. It can also be expanded and docked at the top by dragging or using function `expandBottomSheet()`. Once expanded, `dockBottomSheet()` function can be used to programmatically dock the rendered bottom-sheet. Various other props are exposed that can be used to customise `DockingBottomSheet` depending on one's requirement.
11 | >
12 | 
13 | ## Installation
14 | ```sh
15 | $ npm i docking-bottom-sheet
16 | ```
17 | 
18 | ## Import and Basic Usage
19 | __Import__
20 | ```js
21 | import DockingBottomSheet from 'docking-bottom-sheet'
22 | ```
23 | ```js
24 | var DockingBottomSheet = require('docking-bottom-sheet');
25 | ```
26 | 
27 | __Basic Usage__
28 | ```jsx
29 | <DockingBottomSheet
30 |     ref={ (bottomSheetRef)=> this.bottomSheetRef = bottomSheetRef }
31 |     containerStyle={ <style object> }
32 |     dockHeight={ <number> }
33 |     sheetExpandedTopOffset={ <number> }
34 |     sheetDarknessAlpha={ <float (0 to 1)> }
35 |     mainViewDownScale={ <float (0 to 1)> }
36 |     mainContentView={ <function that returns UI elements> }
37 |     bottomSheetContentView={ <function that returns UI elements> }
38 | />
39 | ```
40 | 
41 | ## Props
42 | * __containerStyle__ [Object]: Styling for `View` that holds `main-view` and `bottom-sheet` views. `default: { flex: 1 }`
43 | 
44 | * __dockHeight__ [Number]: Visible height of `bottom-sheet` when it is docked at the bottom. `default: 96`
45 | 
46 | * __sheetExpandedTopOffset__ [Number]: Top-offset of `bottom-sheet` in its expanded state. `default: 128`
47 | 
48 | * __sheetDarknessAlpha__ [Float]: The final background darkness alpha of `bottom-sheet` when its completely expanded. `default: 0.7`
49 | 
50 | * __mainViewDownScale__ [Float]: The final scale-down value of View `[main-view]` behind `bottom-sheet` scales down when its completely expanded. `default: 0.9`
51 | 
52 | * __mainContentView__ [Function]: Function that returns View`[main-view]` to be rendered behind `bottom-sheet`. `default: () =>  null`
53 | 
54 | * __bottomSheetContentView__ [Function]: Function that returns View to be rendered as `bottom-sheet` [Note: the bottom-sheet itself is a scroll-view so do not pass scroll-view as parent view-element to this prop]. `default: () =>  null`
55 | 
56 | ## Functions
57 | * __expandBottomSheet()__: Used to programmatically expand `bottom-sheet`. `eg. bottomSheetRef.expandBottomSheet()`
58 | 
59 | * __dockBottomSheet()__: Used to programmatically dock `bottom-sheet` at the bottom. `eg. bottomSheetRef.dockBottomSheet()`
60 |  
61 | ## Note
62 | * Bottom-Sheet's parent is a React Native ScrollView, hence avoid passing ScrollView as root component to prop `bottomSheetContentView`.
63 | 
64 | ## License
65 | MIT © [Rajat Soni](https://www.npmjs.com/~rajatsoni)
66 | 


--------------------------------------------------------------------------------
/DockingBottomSheet.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |     Author: Rajat Soni
  3 |     Email: iamrajat29@gmail.com
  4 |     GitHub: https://github.com/iamrajatsoni
  5 |     npm: https://www.npmjs.com/~rajatsoni
  6 |  */
  7 | import React, { PureComponent } from 'react';
  8 | import {
  9 |   View,
 10 |   ScrollView,
 11 |   PanResponder,
 12 |   Dimensions,
 13 |   Animated,
 14 |   TouchableOpacity,
 15 |   Platform,
 16 | } from 'react-native';
 17 | 
 18 | const DEVICE_WIDTH = Dimensions.get( 'window' ).width;
 19 | const DEVICE_HEIGHT = Dimensions.get( 'window' ).height;
 20 | const TRANSPARENT = 'rgba(0, 0, 0, 0)'
 21 | 
 22 | const mainViewStyles = {
 23 |   overflow:'visible',
 24 |   flex: 1,
 25 | }
 26 | 
 27 | const scrollViewStyles = {
 28 |   position: 'absolute',
 29 |   left: 0,
 30 |   right: 0,
 31 |   top: 0,
 32 |   bottom: 0,
 33 |   overflow:'visible',
 34 | }
 35 | 
 36 | export default class DockingBottomSheet extends PureComponent {
 37 |   
 38 |   static defaultProps = {
 39 |     containerStyle: { flex: 1 },
 40 |     dockHeight: 96,
 41 |     sheetExpandedTopOffset: 128,
 42 |     sheetDarknessAlpha: 0.7,
 43 |     mainViewDownScale: 0.9,
 44 |     mainContentView: () => null,
 45 |     bottomSheetContentView: () => null,
 46 |   }
 47 | 
 48 |   constructor( props ) {
 49 |     super( props );
 50 | 
 51 |     this.topSpacing = props.sheetExpandedTopOffset;
 52 |     this.viewHeight = DEVICE_HEIGHT;
 53 |     
 54 |     this.state = {
 55 |       scrollViewPointerEvents: 'none',
 56 |       pointerEventTogglerPE: null,
 57 |       scrollViewTopSpacing: DEVICE_HEIGHT,
 58 |       scrollY: new Animated.Value(0),
 59 |     }
 60 | 
 61 |     this.shouldDockAtBottom = true;
 62 |     this.isSystemScroll = false;
 63 | 
 64 |     this.setParentScrollViewRef = this.setParentScrollViewRef.bind( this );
 65 |     this.onContainerLayout = this.onContainerLayout.bind( this );
 66 |     this.parentOnScrollBeginDrag = this.parentOnScrollBeginDrag.bind( this );
 67 |     this.parentOnScrollEndDrag = this.parentOnScrollEndDrag.bind( this );
 68 |     this.parentOnMomentumScrollBegin = this.parentOnMomentumScrollBegin.bind( this );
 69 |     this.parentOnScroll = this.parentOnScroll.bind( this );
 70 | 
 71 |     this._panResponder = PanResponder.create({
 72 |       // Ask to be the responder:
 73 |       onStartShouldSetPanResponder: (evt, gestureState) => true,
 74 |       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
 75 |       onMoveShouldSetPanResponder: (evt, gestureState) => false,
 76 |       onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,
 77 |       onPanResponderGrant: (evt, gestureState) => {
 78 |         this.setState({
 79 |           scrollViewPointerEvents: null,
 80 |           pointerEventTogglerPE: 'none'
 81 |         })
 82 |       },
 83 |       onPanResponderMove: (evt, gestureState) => {
 84 |         this.setScrollValue(-gestureState.dy)
 85 |         this.doScroll(this.getScrollValue(), false)
 86 |       },
 87 |       onPanResponderRelease: (evt, gestureState) => {
 88 |         this.parentScrollVelocityYCache = gestureState.vy
 89 |         this.isSystemScroll = true
 90 | 
 91 |         this.parentOnScroll({
 92 |           nativeEvent: {
 93 |             velocity: { y: -gestureState.vy },
 94 |             contentOffset: { y: this.getScrollValue() }
 95 |           }
 96 |         })
 97 |       },
 98 |     });
 99 |   }
100 | 
101 |   componentDidUpdate() {
102 |     this.calculateTopSpacing();
103 |   }
104 | 
105 |   dockBottomSheet() {
106 |     this.setState({
107 |       scrollViewPointerEvents: 'none',
108 |       pointerEventTogglerPE: null
109 |     }, () => {
110 |       this.doScroll(0, true);
111 |     });
112 |   }
113 | 
114 |   expandBottomSheet() {
115 |     this.setState({
116 |       scrollViewPointerEvents: null,
117 |       pointerEventTogglerPE: 'none'
118 |     }, () => {
119 |       this.doScroll(this.topSpacing, true);
120 |     });
121 |   }
122 | 
123 |   doScroll(y, animated) {
124 |     this.bottomSheetRef.scrollTo( {
125 |       x: 0,
126 |       y,
127 |       animated,
128 |     } );
129 |   }
130 | 
131 |   setParentScrollViewRef( ref ) {
132 |     this.bottomSheetRef = ref;
133 |   }
134 | 
135 |   onContainerLayout( event ) {
136 |     const layout = event.nativeEvent.layout;
137 |     this.viewHeight = layout.height
138 | 
139 |     this.calculateTopSpacing();
140 |   }
141 | 
142 |   calculateTopSpacing() {
143 |     this.topSpacing = this.viewHeight - this.props.dockHeight - this.props.sheetExpandedTopOffset;
144 |     const calculatedSVTopSpacing = this.getScrollViewTopSpacing();
145 | 
146 |     if (this.state.scrollViewTopSpacing !== calculatedSVTopSpacing) {
147 |       this.setState({
148 |         scrollViewTopSpacing: calculatedSVTopSpacing,
149 |       })
150 |     }
151 |   }
152 | 
153 |   getScrollViewTopSpacing() {
154 |     return this.viewHeight - this.props.dockHeight
155 |   }
156 | 
157 |   parentOnScrollBeginDrag() {
158 |     this.shouldDockAtBottom = false;
159 |     this.isSystemScroll = false;
160 |   }
161 | 
162 |   parentOnScrollEndDrag( evt ) {
163 |     this.parentScrollVelocityYCache = evt.nativeEvent.velocity.y;
164 | 
165 |     if ( Math.abs( this.parentScrollVelocityYCache ) < 0.085
166 |       && evt.nativeEvent.contentOffset.y < this.topSpacing ) { // docking at bottom
167 | 
168 |       this.doScroll(0, true);
169 |       this.isSystemScroll = false;
170 |       this.shouldDockAtBottom = true;
171 |     }
172 |   }
173 | 
174 |   parentOnMomentumScrollBegin( evt ) {
175 |     this.isSystemScroll = true;
176 |     if ( evt.nativeEvent.contentOffset.y > this.topSpacing ) {
177 |       this.shouldDockAtBottom = false;
178 |     } else {
179 |       this.shouldDockAtBottom = true;
180 |     }
181 |   }
182 | 
183 |   setScrollValue(value) {
184 |     this.state.scrollY.setValue(value)
185 |   }
186 | 
187 |   getScrollValue() {
188 |     return this.state.scrollY._value
189 |   }
190 | 
191 |   parentOnScroll( evt ) {
192 |     const { nativeEvent } = evt;
193 |     this.setScrollValue(nativeEvent.contentOffset.y)
194 |     
195 |     if ( Platform.OS !== 'ios' ) {
196 |       this.parentScrollVelocityYCache = nativeEvent.velocity.y;
197 |     } else {
198 |       if (nativeEvent.velocity) {        
199 |         this.parentScrollVelocityYCache = nativeEvent.velocity.y;
200 |       }
201 |     }
202 | 
203 |     if ( this.isSystemScroll ) {
204 |       if ( this.shouldDockAtBottom
205 |           && this.parentScrollVelocityYCache < 0
206 |           && evt.nativeEvent.contentOffset.y < this.topSpacing ) {
207 |         this.doScroll(0, true);
208 |         this.isSystemScroll = false;
209 |         this.setState({
210 |           scrollViewPointerEvents: 'none',
211 |           pointerEventTogglerPE: null })
212 |       } else if ( evt.nativeEvent.contentOffset.y < this.topSpacing ) {
213 |         this.isSystemScroll = false;
214 |         this.shouldDockAtBottom = false;
215 |         this.doScroll(this.topSpacing, true);
216 |       }
217 |     }
218 |   }
219 | 
220 |   render() {
221 |     const scrollBgColor = this.state.scrollY.interpolate({
222 |       inputRange: [0, this.topSpacing, DEVICE_HEIGHT],
223 |       outputRange: [TRANSPARENT, `rgba(0, 0, 0, ${ this.props.sheetDarknessAlpha })`, `rgba(0, 0, 0, ${ this.props.sheetDarknessAlpha })`]
224 |     });
225 | 
226 |     const mainViewScale = this.state.scrollY.interpolate({
227 |       inputRange: [-this.topSpacing, 0, this.topSpacing],
228 |       outputRange: [1, 1, this.props.mainViewDownScale]
229 |     });
230 | 
231 |     return (
232 |       <View
233 |         style={ this.props.containerStyle }
234 |         onLayout={ this.onContainerLayout } >
235 |         <Animated.View
236 |           style={ [
237 |             mainViewStyles,
238 |             { transform: [{ scaleX: mainViewScale }, { scaleY: mainViewScale }] },
239 |             { paddingBottom: this.props.dockHeight }] }>
240 |           { this.props.mainContentView() }
241 |         </Animated.View>
242 | 
243 |         <Animated.View
244 |           style={ [ { backgroundColor: scrollBgColor }, scrollViewStyles ] }
245 |           pointerEvents={this.state.scrollViewPointerEvents}
246 |         >
247 |           <ScrollView
248 |             bounces={ false }
249 |             scrollsToTop={ false }
250 |             scrollEventThrottle={ 8 }
251 |             showsVerticalScrollIndicator={ false }
252 |             scrollEnabled={ true }
253 |             ref={ this.setParentScrollViewRef }
254 |             onScrollBeginDrag={ this.parentOnScrollBeginDrag }
255 |             onScrollEndDrag={ this.parentOnScrollEndDrag }
256 |             onMomentumScrollBegin={ this.parentOnMomentumScrollBegin }
257 |             onScroll={ this.parentOnScroll }
258 |           >
259 |             <TouchableOpacity
260 |               onPress={() => this.dockBottomSheet()}
261 |               style={{ height: this.state.scrollViewTopSpacing }}/>
262 | 
263 |             <View style={ { elevation:8 } }>
264 |               { this.props.bottomSheetContentView() }
265 |             </View>
266 |           </ScrollView>
267 |         </Animated.View>
268 |         
269 |         <View
270 |           {...this._panResponder.panHandlers}
271 |           pointerEvents={this.state.pointerEventTogglerPE}
272 |           style={ {
273 |             width: DEVICE_WIDTH,
274 |             height: this.props.dockHeight,
275 |             backgroundColor: '#0000',
276 |             position: 'absolute',
277 |             left: 0,
278 |             bottom: 0
279 |           } } >
280 | 
281 |         </View>
282 |       </View>
283 |     );
284 |   }
285 | }
286 | 


--------------------------------------------------------------------------------
/ReactNativeExample.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @format
  3 |  */
  4 | 
  5 | import { Dimensions } from 'react-native';
  6 | import DockingBottomSheet from './DockingBottomSheet'
  7 | /**
  8 |     Author: Rajat Soni
  9 |     email: iamrajat29@gmail.com
 10 |     @flow
 11 |  */
 12 | import React, { PureComponent } from 'react';
 13 | import {
 14 |   View,
 15 |   ScrollView,
 16 |   Button,
 17 | } from 'react-native';
 18 | 
 19 | const deviceWidth = Dimensions.get( 'window' ).width;
 20 | 
 21 | export default class Home extends PureComponent {
 22 | 
 23 |   render() {
 24 |     return (
 25 |       <View style={ { flex: 1 } }>
 26 |           <View style={ { flex: 1, backgroundColor: '#EEE' } }>
 27 |             <DockingBottomSheet
 28 |                 dockHeight={ 96 }
 29 |                 topSpacing={ 128 }
 30 |                 darknessLimit={ 0.7 }
 31 |                 scaleLimit={ 0.9 }
 32 |                 mainContentView={ this.renderMainViewData }
 33 |                 bottomSheetContentView={ this.renderSVContent }
 34 |             />
 35 |           </View>
 36 |       </View>
 37 |     );
 38 |   }
 39 | 
 40 |   // MAIN VIEW DATA
 41 | 
 42 |   renderMainViewData() {
 43 |     return(
 44 |       <View>
 45 |         <ScrollView>
 46 |           {renderBlock(1, 50)}
 47 |           {renderBlock(4, 100)}
 48 |           {renderBlock(3, 150)}
 49 | 
 50 |           <View style={{height: 16}} />
 51 |           <Button
 52 |             onPress={()=>{console.warn('clicked')}}
 53 |             title="Click Me!"
 54 |             color="#999"
 55 |             accessibilityLabel="Learn more about this purple button"
 56 |           />
 57 |           
 58 |           {renderBlock(1, 150)}
 59 |           {renderBlock(4, 50)}
 60 |           {renderBlock(2, 100)}
 61 | 
 62 |           <View style={{height: 16}} />
 63 |           <Button
 64 |             onPress={()=>{console.warn('clicked')}}
 65 |             title="Click Me Too!"
 66 |             color="#999"
 67 |             accessibilityLabel="Learn more about this purple button"
 68 |           />
 69 | 
 70 |           {renderBlock(7, 50)}
 71 |           {renderBlock(2, 100)}
 72 |           {renderBlock(3, 100)}
 73 |           {renderBlock(1, 50)}
 74 |           {renderBlock(4, 100)}
 75 |           {renderBlock(3, 150)}
 76 | 
 77 |           <View style={{height: 16}} />
 78 |           <Button
 79 |             onPress={()=>{console.warn('clicked')}}
 80 |             title="Click Me!"
 81 |             color="#999"
 82 |             accessibilityLabel="Learn more about this purple button"
 83 |           />
 84 | 
 85 |           {renderBlock(1, 150)}
 86 |           {renderBlock(4, 50)}
 87 |           {renderBlock(2, 100)}
 88 | 
 89 |           <View style={{height: 16}} />
 90 |           <Button
 91 |             onPress={()=>{console.warn('clicked')}}
 92 |             title="Click Me Too!"
 93 |             color="#999"
 94 |             accessibilityLabel="Learn more about this purple button"
 95 |           />
 96 | 
 97 |           {renderBlock(7, 50)}
 98 |           {renderBlock(2, 100)}
 99 |           {renderBlock(3, 100)}
100 | 
101 |           {renderBlock(1, 50)}
102 |           {renderBlock(4, 100)}
103 |           {renderBlock(3, 150)}
104 | 
105 |           <View style={{height: 16}} />
106 |           <Button
107 |             onPress={()=>{console.warn('clicked')}}
108 |             title="Click Me!"
109 |             color="#999"
110 |             accessibilityLabel="Learn more about this purple button"
111 |           />
112 | 
113 |           {renderBlock(1, 150)}
114 |           {renderBlock(4, 50)}
115 |           {renderBlock(2, 100)}
116 | 
117 |           <View style={{height: 16}} />
118 |           <Button
119 |             onPress={()=>{console.warn('clicked')}}
120 |             title="Click Me Too!"
121 |             color="#999"
122 |             accessibilityLabel="Learn more about this purple button"
123 |           />
124 | 
125 |           {renderBlock(7, 50)}
126 |           {renderBlock(2, 100)}
127 |           {renderBlock(3, 100)}
128 | 
129 |           <View style={{height: 16}} />
130 |       </ScrollView>
131 |       </View>
132 |     )
133 |   }
134 | 
135 | 
136 |   // SCROLL VIEW DATA
137 | 
138 |   renderSVContent() {
139 |     return (
140 |       <View style={{backgroundColor: '#333'}}>
141 |         {renderBlock(1, 68, '#666')}
142 |         {renderBlock(10, 20, '#666')}
143 |         {renderBlock(4, 50, '#666')}
144 |         {renderBlock(1, 100, '#666')}
145 | 
146 |         <View style={{height: 16}} />
147 |         <Button
148 |           onPress={()=>{console.warn('clicked')}}
149 |           title="Click Me!!"
150 |           color="#666"
151 |           accessibilityLabel="Learn more about this purple button"
152 |         />
153 |         
154 |         {renderBlock(1, 100, '#666')}
155 |         {renderBlock(4, 50, '#666')}
156 |         {renderBlock(2, 100, '#666')}
157 | 
158 |         <View style={{height: 16}} />
159 |         <Button
160 |           onPress={()=>{console.warn('clicked')}}
161 |           title="Click Me Too!!"
162 |           color="#666"
163 |           accessibilityLabel="Learn more about this purple button"
164 |         />
165 | 
166 |         {renderBlock(7, 50, '#666')}
167 |         {renderBlock(2, 100, '#666')}
168 |         {renderBlock(3, 100, '#666')}
169 | 
170 |         <View style={{height: 16}} />
171 |         {renderBlock(1, 68, '#666')}
172 |         {renderBlock(10, 20, '#666')}
173 |         {renderBlock(4, 50, '#666')}
174 |         {renderBlock(1, 100, '#666')}
175 | 
176 |         <View style={{height: 16}} />
177 |         <Button
178 |           onPress={()=>{console.warn('clicked')}}
179 |           title="Click Me!!"
180 |           color="#666"
181 |           accessibilityLabel="Learn more about this purple button"
182 |         />
183 |         
184 |         {renderBlock(1, 100, '#666')}
185 |         {renderBlock(4, 50, '#666')}
186 |         {renderBlock(2, 100, '#666')}
187 | 
188 |         <View style={{height: 16}} />
189 |         <Button
190 |           onPress={()=>{console.warn('clicked')}}
191 |           title="Click Me Too!!"
192 |           color="#666"
193 |           accessibilityLabel="Learn more about this purple button"
194 |         />
195 | 
196 |         {renderBlock(7, 50, '#666')}
197 |         {renderBlock(2, 100, '#666')}
198 |         {renderBlock(3, 100, '#666')}
199 | 
200 |         <View style={{height: 16}} />
201 |         {renderBlock(1, 68, '#666')}
202 |         {renderBlock(10, 20, '#666')}
203 |         {renderBlock(4, 50, '#666')}
204 |         {renderBlock(1, 100, '#666')}
205 | 
206 |         <View style={{height: 16}} />
207 |         <Button
208 |           onPress={()=>{console.warn('clicked')}}
209 |           title="Click Me!!"
210 |           color="#666"
211 |           accessibilityLabel="Learn more about this purple button"
212 |         />
213 |         
214 |         {renderBlock(1, 100, '#666')}
215 |         {renderBlock(4, 50, '#666')}
216 |         {renderBlock(2, 100, '#666')}
217 | 
218 |         <View style={{height: 16}} />
219 |         <Button
220 |           onPress={()=>{console.warn('clicked')}}
221 |           title="Click Me Too!!"
222 |           color="#666"
223 |           accessibilityLabel="Learn more about this purple button"
224 |         />
225 | 
226 |         {renderBlock(7, 50, '#666')}
227 |         {renderBlock(2, 100, '#666')}
228 |         {renderBlock(3, 100, '#666')}
229 | 
230 |         <View style={{height: 16}} />
231 |         {renderBlock(1, 68, '#666')}
232 |         {renderBlock(10, 20, '#666')}
233 |         {renderBlock(4, 50, '#666')}
234 |         {renderBlock(1, 100, '#666')}
235 | 
236 |         <View style={{height: 16}} />
237 |         <Button
238 |           onPress={()=>{console.warn('clicked')}}
239 |           title="Click Me!!"
240 |           color="#666"
241 |           accessibilityLabel="Learn more about this purple button"
242 |         />
243 |         
244 |         {renderBlock(1, 100, '#666')}
245 |         {renderBlock(4, 50, '#666')}
246 |         {renderBlock(2, 100, '#666')}
247 | 
248 |         <View style={{height: 16}} />
249 |         <Button
250 |           onPress={()=>{console.warn('clicked')}}
251 |           title="Click Me Too!!"
252 |           color="#666"
253 |           accessibilityLabel="Learn more about this purple button"
254 |         />
255 | 
256 |         {renderBlock(7, 50, '#666')}
257 |         {renderBlock(2, 100, '#666')}
258 |         {renderBlock(3, 100, '#666')}
259 | 
260 |         <View style={{height: 16}} />
261 |         {renderBlock(1, 68, '#666')}
262 |         {renderBlock(10, 20, '#666')}
263 |         {renderBlock(4, 50, '#666')}
264 |         {renderBlock(1, 100, '#666')}
265 | 
266 |         <View style={{height: 16}} />
267 |         <Button
268 |           onPress={()=>{console.warn('clicked')}}
269 |           title="Click Me!!"
270 |           color="#666"
271 |           accessibilityLabel="Learn more about this purple button"
272 |         />
273 |         
274 |         {renderBlock(1, 100, '#666')}
275 |         {renderBlock(4, 50, '#666')}
276 |         {renderBlock(2, 100, '#666')}
277 | 
278 |         <View style={{height: 16}} />
279 |         <Button
280 |           onPress={()=>{console.warn('clicked')}}
281 |           title="Click Me Too!!"
282 |           color="#666"
283 |           accessibilityLabel="Learn more about this purple button"
284 |         />
285 | 
286 |         {renderBlock(7, 50, '#666')}
287 |         {renderBlock(2, 100, '#666')}
288 |         {renderBlock(3, 100, '#666')}
289 | 
290 |         <View style={{height: 16}} />
291 |         {renderBlock(1, 68, '#666')}
292 |         {renderBlock(10, 20, '#666')}
293 |         {renderBlock(4, 50, '#666')}
294 |         {renderBlock(1, 100, '#666')}
295 | 
296 |         <View style={{height: 16}} />
297 |         <Button
298 |           onPress={()=>{console.warn('clicked')}}
299 |           title="Click Me!!"
300 |           color="#666"
301 |           accessibilityLabel="Learn more about this purple button"
302 |         />
303 |         
304 |         {renderBlock(1, 100, '#666')}
305 |         {renderBlock(4, 50, '#666')}
306 |         {renderBlock(2, 100, '#666')}
307 | 
308 |         <View style={{height: 16}} />
309 |         <Button
310 |           onPress={()=>{console.warn('clicked')}}
311 |           title="Click Me Too!!"
312 |           color="#666"
313 |           accessibilityLabel="Learn more about this purple button"
314 |         />
315 | 
316 |         {renderBlock(7, 50, '#666')}
317 |         {renderBlock(2, 100, '#666')}
318 |         {renderBlock(3, 100, '#666')}
319 | 
320 |         <View style={{height: 16}} />
321 |       </View>
322 |     )
323 |   }
324 | 
325 | }
326 | 
327 | const renderBlock = function(count, height, bgColor) {
328 |   const spacing = 16;
329 |   const arr = []
330 |   
331 |   for (let i = 0; i < count; i++) {
332 |     arr.push(i)
333 |   }
334 | 
335 |   const blockWidth = (deviceWidth - spacing * 2 - (count - 1) * spacing)/count
336 | 
337 |   return  (
338 |     <View
339 |         style={{
340 |           flexDirection: 'row',
341 |           marginLeft: spacing,
342 |           marginRight: spacing,
343 |           marginTop: spacing,
344 |           justifyContent: 'space-between'
345 |         }}
346 |       >
347 |         {
348 |           arr.map((_, index )=>{
349 |             return (
350 |               <View
351 |                 key={`${count} ${index}`}
352 |                 style={{
353 |                   backgroundColor: bgColor || '#CCC',
354 |                   width: blockWidth,
355 |                   height,
356 |                 }}
357 |               />
358 |             )
359 |           })
360 |         }
361 |       </View>
362 |   )
363 | }
364 | 


--------------------------------------------------------------------------------
/demo/App.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import { View, ScrollView, Button, Dimensions, Alert } from 'react-native';
  3 | import DockingBottomSheet from 'docking-bottom-sheet';
  4 | 
  5 | /**
  6 |     Author: Rajat Soni
  7 |     email: iamrajat29@gmail.com
  8 |     @flow
  9 |  */
 10 | 
 11 | const deviceWidth = Dimensions.get( 'window' ).width;
 12 | 
 13 | export default class App extends PureComponent {
 14 |   constructor(props) {
 15 |     super(props)
 16 |     
 17 |     this.state = {
 18 |       dockHeight: 150,
 19 |       sheetExpandedTopOffset: 128,
 20 |       sheetDarknessAlpha: 0.7,
 21 |       mainViewDownScale: 0.9,
 22 |       containerStyle: {flex:1},
 23 |     }
 24 |   }
 25 | 
 26 |   render() {
 27 |     return (
 28 |       <View style={ { flex: 1, backgroundColor: '#EEE', marginTop: 24 } }>
 29 |         <DockingBottomSheet
 30 |             ref={ (bottomSheetRef)=> this.bottomSheetRef = bottomSheetRef }
 31 |             containerStyle={ this.state.containerStyle }
 32 |             dockHeight={ this.state.dockHeight }
 33 |             sheetExpandedTopOffset={ this.state.sheetExpandedTopOffset }
 34 |             sheetDarknessAlpha={ this.state.sheetDarknessAlpha }
 35 |             mainViewDownScale={ this.state.mainViewDownScale }
 36 |             mainContentView={ this.renderMainViewData }
 37 |             bottomSheetContentView={ this.renderBottomSheetContent }
 38 |         />
 39 |       </View>
 40 |     );
 41 |   }
 42 | 
 43 |   // MAIN VIEW DATA
 44 | 
 45 |   renderMainViewData() {
 46 |     return(
 47 |       <View>
 48 |         <ScrollView>
 49 |           {renderBlock(1, 50)}
 50 |           {renderBlock(4, 100)}
 51 |           {renderBlock(3, 150)}
 52 | 
 53 |           <View style={{height: 16}} />
 54 |           <Button
 55 |             onPress={ () => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
 56 |             title="Click Me!"
 57 |             color="#999"
 58 |             accessibilityLabel="Learn more about this purple button"
 59 |           />
 60 |           
 61 |           {renderBlock(1, 150)}
 62 |           {renderBlock(4, 50)}
 63 |           {renderBlock(2, 100)}
 64 | 
 65 |           <View style={{height: 16}} />
 66 |           <Button
 67 |             onPress={() => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
 68 |             title="Click Me Too!"
 69 |             color="#999"
 70 |             accessibilityLabel="Learn more about this purple button"
 71 |           />
 72 | 
 73 |           {renderBlock(7, 50)}
 74 |           {renderBlock(2, 100)}
 75 |           {renderBlock(3, 100)}
 76 |           {renderBlock(1, 50)}
 77 |           {renderBlock(4, 100)}
 78 |           {renderBlock(3, 150)}
 79 | 
 80 |           <View style={{height: 16}} />
 81 |           <Button
 82 |             onPress={() => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
 83 |             title="Click Me!"
 84 |             color="#999"
 85 |             accessibilityLabel="Learn more about this purple button"
 86 |           />
 87 | 
 88 |           {renderBlock(1, 150)}
 89 |           {renderBlock(4, 50)}
 90 |           {renderBlock(2, 100)}
 91 | 
 92 |           <View style={{height: 16}} />
 93 |           <Button
 94 |             onPress={() => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
 95 |             title="Click Me Too!"
 96 |             color="#999"
 97 |             accessibilityLabel="Learn more about this purple button"
 98 |           />
 99 | 
100 |           {renderBlock(7, 50)}
101 |           {renderBlock(2, 100)}
102 |           {renderBlock(3, 100)}
103 | 
104 |           {renderBlock(1, 50)}
105 |           {renderBlock(4, 100)}
106 |           {renderBlock(3, 150)}
107 | 
108 |           <View style={{height: 16}} />
109 |           <Button
110 |             onPress={() => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
111 |             title="Click Me!"
112 |             color="#999"
113 |             accessibilityLabel="Learn more about this purple button"
114 |           />
115 | 
116 |           {renderBlock(1, 150)}
117 |           {renderBlock(4, 50)}
118 |           {renderBlock(2, 100)}
119 | 
120 |           <View style={{height: 16}} />
121 |           <Button
122 |             onPress={() => createAlert('MainView Context', 'A Button inside Main View has been clicked.') }
123 |             title="Click Me Too!"
124 |             color="#999"
125 |             accessibilityLabel="Learn more about this purple button"
126 |           />
127 | 
128 |           {renderBlock(7, 50)}
129 |           {renderBlock(2, 100)}
130 |           {renderBlock(3, 100)}
131 | 
132 |           <View style={{height: 16}} />
133 |       </ScrollView>
134 |       </View>
135 |     )
136 |   }
137 | 
138 | 
139 |   // SCROLL VIEW DATA
140 | 
141 |   renderBottomSheetContent() {
142 |     return (
143 |       <View style={{backgroundColor: '#333'}}>
144 |         {renderBlock(1, 68, '#666')}
145 |         {renderBlock(10, 20, '#666')}
146 |         {renderBlock(4, 50, '#666')}
147 |         {renderBlock(1, 100, '#666')}
148 | 
149 |         <View style={{height: 16}} />
150 |         <Button
151 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
152 |           title="Click Me!!"
153 |           color="#666"
154 |           accessibilityLabel="Learn more about this purple button"
155 |         />
156 |         
157 |         {renderBlock(1, 100, '#666')}
158 |         {renderBlock(4, 50, '#666')}
159 |         {renderBlock(2, 100, '#666')}
160 | 
161 |         <View style={{height: 16}} />
162 |         <Button
163 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
164 |           title="Click Me Too!!"
165 |           color="#666"
166 |           accessibilityLabel="Learn more about this purple button"
167 |         />
168 | 
169 |         {renderBlock(7, 50, '#666')}
170 |         {renderBlock(2, 100, '#666')}
171 |         {renderBlock(3, 100, '#666')}
172 | 
173 |         <View style={{height: 16}} />
174 |         {renderBlock(1, 68, '#666')}
175 |         {renderBlock(10, 20, '#666')}
176 |         {renderBlock(4, 50, '#666')}
177 |         {renderBlock(1, 100, '#666')}
178 | 
179 |         <View style={{height: 16}} />
180 |         <Button
181 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
182 |           title="Click Me!!"
183 |           color="#666"
184 |           accessibilityLabel="Learn more about this purple button"
185 |         />
186 |         
187 |         {renderBlock(1, 100, '#666')}
188 |         {renderBlock(4, 50, '#666')}
189 |         {renderBlock(2, 100, '#666')}
190 | 
191 |         <View style={{height: 16}} />
192 |         <Button
193 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
194 |           title="Click Me Too!!"
195 |           color="#666"
196 |           accessibilityLabel="Learn more about this purple button"
197 |         />
198 | 
199 |         {renderBlock(7, 50, '#666')}
200 |         {renderBlock(2, 100, '#666')}
201 |         {renderBlock(3, 100, '#666')}
202 | 
203 |         <View style={{height: 16}} />
204 |         {renderBlock(1, 68, '#666')}
205 |         {renderBlock(10, 20, '#666')}
206 |         {renderBlock(4, 50, '#666')}
207 |         {renderBlock(1, 100, '#666')}
208 | 
209 |         <View style={{height: 16}} />
210 |         <Button
211 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
212 |           title="Click Me!!"
213 |           color="#666"
214 |           accessibilityLabel="Learn more about this purple button"
215 |         />
216 |         
217 |         {renderBlock(1, 100, '#666')}
218 |         {renderBlock(4, 50, '#666')}
219 |         {renderBlock(2, 100, '#666')}
220 | 
221 |         <View style={{height: 16}} />
222 |         <Button
223 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
224 |           title="Click Me Too!!"
225 |           color="#666"
226 |           accessibilityLabel="Learn more about this purple button"
227 |         />
228 | 
229 |         {renderBlock(7, 50, '#666')}
230 |         {renderBlock(2, 100, '#666')}
231 |         {renderBlock(3, 100, '#666')}
232 | 
233 |         <View style={{height: 16}} />
234 |         {renderBlock(1, 68, '#666')}
235 |         {renderBlock(10, 20, '#666')}
236 |         {renderBlock(4, 50, '#666')}
237 |         {renderBlock(1, 100, '#666')}
238 | 
239 |         <View style={{height: 16}} />
240 |         <Button
241 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
242 |           title="Click Me!!"
243 |           color="#666"
244 |           accessibilityLabel="Learn more about this purple button"
245 |         />
246 |         
247 |         {renderBlock(1, 100, '#666')}
248 |         {renderBlock(4, 50, '#666')}
249 |         {renderBlock(2, 100, '#666')}
250 | 
251 |         <View style={{height: 16}} />
252 |         <Button
253 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
254 |           title="Click Me Too!!"
255 |           color="#666"
256 |           accessibilityLabel="Learn more about this purple button"
257 |         />
258 | 
259 |         {renderBlock(7, 50, '#666')}
260 |         {renderBlock(2, 100, '#666')}
261 |         {renderBlock(3, 100, '#666')}
262 | 
263 |         <View style={{height: 16}} />
264 |         {renderBlock(1, 68, '#666')}
265 |         {renderBlock(10, 20, '#666')}
266 |         {renderBlock(4, 50, '#666')}
267 |         {renderBlock(1, 100, '#666')}
268 | 
269 |         <View style={{height: 16}} />
270 |         <Button
271 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
272 |           title="Click Me!!"
273 |           color="#666"
274 |           accessibilityLabel="Learn more about this purple button"
275 |         />
276 |         
277 |         {renderBlock(1, 100, '#666')}
278 |         {renderBlock(4, 50, '#666')}
279 |         {renderBlock(2, 100, '#666')}
280 | 
281 |         <View style={{height: 16}} />
282 |         <Button
283 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
284 |           title="Click Me Too!!"
285 |           color="#666"
286 |           accessibilityLabel="Learn more about this purple button"
287 |         />
288 | 
289 |         {renderBlock(7, 50, '#666')}
290 |         {renderBlock(2, 100, '#666')}
291 |         {renderBlock(3, 100, '#666')}
292 | 
293 |         <View style={{height: 16}} />
294 |         {renderBlock(1, 68, '#666')}
295 |         {renderBlock(10, 20, '#666')}
296 |         {renderBlock(4, 50, '#666')}
297 |         {renderBlock(1, 100, '#666')}
298 | 
299 |         <View style={{height: 16}} />
300 |         <Button
301 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
302 |           title="Click Me!!"
303 |           color="#666"
304 |           accessibilityLabel="Learn more about this purple button"
305 |         />
306 |         
307 |         {renderBlock(1, 100, '#666')}
308 |         {renderBlock(4, 50, '#666')}
309 |         {renderBlock(2, 100, '#666')}
310 | 
311 |         <View style={{height: 16}} />
312 |         <Button
313 |           onPress={() => createAlert('BottomSheet Context', 'A Button inside BottomSheet has been clicked.') }
314 |           title="Click Me Too!!"
315 |           color="#666"
316 |           accessibilityLabel="Learn more about this purple button"
317 |         />
318 | 
319 |         {renderBlock(7, 50, '#666')}
320 |         {renderBlock(2, 100, '#666')}
321 |         {renderBlock(3, 100, '#666')}
322 | 
323 |         <View style={{height: 16}} />
324 |       </View>
325 |     )
326 |   }
327 | 
328 | }
329 | 
330 | const createAlert = function (title, message) {
331 |   Alert.alert(title, message,
332 |     [
333 |       {text: 'OK', onPress: () => console.log('OK Pressed')},
334 |     ],
335 |     {cancelable: false},
336 |   );
337 | }
338 | 
339 | const renderBlock = function (count, height, bgColor) {
340 |   const spacing = 16;
341 |   const arr = []
342 |   
343 |   for (let i = 0; i < count; i++) {
344 |     arr.push(i)
345 |   }
346 | 
347 |   const blockWidth = (deviceWidth - spacing * 2 - (count - 1) * spacing)/count
348 | 
349 |   return  (
350 |     <View
351 |         style={{
352 |           flexDirection: 'row',
353 |           marginLeft: spacing,
354 |           marginRight: spacing,
355 |           marginTop: spacing,
356 |           justifyContent: 'space-between'
357 |         }}
358 |       >
359 |         {
360 |           arr.map((_, index )=>{
361 |             return (
362 |               <View
363 |                 key={`${count} ${index}`}
364 |                 style={{
365 |                   backgroundColor: bgColor || '#CCC',
366 |                   width: blockWidth,
367 |                   height,
368 |                 }}
369 |               />
370 |             )
371 |           })
372 |         }
373 |       </View>
374 |   )
375 | }
376 | 


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