react-native-raw-bottom-sheet - npm Package Compare versions

Comparing version 2.0.6 to 2.1.0

index.d.ts

@@ -14,2 +14,3 @@ import { Component } from "react";
     onClose?: () => void;
+    onOpen?: () => void;
     customStyles?: {
@@ -20,2 +21,3 @@ wrapper?: StyleProp<ViewStyle>;
     };
+    keyboardAvoidingViewEnabled?: boolean;
   };
@@ -22,0 +24,0 @@

package.json

 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -37,17 +37,14 @@ # react-native-raw-bottom-sheet
 
+#### Class component
+
 ```jsx
 import React, { Component } from "react";
-import { View, Text, Button } from "react-native";
+import { View, Button } from "react-native";
 import RBSheet from "react-native-raw-bottom-sheet";
 
-class Example extends Component {
+export default class Example extends Component {
   render() {
     return (
       <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Button
-          title="OPEN BOTTOM SHEET"
-          onPress={() => {
-            this.RBSheet.open();
-          }}
-        />
+        <Button title="OPEN BOTTOM SHEET" onPress={() => this.RBSheet.open()} />
         <RBSheet
@@ -72,9 +69,44 @@ ref={ref => {
 }
+```
 
-const YourOwnComponent = () => <Text>Your Pretty Component Goes Here</Text>;
+#### Functional component
 
-export default Example;
+```jsx
+import React, { useRef } from "react";
+import { View, Button } from "react-native";
+import RBSheet from "react-native-raw-bottom-sheet";
+
+export default function Example() {
+  const refRBSheet = useRef();
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#000"
+      }}
+    >
+      <Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} />
+      <RBSheet
+        ref={refRBSheet}
+        closeOnDragDown={true}
+        closeOnPressMask={false}
+        customStyles={{
+          wrapper: {
+            backgroundColor: "transparent"
+          },
+          draggableIcon: {
+            backgroundColor: "#000"
+          }
+        }}
+      >
+        <YourOwnComponent />
+      </RBSheet>
+    </View>
+  );
+}
 ```
 
-### Dynamic Bottom Sheet
+#### Dynamic Bottom Sheet
 
@@ -108,3 +140,5 @@ ```jsx
 | onClose          | function | Callback function when Bottom Sheet has closed          | null     |
+| onOpen           | function | Callback function when Bottom Sheet has opened          | null     |
 | customStyles     | object   | Custom style to Bottom Sheet                            | {}       |
+| keyboardAvoidingViewEnabled     | boolean   | Enable KeyboardAvoidingView                            | true (ios)       |
 
@@ -130,10 +164,5 @@ ### Available Custom Style
 
-- Always set `ref` to `RBSheet` and call each method by using `this.RBSheet.methodName()` like example above.
 - If you combind `RBSheet` with <a href="https://github.com/kmagiera/react-native-gesture-handler" target="_blank">react-native-gesture-handler</a>, the components inside RBSheet will not fire onPress event on Android [#37](https://github.com/nysamnang/react-native-raw-bottom-sheet/issues/37).
 - The demo source codes are in `example folder`.
 
-## Give me a Star
-
-If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D
-
 ## License
@@ -140,0 +169,0 @@

src/index.js

@@ -34,7 +34,8 @@ import React, { Component } from "react";
 
-  setModalVisible(visible) {
-    const { height, minClosingHeight, duration, onClose } = this.props;
+  setModalVisible(visible, props) {
+    const { height, minClosingHeight, duration, onClose, onOpen } = this.props;
     const { animatedHeight, pan } = this.state;
     if (visible) {
       this.setState({ modalVisible: visible });
+      if (typeof onOpen === "function") onOpen(props);
       Animated.timing(animatedHeight, {
@@ -55,3 +56,3 @@ toValue: height,
 
-        if (typeof onClose === "function") onClose();
+        if (typeof onClose === "function") onClose(props);
       });
@@ -81,8 +82,8 @@ }
 
-  open() {
-    this.setModalVisible(true);
+  open(props) {
+    this.setModalVisible(true, props);
   }
 
-  close() {
-    this.setModalVisible(false);
+  close(props) {
+    this.setModalVisible(false, props);
   }
@@ -97,3 +98,4 @@
       children,
-      customStyles
+      customStyles,
+      keyboardAvoidingViewEnabled
     } = this.props;
@@ -116,3 +118,3 @@ const { animatedHeight, pan, modalVisible } = this.state;
         <KeyboardAvoidingView
-          enabled={Platform.OS === "ios"}
+          enabled={keyboardAvoidingViewEnabled}
           behavior="padding"
@@ -151,4 +153,6 @@ style={[styles.wrapper, customStyles.wrapper]}
   closeOnPressBack: PropTypes.bool,
+  keyboardAvoidingViewEnabled: PropTypes.bool,
   customStyles: PropTypes.objectOf(PropTypes.object),
   onClose: PropTypes.func,
+  onOpen: PropTypes.func,
   children: PropTypes.node
@@ -165,4 +169,6 @@ };
   closeOnPressBack: true,
+  keyboardAvoidingViewEnabled: Platform.OS === "ios",
   customStyles: {},
   onClose: null,
+  onOpen: null,
   children: <View />
@@ -169,0 +175,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20098

increased by5.63%

Lines of code

347

increased by2.36%

Number of lines in readme file

171

increased by20.42%

No dependency changes