infobip-mobile-messaging-react-native-plugin 7.0.1 → 7.0.2

package/README.md

@@ -22,7 +22,7 @@ For iOS project:
 For Android project:
 - Android Studio (Bumblebee | 2021.1.1)
 - Gradle (v7.3.3)
-- Supported API Levels: 21 (Android 5.0 - [Lollipop](https://developer.android.com/about/versions/lollipop)) - 31 (Android 12.0)
+- Supported API Levels: 21 (Android 5.0 - [Lollipop](https://developer.android.com/about/versions/lollipop)) - 33 (Android 13.0)
 
 ## Quick start guide
 
@@ -96,6 +96,10 @@ This guide is designed to get you up and running with Mobile Messaging SDK plugi
        > </manifest>
        > ```
 
+     > ### Notice (when targeting Android 13):
+     >  Starting from Android 13, Google requires to ask user for notification permission. Follow [this guide](https://github.com/infobip/mobile-messaging-react-native-plugin/wiki/Android-13-Notification-Permission-Handling) to make a permission request.
+       
+
 ## Initialization configuration
 
 Initialize Mobile Messaging React Native plugin, provide application configuration in init method:

package/android/src/main/java/org/infobip/reactlibrary/mobilemessaging/RNMMChatViewManager.java

@@ -8,17 +8,15 @@ import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
-import java.util.Map;
-
 class RNMMChatViewManager extends ViewGroupManager<ReactChatView> {
+    public static final String COMMAND_ADD = "add";
+    public static final String COMMAND_REMOVE = "remove";
+
     public static final String VIEW_GROUP_MANAGER_NAME = "RNMMChatView";
-    public static final int COMMAND_ADD = 1;
-    public static final int COMMAND_REMOVE = 2;
     private ReactApplicationContext context;
 
     @Nullable
@@ -41,26 +39,17 @@ class RNMMChatViewManager extends ViewGroupManager<ReactChatView> {
         return chatView;
     }
 
-    @Nullable
-    @Override
-    public Map<String, Integer> getCommandsMap() {
-        return MapBuilder.of(
-                "add", COMMAND_ADD,
-                "remove", COMMAND_REMOVE
-        );
-    }
-
     @Override
     public void receiveCommand(@NonNull ReactChatView root, String commandId, @Nullable ReadableArray args) {
         super.receiveCommand(root, commandId, args);
-        int commandIdInt = Integer.parseInt(commandId);
+
         if (args == null) {
             Log.e(Utils.TAG, "RNMMChatViewManager received command without argumnents, Id: " + commandId);
             return;
         }
         int reactNativeViewId = args.getInt(0);
 
-        switch (commandIdInt) {
+        switch (commandId) {
             case COMMAND_ADD:
                 addChatFragment(root, reactNativeViewId);
                 break;

package/infobip-mobile-messaging-react-native-plugin.podspec

@@ -19,8 +19,8 @@ Pod::Spec.new do |s|
   s.requires_arc = true
 
   s.dependency "React-Core"
-  s.dependency "MobileMessaging/Core", "10.5.3"
-  s.dependency "MobileMessaging/Geofencing", "10.5.3"
-  s.dependency "MobileMessaging/InAppChat", "10.5.3"
+  s.dependency "MobileMessaging/Core", "10.7.0"
+  s.dependency "MobileMessaging/Geofencing", "10.7.0"
+  s.dependency "MobileMessaging/InAppChat", "10.7.0"
 
 end

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "infobip-mobile-messaging-react-native-plugin",
   "title": "Infobip Mobile Messaging React Native Plugin",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Infobip Mobile Messaging React Native Plugin",
-  "main": "index.js",
+  "main": "./src/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/src/components/RNMMChatViewNativeComponent.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React, { FC, useLayoutEffect, useRef } from "react";
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import {findNodeHandle, requireNativeComponent} from 'react-native'
+
+interface RNMMChatViewProps {
+    sendButtonColor: ?string
+}
+
+const RNMMChatViewCommands = codegenNativeCommands({
+    supportedCommands: ["add", "remove"],
+});
+
+export const ChatView: FC<RNMMChatViewProps> = props => {
+    const ref = useRef(null);
+
+    useLayoutEffect(() => {
+        // Not needed for iOS.
+        if (Platform.OS === "ios") return;
+
+        const chatViewRef = ref.current
+        // Nothing to do if there is no chatView reference.
+        if (!chatViewRef) return;
+
+        let addedViewId: ?number = null
+
+        // Fix for android, sometimes it can't get parent view, which is needed
+        // for proper relayout.
+        setTimeout(() => {
+            const viewId = findNodeHandle(chatViewRef);
+            if (viewId !== null && viewId !== undefined) {
+                RNMMChatViewCommands.add(chatViewRef, viewId);
+                console.log(`Adding android viewId: ${viewId}.`);
+                addedViewId = viewId;
+            }
+        }, 100);
+
+        return () => {
+            const viewId = addedViewId
+            if (viewId !== null && viewId !== undefined) {
+                console.log(`Removing android viewId: ${viewId}.`);
+                RNMMChatViewCommands.remove(chatViewRef, viewId);
+            }
+        };
+    }, []);
+
+    return <RNMMChatView {...props} ref={ref} />;
+};
+
+ChatView.propTypes = {
+    /**
+     * Send button color can be set in hex format.
+     * If it's not provided, color from Infobip Portal widget configuration will be set.
+     */
+    sendButtonColor: PropTypes.string,
+};
+
+export const RNMMChatView = requireNativeComponent('RNMMChatView', ChatView);

package/{index.js → src/index.js}

@@ -1,19 +1,13 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import {
+import {    
+    EmitterSubscription,
     NativeEventEmitter,
     NativeModules,
+    Permission,
     PermissionsAndroid,
-    Platform,
-    requireNativeComponent,
-    Text,
-    View,
-    findNodeHandle,
-    UIManager,
-    EmitterSubscription,
+    Platform,    
 } from 'react-native';
-import type {Rationale} from "react-native/Libraries/PermissionsAndroid/PermissionsAndroid";
-import {Permission} from "react-native";
+import type {Rationale} from 'react-native/Libraries/PermissionsAndroid/PermissionsAndroid';
+
 
 const { ReactNativeMobileMessaging, RNMMChat } = NativeModules;
 
@@ -248,7 +242,7 @@ class MobileMessaging {
             });
         }
 
-        config.reactNativePluginVersion = require('./package').version;
+        config.reactNativePluginVersion = require('../package').version;
 
         ReactNativeMobileMessaging.init(config, onSuccess, onError);
     };
@@ -437,21 +431,21 @@ class MobileMessaging {
         }
 
         return {
-            find: function (messageId, onSuccess, onError = function() {} ) {
+            find (messageId, onSuccess, onError = function() {}) {
                 ReactNativeMobileMessaging.defaultMessageStorage_find(messageId, onSuccess, onError);
             },
 
-            findAll: function (onSuccess, onError = function() {}) {
+            findAll (onSuccess, onError = function() {}) {
                 ReactNativeMobileMessaging.defaultMessageStorage_findAll(onSuccess, onError);
             },
 
-            delete: function (messageId, onSuccess = function() {}, onError = function() {}) {
+            delete (messageId, onSuccess = function() {}, onError = function() {}) {
                 ReactNativeMobileMessaging.defaultMessageStorage_delete(messageId, onSuccess, onError);
             },
 
-            deleteAll: function (onSuccess = function() {}, onError = function() {}) {
+            deleteAll (onSuccess = function() {}, onError = function() {}) {
                 ReactNativeMobileMessaging.defaultMessageStorage_deleteAll(onSuccess, onError);
-            }
+            },
         };
     };
 
@@ -459,7 +453,7 @@ class MobileMessaging {
      * Displays built-in error dialog so that user can resolve errors during SDK initialization.
      *
      * @name showDialogForError
-     * @param {Int} errorCode to display dialog for
+     * @param {Number} errorCode to display dialog for
      * @param {Function} onSuccess will be called upon completion
      * @param {Function} onError will be called on error
      */
@@ -653,67 +647,6 @@ class MobileMessaging {
 
 }
 
-export class ChatView extends React.Component {
-    androidViewId;
-
-    componentDidMount() {
-        if (Platform.OS === "ios") {
-            this.add();
-        } else {
-            //fix for android, sometimes it can't get parent view, which is needed for properly relayout
-            let _this = this;
-            setTimeout(function() { _this.add(); }, 100);
-        }
-    }
-
-    componentWillUnmount() {
-        this.remove();
-    }
-
-    add = () => {
-        //not needed for iOS
-        if (Platform.OS === "ios") {
-            return;
-        }
-        this.androidViewId = findNodeHandle(this.refs.rnmmChatViewRef);
-        console.log('Native android viewId: ', this.androidViewId);
-
-        UIManager.dispatchViewManagerCommand(
-            this.androidViewId,
-            UIManager.RNMMChatView.Commands.add.toString(),
-            [this.androidViewId],
-        );
-    };
-
-    remove = () => {
-        //not needed for iOS
-        if (Platform.OS === "ios") {
-            return;
-        }
-        UIManager.dispatchViewManagerCommand(
-            this.androidViewId,
-            UIManager.RNMMChatView.Commands.remove.toString(),
-            [this.androidViewId],
-        );
-    };
-
-    render() {
-        return (
-            <RNMMChatView {...this.props}
-                          ref="rnmmChatViewRef"
-            />
-        );
-    }
-}
-
-ChatView.propTypes = {
-    /**
-     * Send button color can be set in hex format.
-     * If it's not provided, color from Infobip Portal widget configuration will be set.
-     */
-    sendButtonColor: PropTypes.string,
-}
-
-export let RNMMChatView = requireNativeComponent('RNMMChatView', ChatView);
+export {ChatView, RNMMChatView} from './components/RNMMChatViewNativeComponent';
 
-export let mobileMessaging = new MobileMessaging();
+export const mobileMessaging = new MobileMessaging();