add snapTo method to animate height

README.md

@@ -140,6 +140,8 @@ renderItem = (item, index) => (
 | onOpen           | function | Callback function when Bottom Sheet has opened          | null     |
 | customStyles     | object   | Custom style to Bottom Sheet                            | {}       |
 | keyboardAvoidingViewEnabled     | boolean   | Enable KeyboardAvoidingView             | true (ios) |
+| renderHeader     | function | Method for rendering non-scrollable header of bottom sheet. | null     |
+| enabledInnerScrolling     | boolean | Enable scrolling inner sheet    | false     |
 
 ### Available Custom Style
 
@@ -157,6 +159,7 @@ customStyles: {
 | ----------- | ------------------ |
 | open        | Open Bottom Sheet  |
 | close       | Close Bottom Sheet |
+| snapTo      | Animate Height     |
 
 ## Note
 

__tests__/RBSheet.test.js

@@ -146,5 +146,11 @@ describe("React Native Raw Bottom Sheet", () => {
         .onRequestClose();
       expect(mockFn).toHaveBeenCalled();
     });
+
+    it("should method snapTo called", () => {
+      const snapTo = jest.spyOn(RBSheet.prototype, "snapTo");
+      wrapper.instance().snapTo({ height: 580, duration: 200 });
+      expect(snapTo).toHaveBeenCalledTimes(1);
+    });
   });
 });

index.d.ts

@@ -14,16 +14,19 @@ declare module "react-native-raw-bottom-sheet" {
     closeOnPressBack?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
+    renderHeader?: () => React.ReactNode;
     customStyles?: {
       wrapper?: StyleProp<ViewStyle>;
       container?: StyleProp<ViewStyle>;
       draggableIcon?: StyleProp<ViewStyle>;
     };
     keyboardAvoidingViewEnabled?: boolean;
+    enabledInnerScrolling?: boolean;
   };
 
   export default class RBSheet extends Component<RBSheetProps> {
     open(): void;
     close(): void;
+    snapTo(): void;
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
   "main": "index.js",
   "typings": "index.d.ts",

src/index.js

@@ -7,7 +7,8 @@ import {
   TouchableOpacity,
   Animated,
   PanResponder,
-  Platform
+  Platform,
+  ScrollView
 } from "react-native";
 import styles from "./style";
 
@@ -36,12 +37,13 @@ class RBSheet extends Component {
     const { animatedHeight, pan } = this.state;
     if (visible) {
       this.setState({ modalVisible: visible });
-      if (typeof onOpen === "function") onOpen(props);
       Animated.timing(animatedHeight, {
         useNativeDriver: false,
         toValue: height,
         duration: openDuration
-      }).start();
+      }).start(() => {
+        if (typeof onOpen === "function") onOpen(props);
+      });
     } else {
       Animated.timing(animatedHeight, {
         useNativeDriver: false,
@@ -87,6 +89,16 @@ class RBSheet extends Component {
     this.setModalVisible(false, props);
   }
 
+  snapTo(props) {
+    const { animatedHeight } = this.state;
+    const { height, duration = 200 } = props;
+    Animated.timing(animatedHeight, {
+      useNativeDriver: false,
+      toValue: height,
+      duration
+    }).start();
+  }
+
   render() {
     const {
       animationType,
@@ -96,7 +108,10 @@ class RBSheet extends Component {
       closeOnPressBack,
       children,
       customStyles,
-      keyboardAvoidingViewEnabled
+      keyboardAvoidingViewEnabled,
+      renderHeader,
+      enabledInnerScrolling,
+      closeButton
     } = this.props;
     const { animatedHeight, pan, modalVisible } = this.state;
     const panStyle = {
@@ -118,24 +133,36 @@ class RBSheet extends Component {
           behavior="padding"
           style={[styles.wrapper, customStyles.wrapper]}
         >
+          {closeButton}
           <TouchableOpacity
             style={styles.mask}
             activeOpacity={1}
             onPress={() => (closeOnPressMask ? this.close() : null)}
           />
+          {renderHeader && <Animated.View style={[panStyle]}>{renderHeader()}</Animated.View>}
           <Animated.View
-            {...(!dragFromTopOnly && this.panResponder.panHandlers)}
+            {...(!dragFromTopOnly && !enabledInnerScrolling && this.panResponder.panHandlers)}
             style={[panStyle, styles.container, { height: animatedHeight }, customStyles.container]}
           >
             {closeOnDragDown && (
               <View
-                {...(dragFromTopOnly && this.panResponder.panHandlers)}
+                {...((enabledInnerScrolling ? !dragFromTopOnly : dragFromTopOnly) &&
+                  this.panResponder.panHandlers)}
                 style={styles.draggableContainer}
               >
                 <View style={[styles.draggableIcon, customStyles.draggableIcon]} />
               </View>
             )}
-            {children}
+            {enabledInnerScrolling ? (
+              <ScrollView
+                contentContainerStyle={{ flexGrow: 1 }}
+                showsVerticalScrollIndicator={false}
+              >
+                {children}
+              </ScrollView>
+            ) : (
+              children
+            )}
           </Animated.View>
         </KeyboardAvoidingView>
       </Modal>
@@ -157,7 +184,10 @@ RBSheet.propTypes = {
   customStyles: PropTypes.objectOf(PropTypes.object),
   onClose: PropTypes.func,
   onOpen: PropTypes.func,
-  children: PropTypes.node
+  renderHeader: PropTypes.func,
+  children: PropTypes.node,
+  enabledInnerScrolling: PropTypes.bool,
+  closeButton: PropTypes.node
 };
 
 RBSheet.defaultProps = {
@@ -174,7 +204,10 @@ RBSheet.defaultProps = {
   customStyles: {},
   onClose: null,
   onOpen: null,
-  children: <View />
+  renderHeader: null,
+  children: <View />,
+  enabledInnerScrolling: false,
+  closeButton: <View />
 };
 
 export default RBSheet;