Merge pull request #90 from pubnub/react-native-0.70

fix(lib): inverted MessageList in RN ~0.70 on Android

Author: Salet

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.17.0
+version: v0.18.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2022-12-05
+    version: v0.18.0
+    changes:
+      - type: bug
+        text: "MessageList - problem with inverted list in React Native ~0.70 on Android."
   - date: 2022-11-21
     version: v0.17.0
     changes:

package.json

@@ -58,13 +58,13 @@
     "turbo": "1.5.6"
   },
   "resolutions": {
-    "@types/react": "18.0.20",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "@types/react": "18.0.24",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "overrides": {
-    "@types/react": "18.0.20",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "@types/react": "18.0.24",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {
@@ -17,14 +17,14 @@
     "@types/jest": "29.0.3",
     "@types/lodash": "4.14.186",
     "@types/pubnub": "7.2.0",
-    "@types/react": "18.0.20",
+    "@types/react": "18.0.24",
     "@types/react-dom": "18.0.6",
     "jest": "29.0.3",
     "jest-environment-jsdom": "29.0.3",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "typescript": "4.8.3"
   }
 }

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",
@@ -45,15 +45,15 @@
     "@testing-library/react-native": "11.1.0",
     "@types/jest": "29.0.3",
     "@types/pubnub": "7.2.0",
-    "@types/react": "18.0.20",
+    "@types/react": "18.0.24",
     "@types/react-dom": "18.0.6",
     "babel-jest": "29.2.0",
     "jest": "29.0.3",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.5",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
     "react-test-renderer": "18.2.0",
     "rollup": "2.79.0",
     "rollup-plugin-peer-deps-external": "2.2.4",

packages/react-native/src/helpers.ts

@@ -20,7 +20,7 @@ export const useStyle = <T>(props: UseStyleProps<T>): T => {
   return style;
 };
 
-export const useRotation = (shouldRun = true): Animated.AnimatedInterpolation => {
+export const useRotation = (shouldRun = true): Animated.AnimatedInterpolation<number> => {
   const [rotationValue] = useState(new Animated.Value(0));
   const animation = useMemo(
     () =>

packages/react-native/src/message-list/message-list.tsx

@@ -22,6 +22,10 @@ import {
 import createDefaultStyle, { MessageListStyle } from "./message-list.style";
 import { useStyle, useRotation } from "../helpers";
 import SpinnerIcon from "../icons/spinner.png";
+import ViewReactNativeStyleAttributes from "react-native/Libraries/Components/View/ReactNativeStyleAttributes";
+
+// Workaround for workaround for: https://github.com/facebook/react-native/issues/30034
+ViewReactNativeStyleAttributes.scaleY = true;
 
 export type MessageListProps = CommonMessageListProps & {
   /** Callback run on a list scroll. */

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",
@@ -44,16 +44,16 @@
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.0.3",
     "@types/pubnub": "7.2.0",
-    "@types/react": "18.0.20",
+    "@types/react": "18.0.24",
     "@types/react-dom": "18.0.6",
     "jest": "29.0.3",
     "jest-environment-jsdom": "29.0.3",
     "jest-scss-transform": "1.0.3",
     "postcss": "8.4.16",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "rollup": "2.79.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",

samples/react-native/getting-started/package.json

@@ -9,20 +9,20 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/webpack-config": "0.17.0",
+    "@expo/webpack-config": "^0.17.2",
     "@pubnub/react-native-chat-components": "*",
-    "expo": "46.0.10",
-    "expo-status-bar": "1.4.0",
+    "expo": "^47.0.0",
+    "expo-status-bar": "~1.4.2",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-native": "0.69.5",
-    "react-native-safe-area-context": "4.3.1"
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-safe-area-context": "4.4.1"
   },
   "devDependencies": {
     "@babel/core": "7.19.1",
-    "@types/react": "18.0.20",
-    "@types/react-native": "0.69.3",
+    "@types/react": "18.0.24",
+    "@types/react-native": "~0.70.6",
     "typescript": "4.8.3"
   },
   "private": true

samples/react-native/mobile-chat/package.json

@@ -13,28 +13,28 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@expo/webpack-config": "^0.17.0",
+    "@expo/webpack-config": "^0.17.2",
     "@pubnub/react-native-chat-components": "*",
     "@react-navigation/native": "6.0.12",
     "@react-navigation/native-stack": "6.8.0",
     "dotenv": "16.0.2",
-    "expo": "46.0.10",
-    "expo-constants": "13.2.4",
-    "expo-status-bar": "1.4.0",
+    "expo": "^47.0.0",
+    "expo-constants": "~14.0.2",
+    "expo-status-bar": "~1.4.2",
     "jotai": "1.8.3",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.5",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "3.15.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {
     "@babel/core": "7.19.1",
-    "@types/react": "18.0.20",
-    "@types/react-native": "0.69.3",
+    "@types/react": "18.0.24",
+    "@types/react-native": "~0.70.6",
     "typescript": "4.8.3"
   }
 }

samples/react/getting-started/package.json

@@ -13,12 +13,12 @@
     "@pubnub/react-chat-components": "*",
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "devDependencies": {
     "@types/pubnub": "7.2.0",
-    "@types/react": "18.0.20",
+    "@types/react": "18.0.24",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "2.1.0",
     "typescript": "4.8.3",