From a5b3ba8a29942577a733b22adabc379327c990ce Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Mon, 2 Nov 2020 16:09:27 +0200 Subject: [PATCH 1/9] add snapTo method to animate height --- __tests__/RBSheet.test.js | 6 ++++++ src/index.js | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/__tests__/RBSheet.test.js b/__tests__/RBSheet.test.js index 68d001a..f85131c 100644 --- a/__tests__/RBSheet.test.js +++ b/__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); + }); }); }); diff --git a/src/index.js b/src/index.js index 0b3eab0..f554a72 100644 --- a/src/index.js +++ b/src/index.js @@ -87,6 +87,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, From d50825b9b76035eafd4a36283cb4ab5fd749204c Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Mon, 2 Nov 2020 16:54:27 +0200 Subject: [PATCH 2/9] update readme, update declaration of module --- README.md | 1 + index.d.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 9ebd459..e23c583 100644 --- a/README.md +++ b/README.md @@ -157,6 +157,7 @@ customStyles: { | ----------- | ------------------ | | open | Open Bottom Sheet | | close | Close Bottom Sheet | +| snapTo | Animate Height | ## Note diff --git a/index.d.ts b/index.d.ts index 31a5259..b012d33 100644 --- a/index.d.ts +++ b/index.d.ts @@ -25,5 +25,6 @@ declare module "react-native-raw-bottom-sheet" { export default class RBSheet extends Component { open(): void; close(): void; + snapTo(): void; } } From 24f917649a2b26004f5ddd21d9cbf5ca4fdfe8e2 Mon Sep 17 00:00:00 2001 From: Vitalik Lavrenko Date: Tue, 3 Nov 2020 21:14:56 +0200 Subject: [PATCH 3/9] add renderHeader func --- README.md | 1 + index.d.ts | 1 + src/index.js | 10 +++++++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e23c583..9e15b41 100644 --- a/README.md +++ b/README.md @@ -140,6 +140,7 @@ 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 | ### Available Custom Style diff --git a/index.d.ts b/index.d.ts index b012d33..4a3b9c5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -14,6 +14,7 @@ declare module "react-native-raw-bottom-sheet" { closeOnPressBack?: boolean; onClose?: () => void; onOpen?: () => void; + renderHeader?: () => React.ReactNode; customStyles?: { wrapper?: StyleProp; container?: StyleProp; diff --git a/src/index.js b/src/index.js index f554a72..d99305a 100644 --- a/src/index.js +++ b/src/index.js @@ -106,7 +106,8 @@ class RBSheet extends Component { closeOnPressBack, children, customStyles, - keyboardAvoidingViewEnabled + keyboardAvoidingViewEnabled, + renderHeader } = this.props; const { animatedHeight, pan, modalVisible } = this.state; const panStyle = { @@ -133,6 +134,11 @@ class RBSheet extends Component { activeOpacity={1} onPress={() => (closeOnPressMask ? this.close() : null)} /> + {renderHeader && ( + + {renderHeader()} + + )} }; From b71979a6c4d7c487fa38a1a99fe7cc063886fb1f Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Fri, 13 Nov 2020 23:48:14 +0200 Subject: [PATCH 4/9] move logic to call of onOpen method --- src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index f554a72..2a9e423 100644 --- a/src/index.js +++ b/src/index.js @@ -36,12 +36,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, From c9ac284b989a1694516349bedb44fbc8bd62fa01 Mon Sep 17 00:00:00 2001 From: Vitalik Lavrenko Date: Wed, 18 Nov 2020 10:43:25 +0200 Subject: [PATCH 5/9] add enabledInnerScrolling support --- README.md | 1 + index.d.ts | 1 + src/index.js | 18 +++++++++++------- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 9e15b41..29976af 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,7 @@ renderItem = (item, index) => ( | 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 diff --git a/index.d.ts b/index.d.ts index 4a3b9c5..b82622f 100644 --- a/index.d.ts +++ b/index.d.ts @@ -21,6 +21,7 @@ declare module "react-native-raw-bottom-sheet" { draggableIcon?: StyleProp; }; keyboardAvoidingViewEnabled?: boolean; + enabledInnerScrolling?: boolean; }; export default class RBSheet extends Component { diff --git a/src/index.js b/src/index.js index 139ffef..1aa1061 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,8 @@ import { TouchableOpacity, Animated, PanResponder, - Platform + Platform, + ScrollView } from "react-native"; import styles from "./style"; @@ -108,7 +109,8 @@ class RBSheet extends Component { children, customStyles, keyboardAvoidingViewEnabled, - renderHeader + renderHeader, + enabledInnerScrolling } = this.props; const { animatedHeight, pan, modalVisible } = this.state; const panStyle = { @@ -141,18 +143,18 @@ class RBSheet extends Component { )} {closeOnDragDown && ( )} - {children} + {enabledInnerScrolling ? {children} : children} @@ -175,7 +177,8 @@ RBSheet.propTypes = { onClose: PropTypes.func, onOpen: PropTypes.func, renderHeader: PropTypes.func, - children: PropTypes.node + children: PropTypes.node, + enabledInnerScrolling: PropTypes.bool }; RBSheet.defaultProps = { @@ -193,7 +196,8 @@ RBSheet.defaultProps = { onClose: null, onOpen: null, renderHeader: null, - children: + children: , + enabledInnerScrolling: false }; export default RBSheet; From b3b65709d9db754a97541d175acd1743d444c058 Mon Sep 17 00:00:00 2001 From: Vitalik Lavrenko Date: Tue, 24 Nov 2020 10:41:02 +0200 Subject: [PATCH 6/9] add some prop for ScrollView --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 1aa1061..4d8cc6c 100644 --- a/src/index.js +++ b/src/index.js @@ -154,7 +154,7 @@ class RBSheet extends Component { )} - {enabledInnerScrolling ? {children} : children} + {enabledInnerScrolling ? {children} : children} From 41910a8e15ecf45a2f87c0055d1284c2580c6abe Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Tue, 12 Jan 2021 12:08:30 +0200 Subject: [PATCH 7/9] add closeButton props to render close icon --- src/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 2a9e423..634b774 100644 --- a/src/index.js +++ b/src/index.js @@ -107,7 +107,8 @@ class RBSheet extends Component { closeOnPressBack, children, customStyles, - keyboardAvoidingViewEnabled + keyboardAvoidingViewEnabled, + closeButton } = this.props; const { animatedHeight, pan, modalVisible } = this.state; const panStyle = { @@ -129,6 +130,7 @@ class RBSheet extends Component { behavior="padding" style={[styles.wrapper, customStyles.wrapper]} > + {closeButton} + children: , + closeButton: }; export default RBSheet; From 0cad40c26dfaf184ad2538519dbbbf0ec9c1bf01 Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Wed, 27 Jan 2021 17:28:06 +0200 Subject: [PATCH 8/9] code styles fixes --- src/index.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 5aaaf1e..6ec9cc7 100644 --- a/src/index.js +++ b/src/index.js @@ -139,24 +139,30 @@ class RBSheet extends Component { activeOpacity={1} onPress={() => (closeOnPressMask ? this.close() : null)} /> - {renderHeader && ( - - {renderHeader()} - - )} + {renderHeader && {renderHeader()}} {closeOnDragDown && ( )} - {enabledInnerScrolling ? {children} : children} + {enabledInnerScrolling ? ( + + {children} + + ) : ( + children + )} From 1e5615d870b8fc804909c65e29c608d8d61dabf2 Mon Sep 17 00:00:00 2001 From: Yarmolenko Date: Wed, 27 Jan 2021 17:42:34 +0200 Subject: [PATCH 9/9] update version to 2.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 023b9fa..6efc926 100644 --- a/package.json +++ b/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",