Skip to content

Commit 2d31536

Browse files
carsonwahcarsonwah
authored
Release v1.1.0 (#4)
- [Critical] Fix transparent full-screen overlay blocking other elements on the screen (#3) - [Critical] Fix auto-dismiss functionality - [Bug] Fix popup dragged far down then cannot drag back up - [Enhancement] Move feedback presentation resposibilities from `Touchable` to `PanResponder`
1 parent 5f1f90a commit 2d31536

File tree

2 files changed

+58
-57
lines changed

2 files changed

+58
-57
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-push-notification-popup",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "React Native Push Notification Popup Component",
55
"main": "src/index.js",
66
"scripts": {

‎src/views/DefaultPopup.js

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,18 @@ export default class DefaultPopup extends Component {
6363
// onPress Feedback
6464
containerScale: new Animated.Value(1), // Directly set a scale
6565

66-
onPress: null,
66+
onPressAndSlideOut: null,
6767
appIconSource: null,
6868
appTitle: null,
6969
timeText: null,
7070
title: null,
7171
body: null,
7272
};
7373
this._panResponder = PanResponder.create({
74-
onMoveShouldSetResponderCapture: () => true,
75-
onMoveShouldSetPanResponderCapture: () => true,
74+
onStartShouldSetPanResponder: (e, gestureState) => true,
75+
// onStartShouldSetPanResponderCapture: (e, gestureState) => false,
76+
onMoveShouldSetPanResponder: (e, gestureState) => true,
77+
// onMoveShouldSetPanResponderCapture: (e, gestureState) => false,
7678
onPanResponderGrant: this._onPanResponderGrant,
7779
onPanResponderMove: this._onPanResponderMove,
7880
onPanResponderRelease: this._onPanResponderRelease,
@@ -81,20 +83,31 @@ export default class DefaultPopup extends Component {
8183

8284
_onPanResponderGrant = (e, gestureState) => {
8385
// console.log('_onPanResponderGrant', gestureState); // DEBUG
86+
this.onPressInFeedback();
8487
}
8588

8689
// https://facebook.github.io/react-native/docs/animations.html#tracking-gestures
8790
_onPanResponderMove = (e, gestureState) => {
8891
// console.log('_onPanResponderMove', gestureState); // DEBUG
8992
const { containerDragOffsetY } = this.state;
9093
// Prevent dragging down too much
91-
if (containerDragOffsetY._value > 50) return; // TODO: customize
92-
containerDragOffsetY.setValue(gestureState.dy);
94+
const newDragOffset = gestureState.dy < 100 ? gestureState.dy : 100; // TODO: customize
95+
containerDragOffsetY.setValue(newDragOffset);
9396
}
9497

9598
_onPanResponderRelease = (e, gestureState) => {
9699
// console.log('_onPanResponderRelease', gestureState); // DEBUG
97-
const { containerDragOffsetY } = this.state;
100+
const { onPressAndSlideOut, containerDragOffsetY } = this.state;
101+
102+
// Present feedback
103+
this.onPressOutFeedback();
104+
105+
// Check if it is onPress
106+
if (gestureState.dx === 0 && gestureState.dy === 0) {
107+
onPressAndSlideOut();
108+
}
109+
110+
// Check if it is leaving the screen
98111
if (containerDragOffsetY._value < -30) { // TODO: turn into constant
99112
// 1. If leaving screen -> slide out
100113
this.slideOutAndDismiss(200);
@@ -112,54 +125,54 @@ export default class DefaultPopup extends Component {
112125
render() {
113126
const {
114127
show, containerSlideOffsetY, containerDragOffsetY, containerScale,
115-
onPress, appIconSource, appTitle, timeText, title, body
128+
onPressAndSlideOut, appIconSource, appTitle, timeText, title, body
116129
} = this.state;
117130

131+
if (!show) {
132+
return null;
133+
}
134+
118135
return (
119-
<View style={styles.fullScreenContainer}>
120-
{
121-
!!show &&
122-
<Animated.View
123-
style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale})}
124-
{...this._panResponder.panHandlers}>
125-
<TouchableWithoutFeedback onPress={onPress} onPressIn={this.onPressInFeedback} onPressOut={this.onPressOutFeedback}>
126-
<View>
127-
<View style={styles.popupHeaderContainer}>
128-
<View style={styles.headerIconContainer}>
129-
<Image style={styles.headerIcon} source={appIconSource || null} />
130-
</View>
131-
<View style={styles.headerTextContainer}>
132-
<Text style={styles.headerText} numberOfLines={1}>{appTitle || ''}</Text>
133-
</View>
134-
<View style={styles.headerTimeContainer}>
135-
<Text style={styles.headerTime} numberOfLines={1}>{timeText || ''}</Text>
136-
</View>
137-
</View>
138-
<View style={styles.contentContainer}>
139-
<View style={styles.contentTitleContainer}>
140-
<Text style={styles.contentTitle}>{title || ''}</Text>
141-
</View>
142-
<View style={styles.contentTextContainer}>
143-
<Text style={styles.contentText}>{body || ''}</Text>
144-
</View>
145-
</View>
136+
<Animated.View
137+
style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale})}
138+
{...this._panResponder.panHandlers}>
139+
<TouchableWithoutFeedback onPress={onPressAndSlideOut}>
140+
<View>
141+
<View style={styles.popupHeaderContainer}>
142+
<View style={styles.headerIconContainer}>
143+
<Image style={styles.headerIcon} source={appIconSource || null} />
146144
</View>
147-
</TouchableWithoutFeedback>
148-
</Animated.View>
149-
}
150-
151-
</View>
145+
<View style={styles.headerTextContainer}>
146+
<Text style={styles.headerText} numberOfLines={1}>{appTitle || ''}</Text>
147+
</View>
148+
<View style={styles.headerTimeContainer}>
149+
<Text style={styles.headerTime} numberOfLines={1}>{timeText || ''}</Text>
150+
</View>
151+
</View>
152+
<View style={styles.contentContainer}>
153+
<View style={styles.contentTitleContainer}>
154+
<Text style={styles.contentTitle}>{title || ''}</Text>
155+
</View>
156+
<View style={styles.contentTextContainer}>
157+
<Text style={styles.contentText}>{body || ''}</Text>
158+
</View>
159+
</View>
160+
</View>
161+
</TouchableWithoutFeedback>
162+
</Animated.View>
152163
);
153164
}
154165

155166
onPressInFeedback = () => {
167+
// console.log('PressIn!'); // DEBUG
156168
// Show feedback as soon as user press down
157169
const { containerScale } = this.state;
158170
Animated.spring(containerScale, { toValue: 0.95, friction: 8 })
159171
.start();
160172
}
161173

162174
onPressOutFeedback = () => {
175+
// console.log('PressOut!'); // DEBUG
163176
// Show feedback as soon as user press down
164177
const { containerScale } = this.state;
165178
Animated.spring(containerScale, { toValue: 1, friction: 8 })
@@ -192,7 +205,7 @@ export default class DefaultPopup extends Component {
192205

193206
countdownToSlideOut = () => {
194207
const slideOutTimer = setTimeout(() => {
195-
// this.slideOutAndDismiss(); // TEMP
208+
this.slideOutAndDismiss();
196209
}, 4000); // TODO: customize
197210
this.setState({ slideOutTimer });
198211
}
@@ -215,39 +228,27 @@ export default class DefaultPopup extends Component {
215228
// Put message configs into state && show popup
216229
const _messageConfig = messageConfig || {};
217230
const { onPress: onPressCallback, appIconSource, appTitle, timeText, title, body } = _messageConfig;
218-
const onPress = this.createOnPressWithCallback(onPressCallback);
231+
const onPressAndSlideOut = this.createOnPressWithCallback(onPressCallback);
219232
this.setState({
220233
show: true,
221234
containerSlideOffsetY: new Animated.Value(0),
222235
slideOutTimer: null,
223236
containerDragOffsetY: new Animated.Value(0),
224237
containerScale: new Animated.Value(1),
225-
onPress, appIconSource, appTitle, timeText, title, body
238+
onPressAndSlideOut, appIconSource, appTitle, timeText, title, body
226239
}, this.slideIn);
227240
}
228241
}
229242

230243
const styles = StyleSheet.create({
231-
fullScreenContainer: {
232-
...StyleSheet.absoluteFillObject,
233-
width: deviceWidth,
234-
height: deviceHeight,
235-
flex: 1,
236-
justifyContent: 'flex-start',
237-
alignItems: 'center',
238-
zIndex: 1000,
239-
},
240-
// fullScreenOverlay: {
241-
// ...StyleSheet.absoluteFillObject,
242-
// backgroundColor: 'grey', // DEBUG
243-
// },
244244
popupContainer: {
245+
position: 'absolute',
245246
minHeight: 86,
246247
width: deviceWidth - (8 * 2),
247248
top: CONTAINER_MARGIN_TOP,
248249
backgroundColor: 'white', // TEMP
249250
borderRadius: 12,
250-
// overflow: 'hidden',
251+
zIndex: 1000,
251252

252253
// === Shadows ===
253254
// Android

0 commit comments

Comments
 (0)