Navigation interface for showing in-app notifications in iOS

Author: artald

example/src/screens/FirstTabScreen.js

@@ -67,6 +67,10 @@ export default class FirstTabScreen extends Component {
           <Text style={styles.button}>Show LightBox</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
+          <Text style={styles.button}>Show In-App Notification</Text>
+        </TouchableOpacity>
+
       </View>
     );
   }
@@ -96,6 +100,11 @@ export default class FirstTabScreen extends Component {
       }
     });
   }
+  onInAppNotificationPress() {
+    this.props.navigator.showInAppNotification({
+      screen: "example.NotificationScreen"
+    });
+  }
 }
 
 const styles = StyleSheet.create({

example/src/screens/NotificationScreen.js

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Dimensions
+} from 'react-native';
+
+export default class NotificationScreen extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          This is a Notification!
+        </Text>
+        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
+          <Text style={styles.button}>Dismiss</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+  onDismissPress() {
+    this.props.navigator.dismissInAppNotification();
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: Dimensions.get('window').width,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#d6e7ad'
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+    paddingTop: 20
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: '#4692ad'
+  }
+});

example/src/screens/index.android.js

@@ -7,6 +7,7 @@ import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import ModalScreen from './ModalScreen';
 import LightBoxScreen from './LightBoxScreen';
+import NotificationScreen from './NotificationScreen'
 import SideMenu from './SideMenu';
 
 // register all screens of the app (including internal ones)

example/src/screens/index.ios.js

@@ -7,6 +7,7 @@ import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import ModalScreen from './ModalScreen';
 import LightBoxScreen from './LightBoxScreen';
+import NotificationScreen from './NotificationScreen'
 import SideMenu from './SideMenu';
 
 // register all screens of the app (including internal ones)
@@ -18,5 +19,6 @@ export function registerScreens() {
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
   Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
+  Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
 }

package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "https://github.com/wix/react-native-navigation.git"
   },
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "nativePackage": true,
   "bugs": {

src/Navigation.js

@@ -83,6 +83,14 @@ function dismissLightBox(params = {}) {
   return platformSpecific.dismissLightBox(params);
 }
 
+function showInAppNotification(params = {}) {
+  return platformSpecific.showInAppNotification(params);
+}
+
+function dismissInAppNotification(params = {}) {
+  return platformSpecific.dismissInAppNotification(params);
+}
+
 export default {
   registerScreen,
   getRegisteredScreen,
@@ -92,6 +100,8 @@ export default {
   dismissAllModals,
   showLightBox,
   dismissLightBox,
+  showInAppNotification,
+  dismissInAppNotification,
   startTabBasedApp: platformSpecific.startTabBasedApp,
   startSingleScreenApp: platformSpecific.startSingleScreenApp
 }

src/Screen.js

@@ -53,6 +53,14 @@ class Navigator {
     return Navigation.dismissLightBox(params);
   }
 
+  showInAppNotification(params = {}) {
+    return Navigation.showInAppNotification(params);
+  }
+
+  dismissInAppNotification(params = {}) {
+    return Navigation.dismissInAppNotification(params);
+  }
+
   setButtons(params = {}) {
     return platformSpecific.navigatorSetButtons(this, this.navigatorEventID, params);
   }

src/platformSpecific.ios.js

@@ -1,6 +1,6 @@
 import utils from './utils';
 import Navigation from './Navigation';
-import Controllers, { Modal } from 'react-native-controllers';
+import Controllers, { Modal, Notification } from 'react-native-controllers';
 const React = Controllers.hijackReact();
 const {
   ControllerRegistry,
@@ -404,6 +404,41 @@ function dismissLightBox(params) {
   Modal.dismissLightBox();
 }
 
+function showInAppNotification(params) {
+  if (!params.screen) {
+    console.error('showInAppNotification(params): params.screen is required');
+    return;
+  }
+
+  const controllerID = utils.getRandomId();
+  const navigatorID = controllerID + '_nav';
+  const screenInstanceID = utils.getRandomId();
+  const {
+    navigatorStyle,
+    navigatorButtons,
+    navigatorEventID
+  } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
+  const passProps = Object.assign({}, params.passProps);
+  passProps.navigatorID = navigatorID;
+  passProps.screenInstanceID = screenInstanceID;
+  passProps.navigatorEventID = navigatorEventID;
+
+  Notification.show({
+    component: params.screen,
+    passProps: passProps,
+    style: params.style,
+    animation: params.animation || Notification.AnimationPresets.default,
+    position: params.position,
+    shadowRadius: params.shadowRadius,
+    dismissWithSwipe: params.dismissWithSwipe || true,
+    autoDismissTimerSec: params.autoDismissTimerSec || 5
+  });
+}
+
+function dismissInAppNotification(params) {
+  Notification.dismiss(params);
+}
+
 export default {
   startTabBasedApp,
   startSingleScreenApp,
@@ -416,6 +451,8 @@ export default {
   dismissAllModals,
   showLightBox,
   dismissLightBox,
+  showInAppNotification,
+  dismissInAppNotification,
   navigatorSetButtons,
   navigatorSetTitle,
   navigatorSetTitleImage,