Skip to content

Commit 74e128e

Browse files
rodriigovieirarodriigovieira
committed
allowing swipe to close
1 parent dde7ef1 commit 74e128e

File tree

9 files changed

+11913
-41
lines changed

9 files changed

+11913
-41
lines changed

‎example/ios/Podfile.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -296,12 +296,12 @@ PODS:
296296
- React-Core (= 0.63.3)
297297
- React-cxxreact (= 0.63.3)
298298
- React-jsi (= 0.63.3)
299-
- ReactNativeNavigation (7.2.0):
299+
- ReactNativeNavigation (7.3.0):
300300
- React-Core
301301
- React-RCTImage
302302
- React-RCTText
303-
- ReactNativeNavigation/Core (= 7.2.0)
304-
- ReactNativeNavigation/Core (7.2.0):
303+
- ReactNativeNavigation/Core (= 7.3.0)
304+
- ReactNativeNavigation/Core (7.3.0):
305305
- React-Core
306306
- React-RCTImage
307307
- React-RCTText
@@ -467,7 +467,7 @@ SPEC CHECKSUMS:
467467
React-RCTText: 65a6de06a7389098ce24340d1d3556015c38f746
468468
React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454
469469
ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
470-
ReactNativeNavigation: 2f6571c37eaeb7d472fe8a3779d49d7aae32e75a
470+
ReactNativeNavigation: c2dcda2b86e32090c443182206c915107d03106f
471471
Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
472472
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
473473

‎example/package-lock.json‎

Lines changed: 11716 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/pages/HomePage.js‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
TouchableOpacity,
77
View,
88
} from 'react-native';
9-
import {RNNDrawer} from 'react-native-navigation-drawer-extension';
9+
import { RNNDrawer, SideMenuView } from 'react-native-navigation-drawer-extension';
1010

