react-native-in-app-popup-notification

Purpose

This React Native library allows you to create a small popup notification on top of the screen that is overlayed above all other views. Works with both iOS and Android.

Install

$ npm install react-native-in-app-popup-notification --save

Usage

Inside a component:

	...
	render() {
		return(
			<View style={styles.container}>
				...
				<InAppPopupNotification {...this.popupProps} ref={(popup) => this.popup = popup}/>
			</View>
		);
	}

	// Called somewhere, you choose where
	showPopup = () => {
		if (this.refs.popup) {
			this.refs.popup.displayPopup({
				title: 'Oh?',
				message: 'A wild popup appeared!',
			});
		}
	};

	popupProps = {
		// see below for provided props
		...
	};
	...

Make sure the InAppPopupNotification is the last component in your parent view.

Props

Note that none of these props are required.

|Prop Name | Type | Description | Default| |------ | ----- | ----- | ----- | |title | String | The popup view's title. | 'Congratulations!'| |message | String | The popup view's message. | 'You got Notified!'| |iconPath | String | An icon present within your hybrid app's resource. See [here]https://facebook.github.io/react-native/docs/images#images-from-hybrid-app-s-resources) for more information. | null| |backgroundColor | String | The content's background color. | '#FFF'| |titleColor | String | The title's text color. | '#000'| |titleFont | String | The title's font. | 'system font'| |messageColor | String | The message's text color. | '#000'| |messageFont | String | The message's font. | 'system font'| |opacity | number | A value, 0-1 (inclusive), that controls the popup's opacity. | 1| |height | number | The popup's height. | getStatusBarHeight(false) + 100| |inOutDuration | number | The duration of the popup's appear and disappear animations, in ms. | 500| |showDuration | number | How long the popup is showed to the user, in ms. | 5000| |popupWasClicked | function | Executes when the popup registers a user tap. | () => { }| |popupDidAppear | function | Executes when the popup appears on the screen and after its in animation. | () => { }| |popupDidDisappear | function | Executes when the popup is no longer displayed on the screen. | () => { }| |popupWillAppear | function | Executes when the popup recieves the command to appear on the screen, before the inward animation. | () => { }| |popupWillDisappear | function | Executes when the popup recieves the command to leave the screen, after the outward animation. | () => { } | |useNativeDriver | boolean | Whether or not to use the native driver for animations. See here for details. | false|

Available methods

There are three methods you can use to to control when your popup displays.

displayPopup(parameters) takes in a map with message and title key-value pairs. It displays the notification. Example:

	...
	popup.displayPopup({
		title: 'A reference of some sort',
		message: '===To be continued==>',
	});
	...

Note that only one popup can be displayed at a time. Repeated calls are ignored, and a warning is triggered within the console.

dismissPopup(callback) takes in a callback function. If the popup is currently visible, it dismisses it immediately and then executes the callback when the popup has completed its outward animation. If the popup is not visible, it returns a warning. Example:

	...
	popup.dismissPopup(() => {
		Alert.alert('Popup is rip in kill, press F to pay resepcts');
	});
	...

isVisible() simply returns whether or not the popup is visible. Example:

	...
	if (this.popup.isVisible()) {
		this.popup.dismissPopup();
	}
	...

Libraries

This project used the following libraries. Go check them out! react-native-status-bar-height react-native-timer

License

Licensed under the MIT license. See the License file for more information.