Merge pull request #127 from pubnub/CSK-316-remove-android-hack

fix(lib): remove inverted flatlist fix for android

Author: Salet

.github/workflows/run-tests.yml

@@ -17,7 +17,7 @@ defaults:
 jobs:
   tests:
     name: Run builtin test cases
-    runs-on: ubuntu-latest
+    runs-on: macos-13
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.31.0
+version: v0.32.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-10-05
+    version: v0.32.0
+    changes:
+      - type: bug
+        text: "ReactNative - remove the workaround for poor performance of inverted FlatList in Android ."
   - date: 2023-10-04
     version: v0.31.0
     changes:

load-tests/react-native/package.json

@@ -15,7 +15,7 @@
     "expo-status-bar": "~1.4.2",
     "react": "18.2.0",
     "@pubnub/tomato": "1.7.0",
-    "react-native": "0.71.6",
+    "react-native": "0.72.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0"
   },

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.31.0",
+  "version": "0.32.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/commonjs/index",
@@ -59,7 +59,7 @@
     "pubnub-react": "3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.72.4",
     "react-test-renderer": "18.2.0",
     "rollup": "2.79.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
@@ -70,7 +70,7 @@
     "pubnub": ">=4.29.9",
     "pubnub-react": ">=2.1.0",
     "react": ">=16.8.0",
-    "react-native": ">=0.69.0"
+    "react-native": ">=0.72.4"
   },
   "dependencies": {
     "expo-document-picker": "11.2.2",

packages/react-native/src/message-list/android-hack-workaround.native.ts

@@ -15,7 +15,6 @@ import {
   ListRenderItem,
   NativeScrollEvent,
   NativeSyntheticEvent,
-  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -36,9 +35,6 @@ import { EmojiPickerElementProps } from "../types";
 import { useStyle, useRotation } from "../helpers";
 import SpinnerIcon from "../icons/spinner.png";
 import { RemoteFile } from "./remote-file";
-import { doAndroidHackWorkaround } from "./android-hack-workaround";
-
-doAndroidHackWorkaround();
 
 export type MessageListProps = CommonMessageListProps & {
   /** Option to pass in a component that will be used for picking message reactions. For more details, refer to the Message Reactions section in the docs. */
@@ -92,7 +88,6 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
   const [spinnerShown, setSpinnerShown] = useState(false);
   const [sheetPosition] = useState(new Animated.Value(0));
   const shouldShownSpinner = props.fetchMessages && !paginationEnd;
-  const isAndroid = Platform.OS === "android";
 
   const rotate = useRotation(shouldShownSpinner && spinnerShown);
   const listRef = useRef<FlatList>(null);
@@ -178,8 +173,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
   const renderItem: ListRenderItem<MessageEnvelope> = ({ item }) => {
     const envelope = item;
     if (envelope.timetoken === "spinner-element") return renderSpinner();
-    if (envelope.timetoken === "children-element")
-      return <View style={isAndroid && { scaleY: -1 }}>{props.children}</View>;
+    if (envelope.timetoken === "children-element") return <View>{props.children}</View>;
     const uuid = envelope.uuid || envelope.publisher || "";
     const actions = envelope.actions;
     const deleted = !!Object.keys(actions?.deleted || {}).length;
@@ -193,7 +187,6 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
           style.message,
           props.enableReactions && pressed && style.messagePressed,
           isOwn && style.messageOwn,
-          isAndroid && { scaleY: -1 },
         ]}
         onLongPress={() => handleOpenReactions(envelope.timetoken)}
       >
@@ -315,7 +308,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
       )}
       <FlatList
         testID="message-list"
-        style={[style.messageList, isAndroid && { scaleY: -1 }]}
+        style={style.messageList}
         contentContainerStyle={style.messageListScroller}
         data={[
           { timetoken: "children-element", message: { id: "children-element" } },
@@ -327,8 +320,7 @@ export const MessageList: FC<MessageListProps> = (props: MessageListProps) => {
         ref={listRef}
         onEndReached={() => fetchHistory()}
         onScroll={handleScroll}
-        // Workaround for: https://github.com/facebook/react-native/issues/30034
-        inverted={!isAndroid}
+        inverted={true}
         onViewableItemsChanged={onViewableItemsChanged}
       />
       {props.reactionsPicker &&

packages/react-native/src/message-list/android-hack-workaround.ts

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.31.0",
+  "version": "0.32.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",

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

@@ -16,7 +16,7 @@
     "pubnub": "7.2.0",
     "pubnub-react": "3.0.1",
     "react": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.72.4",
     "react-native-safe-area-context": "4.5.0"
   },
   "devDependencies": {

packages/react/package.json

@@ -26,7 +26,7 @@
     "pubnub-react": "3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.72.4",
     "react-native-emoji-selector": "^0.2.0",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",