1111
const HomePage = (props) => {
1212
const onPress = () => {
@@ -26,15 +26,29 @@ const HomePage = (props) => {
2626
};
2727

2828
return (
29-
<SafeAreaView>
30-
<View style={styles.mainContainer}>
31-
<Text style={styles.headlineText}>HomePage View</Text>
29+
<SideMenuView
30+
style={{ flex: 1 }}
31+
left={() => RNNDrawer.showDrawer({
32+
component: {
33+
name: 'CustomDrawer',
34+
passProps: {
35+
direction: 'left',
36+
parentComponentId: props.componentId,
37+
},
38+
},
39+
}
40+
)}
41+
>
42+
<SafeAreaView>
43+
<View style={styles.mainContainer}>
44+
<Text style={styles.headlineText}>HomePage View</Text>
3245

33-
<TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
34-
<Text style={styles.buttonText}>Open Drawer</Text>
35-
</TouchableOpacity>
36-
</View>
37-
</SafeAreaView>
46+
<TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
47+
<Text style={styles.buttonText}>Open Drawer</Text>
48+
</TouchableOpacity>
49+
</View>
50+
</SafeAreaView>
51+
</SideMenuView>
3852
);
3953
};
4054

‎lib/RNNDrawer.d.ts‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,58 @@
44
*/
55
import * as React from 'react';
66
import { Layout } from 'react-native-navigation';
7-
8-
type DirectionType = "left" | "right" | "top" | "bottom";
9-
107
declare interface RNNDrawerOptions {
118
/**
129
* Id of parent component of the drawer.
1310
* This field is necessary in order to be able
1411
* to push screens inside the drawer
1512
*/
1613
parentComponentId: string;
17-
14+
/**
15+
* Direction to open the collage,
16+
* one of: ["left", "right", "top", "bottom"]
17+
* If not provided, drawer might have
18+
* a weird effect when closing
19+
*/
20+
direction: DirectionType;
1821
/**
1922
* Time in milliseconds to execute the drawer opening animation
2023
*/
2124
animationOpenTime?: number;
22-
2325
/**
2426
* Time in milliseconds to execute the drawer closing animation
2527
*/
2628
animationCloseTime?: number;
27-
28-
/**
29-
* Direction to open the collage,
30-
* one of: ["left", "right", "top", "bottom"]
31-
*/
32-
direction?: DirectionType;
33-
3429
/**
3530
* Whether the drawer be dismissed when a click is registered outside
3631
*/
3732
dismissWhenTouchOutside?: boolean;
38-
3933
/**
4034
* Opacity of the screen outside the drawer
4135
*/
4236
fadeOpacity?: number;
43-
4437
/**
4538
* Width of drawer in relation to the screen (0 to 1)
4639
*/
4740
drawerScreenWidth?: number;
48-
4941
/**
5042
* Height of drawer in relation to the screen (0 to 1)
5143
*/
5244
drawerScreenHeight?: number;
5345
}
54-
46+
declare enum DirectionType {
47+
left = "left",
48+
right = "right",
49+
bottom = "bottom",
50+
top = "top"
51+
}
5552
declare class RNNDrawer {
5653
/**
57-
* Generates the drawer component to
58-
* be used with react-native-navigation
59-
*
60-
* @param component
61-
*/
54+
* Generates the drawer component to
55+
* be used with react-native-navigation
56+
*
57+
* @param component
58+
*/
6259
static create(Component: React.ComponentType): any;
6360
/**
6461
* Shows a drawer component

‎lib/RNNDrawer.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ var __extends = (this && this.__extends) || (function () {
77
var extendStatics = function (d, b) {
88
extendStatics = Object.setPrototypeOf ||
99
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
10-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
10+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
1111
return extendStatics(d, b);
1212
};
1313
return function (d, b) {
@@ -45,6 +45,12 @@ var DirectionType;
4545
var RNNDrawer = /** @class */ (function () {
4646
function RNNDrawer() {
4747
}
48+
/**
49+
* Generates the drawer component to
50+
* be used with react-native-navigation
51+
*
52+
* @param component
53+
*/
4854
RNNDrawer.create = function (Component) {
4955
var WrappedDrawer = /** @class */ (function (_super) {
5056
__extends(WrappedDrawer, _super);
@@ -59,6 +65,27 @@ var RNNDrawer = /** @class */ (function () {
5965
var _this = _super.call(this, props) || this;
6066
_this.screenWidth = react_native_1.Dimensions.get('window').width;
6167
_this.screenHeight = react_native_1.Dimensions.get('window').height;
68+
_this.panResponder = react_native_1.PanResponder.create({
69+
onStartShouldSetPanResponder: function (_evt, _gestureState) { return false; },
70+
onStartShouldSetPanResponderCapture: function (_evt, _gestureState) { return false; },
71+
onMoveShouldSetPanResponder: function (_evt, _gestureState) { return true; },
72+
onMoveShouldSetPanResponderCapture: function (_evt, _gestureState) { return false; },
73+
onPanResponderGrant: function (_evt, _gestureState) {
74+
events_1.dispatch('SWIPE_START');
75+
},
76+
onPanResponderRelease: function (_evt, gestureState) {
77+
var vx = gestureState.vx;
78+
// Emit this event when the gesture ends
79+
events_1.dispatch('SWIPE_END', vx > 0 ? 'right' : 'left');
80+
},
81+
onPanResponderTerminationRequest: function (_evt, _gestureState) { return false; },
82+
onShouldBlockNativeResponder: function (_evt, _gestureState) { return false; },
83+
onPanResponderMove: function (_evt, _gestureState) {
84+
var moveX = _gestureState.moveX;
85+
var direction = _this.props.direction || 'left';
86+
events_1.dispatch('SWIPE_MOVE', { value: moveX, direction: direction });
87+
},
88+
});
6289
/*
6390
* We need to convert the pushed drawer width
6491
* to a number as it can either be a string ('20%')
@@ -195,6 +222,9 @@ var RNNDrawer = /** @class */ (function () {
195222
var openedPercentage = Math.abs((Math.abs(alignedMovementValue) / _this.drawerWidth) * 100 - 100);
196223
// Calculates the opacity to set of the screen based on the percentage the drawer is open
197224
var normalizedOpacity = Math.min(openedPercentage / 100, fadeOpacity);
225+
console.log({
226+
alignedMovementValue: alignedMovementValue, normalizedOpacity: normalizedOpacity
227+
});
198228
// Does allow the drawer to go further than the maximum width
199229
if (_this.drawerOpenedValues[direction] > alignedMovementValue) {
200230
// Sets the animation values, we use this so we can resume animation from any point
@@ -276,7 +306,7 @@ var RNNDrawer = /** @class */ (function () {
276306
var animatedValue = direction === DirectionType.left || direction === DirectionType.right
277307
? { marginLeft: sideMenuOpenValue }
278308
: { marginTop: sideMenuOpenValue };
279-
return (React.createElement(react_native_1.View, { style: sideMenuContainerStyle },
309+
return (React.createElement(react_native_1.View, __assign({ style: sideMenuContainerStyle }, this.panResponder.panHandlers),
280310
React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.touchedOutside },
281311
React.createElement(react_native_1.Animated.View, { style: [
282312
sideMenuOverlayStyle,

‎lib/SideMenuView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ var __extends = (this && this.__extends) || (function () {
88
var extendStatics = function (d, b) {
99
extendStatics = Object.setPrototypeOf ||
1010
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
11-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
11+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
1212
return extendStatics(d, b);
1313
};
1414
return function (d, b) {

‎lib/events.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* @description Event dispatcher for comunication between components.
55
*/
66
Object.defineProperty(exports, "__esModule", { value: true });
7+
exports.dispatch = exports.listen = void 0;
78
/**
89
* @description events
910
* @private

‎lib/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use strict";
22
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.SideMenuView = exports.RNNDrawer = void 0;
34
var RNNDrawer_1 = require("./RNNDrawer");
4-
exports.RNNDrawer = RNNDrawer_1.default;
5+
Object.defineProperty(exports, "RNNDrawer", { enumerable: true, get: function () { return RNNDrawer_1.default; } });
56
var SideMenuView_1 = require("./SideMenuView");
6-
exports.SideMenuView = SideMenuView_1.default;
7+
Object.defineProperty(exports, "SideMenuView", { enumerable: true, get: function () { return SideMenuView_1.default; } });

0 commit comments

Comments
 (0)