Fix/qa 2nd (#30)

* skip: renamed newMessagesFromNext to newMessagesFromMembers

* skip: remove appVersion from props

* skip: edit script

* fix(android): flipper path

* fix(foundation): dynamic import fast-image

* fix(uikit): reconnect binding

* skip

* fix(utils): remove react-native dependency

* feat: added dynamic module concept code

* feat: added netinfo

* fix: ios media save when file doesn't have extension

* docs: update README

* fix: [QM-1683] disabled on pending message

* skip

* docs(README): update badge

* chore: remove lerna allowBranch

* docs: update badge color on README

* docs: update opensource guidelines.

* chore: update sendbird sdk

Author: bang9

OPENSOURCE_GUIDELINES.md

@@ -0,0 +1,11 @@
+# Sendbird UIKit Open Source Guidelines
+​
+Sendbird is excited to share UIKit to the open source community in order to speed up the go-to-market strategy for our customers. We’ve already seen how UIKit enables you to go to market with ease, but now we want to provide you with the flexibility to fine tune UIKit for your own market needs.
+​
+This community guideline outlines Sendbird’s stance on open source and explains how you can take advantage of UIKit’s open source.
+​
+*   We recommend you to use UIKit open source only if the standard UIKit SDK does not suit your use case. This includes if you’d like to use a Sendbird Chat SDK feature that is currently unavailable in UIKit.
+*   We will provide limited support should you choose to use our open source code and fork it (clone and edit the code in your own repository) because we won’t be able to transparently understand the code.
+*   We don’t accept direct contributions to the source code. If you discover a bug or would like to suggest improvements to the source code, you can share them in the [Sendbird Community UIKit forum](https://community.sendbird.com/c/sendbird-chat-uikit/)).
+    ​
+    _UIKit is licensed under the MIT open source license_

README.md

@@ -1,30 +1,106 @@
 # sendbird-uikit-react-native
 
-uikit
+[![Platform React-Native](https://img.shields.io/badge/Platform-React--Native-orange.svg)](https://reactnative.dev/)
+[![Language TypeScript](https://img.shields.io/badge/Language-TypeScript-orange.svg)](https://www.typescriptlang.org/)
 
-[![Status_Build](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-build.yml/badge.svg)](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-build.yml)
-[![Status_Test](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-test.yml/badge.svg)](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-test.yml)
+## Requirements
 
----
+- Nodejs 14 or newer
+- Watchman
+- JDK 11 or newer
+- XCode
+- Android Studio
+
+More details, please see https://reactnative.dev/docs/environment-setup
+
+<br/>
+
+## Development
+
+We tried development on macOS / Linux systems. You might encounter problems in running sample or scripts like `yarn build` in Windows machines. We are using sample app for development, you can check the sample app [here](/sample) and also check the UI components via storybook in the sample app.
+
+### Run sample app
+
+```shell
+yarn install
+npx pod-install
+
+yarn sample:android
+yarn sample:ios
+```
+
+### Creating a new key function files
+
+Run the script and enter the key function name as a lower camel case like `groupChannel`, and then you can see the auto generated files in the `/packages/uikit-react-native/src/domain`
+
+```shell
+yarn workspace @sendbird/uikit-react-native run create-domain
+```
+
+### Managing repository
+
+> **Note**
+> We are using [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces) and [lerna](https://github.com/lerna/lerna) to maintain this monorepo
+
+#### Package dependencies
+
+See [yarn workspace](https://classic.yarnpkg.com/en/docs/cli/workspace)
+
+```shell
+# Add dependency to specific workspace package
+yarn workspace @sendbird/package add package-name
+# Remove dependency from specific workspace package
+yarn workspace @sendbird/package remove package-name
+
+# Add dependency to root
+yarn workspace -W add package-name
+```
+
+> **Warning** You should better install to root if you're trying to install native view modules.
+> Sometimes native view module in the workspace is not hoisted, and it leads to `Tried to register two views` error on the sample app.
+
+#### Bump version
+
+See [lerna version](https://github.com/lerna/lerna/tree/main/commands/version)
+
+```shell
+lerna version {major|minor|patch} [--no-git-tag-version] [--no-private]
+
+# or
+
+yarn bump:{major|minor|patch}
+```
+
+#### Publish
+
+See [lerna publish](https://github.com/lerna/lerna/tree/main/commands/publish)
+
+<br/>
 
 ## Scripts
 
-### Lint & Prettier
+### Build
 
-- check: `yarn lint`
-- fix: `yarn fix`
+```shell
+yarn build
+```
 
 ### Test
 
-- test: `yarn test`
+```shell
+# Unit test
+yarn test
 
-### Package dependencies
+# Build test
+yarn test:build
+```
 
-- add: `yarn workspace @sendbird/package add some-package`
-- remove: `yarn workspace @sendbird/package remove some-package`
+### Lint and Prettier
 
-### Publish
-> Bump > Build > Deploy 
+```shell
+# Check formatting
+yarn lint
 
-- bump script: `lerna version {major|minor|patch} [--no-git-tag-version] [--no-private]` or `yarn bump:{major|minor|patch}`
-- build script: `yarn build`
+# Fix formatting
+yarn fix
+```

lerna.json

@@ -8,16 +8,11 @@
   "version": "0.1.2",
   "command": {
     "publish": {
-      "allowBranch": "main",
       "conventionalCommits": true,
       "createRelease": "github",
       "message": "chore(release): publish %v"
     },
     "version": {
-      "allowBranch": [
-        "main",
-        "*/lerna"
-      ],
       "conventionalCommits": true,
       "exact": true,
       "gitRemote": "origin",

package.json

@@ -20,7 +20,7 @@
     "postinstall": "patch-package",
     "prepare": "lerna run --stream --sort prepare",
     "reset": "find . -type dir -name node_modules | xargs rm -rf",
-    "clean": "rm -rf docs && lerna run clean",
+    "clean": "lerna run clean",
     "build": "lerna run build",
     "docs": "yarn build && typedoc --out docs --entryPointStrategy packages 'packages/*' && yarn clean",
     "test": "jest --verbose",
@@ -58,6 +58,7 @@
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.2",
+    "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
     "react-test-renderer": "^17.0.2",
     "typedoc": "^0.23.7",

packages/uikit-chat-hooks/README.md

@@ -5,5 +5,5 @@ React custom hooks with Sendbird Chat SDK v3, made for UIKit
 ## Installation
 
 ```sh
-npm install @sendbird/uikit-chat-hooks
+npm i @sendbird/uikit-chat-hooks
 ```

packages/uikit-chat-hooks/package.json

@@ -47,7 +47,7 @@
   },
   "peerDependencies": {
     "react": ">=16.13.1",
-    "sendbird": "^3.1.21"
+    "sendbird": "^3.1.22"
   },
   "react-native-builder-bob": {
     "source": "src",

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/reducer.ts

@@ -1,12 +1,12 @@
-import { useMemo, useReducer } from 'react';
+import { useReducer } from 'react';
 
 import type {
   SendbirdBaseMessage,
   SendbirdFileMessage,
   SendbirdMessage,
   SendbirdUserMessage,
 } from '@sendbird/uikit-utils';
-import { arrayToMapWithGetter, getMessageUniqId, isMyMessage, isNewMessage } from '@sendbird/uikit-utils';
+import { arrayToMapWithGetter, getMessageUniqId, isMyMessage, isNewMessage, useIIFE } from '@sendbird/uikit-utils';
 
 import type { UseGroupChannelMessagesOptions } from '../../types';
 
@@ -110,12 +110,12 @@ export const useGroupChannelMessagesReducer = (
     dispatch({ type: 'update_refreshing', value: { status } });
   };
 
-  const messages = useMemo(() => {
+  const messages = useIIFE(() => {
     if (sortComparator) return Object.values(messageMap).sort(sortComparator);
     return Object.values(messageMap);
-  }, [sortComparator, messageMap]);
-  const nextMessages = useMemo(() => Object.values(nextMessageMap), [nextMessageMap]);
-  const newMessagesFromNext = useMemo(() => nextMessages.filter((msg) => isNewMessage(msg, userId)), [nextMessages]);
+  });
+  const nextMessages = Object.values(nextMessageMap);
+  const newMessagesFromMembers = nextMessages.filter((msg) => isNewMessage(msg, userId));
 
   return {
     updateLoading,
@@ -129,6 +129,6 @@ export const useGroupChannelMessagesReducer = (
     refreshing,
     messages,
     nextMessages,
-    newMessagesFromNext,
+    newMessagesFromMembers,
   };
 };

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -49,7 +49,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     refreshing,
     messages,
     nextMessages,
-    newMessagesFromNext,
+    newMessagesFromMembers,
     updateMessages,
     updateNextMessages,
     deleteNextMessages,
@@ -301,7 +301,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     refresh,
     messages,
     nextMessages,
-    newMessagesFromNext,
+    newMessagesFromMembers,
     next,
     prev,
     sendUserMessage,

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -36,7 +36,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     refreshing,
     messages,
     nextMessages,
-    newMessagesFromNext,
+    newMessagesFromMembers,
     updateMessages,
     updateNextMessages,
     deleteNextMessages,
@@ -237,7 +237,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     refresh,
     messages,
     nextMessages,
-    newMessagesFromNext,
+    newMessagesFromMembers,
     next,
     prev,
     sendUserMessage,

packages/uikit-chat-hooks/src/types.ts

@@ -127,7 +127,7 @@ export interface UseGroupChannelMessages {
      * - Not updated message
      * - Not current user's message
      * */
-    newMessagesFromNext: SendbirdMessage[];
+    newMessagesFromMembers: SendbirdMessage[];
 
     /**
      * Fetch next messages to state

packages/uikit-react-native-foundation/README.md

@@ -5,11 +5,11 @@ Sendbird UIKit foundation library for React-Native
 ## Installation
 
 ```sh
-npm install @sendbird/uikit-react-native-foundation react-native-safe-area-context
+npm i @sendbird/uikit-react-native-foundation react-native-safe-area-context
 ```
 
-(Optional) if you want use react-native-fast-image
+(Optional) If you want use [`react-native-fast-image`](https://github.com/DylanVann/react-native-fast-image) instead of default Image component
 
 ```sh
-npm install react-native-fast-image
+npm i react-native-fast-image
 ```

packages/uikit-react-native-foundation/package.json

@@ -52,6 +52,7 @@
   "peerDependencies": {
     "react": ">=16.13.1",
     "react-native": ">=0.63.3",
+    "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2"
   },
   "peerDependenciesMeta": {

packages/uikit-react-native-foundation/src/components/Image/Image.fastimage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import FastImage, { FastImageProps, ResizeMode, Source } from 'react-native-fast-image';
+import _FastImage, { FastImageProps, ResizeMode, Source } from 'react-native-fast-image';
 
 import type { SendbirdImageComponent, SendbirdImageProps } from './index';
 
@@ -45,6 +45,9 @@ function convertResizeMode(mode?: SendbirdImageProps['resizeMode']): ResizeMode
       return undefined;
   }
 }
+
+const FastImage = _FastImage as (props: FastImageProps) => JSX.Element;
+
 const Image_FastImage: SendbirdImageComponent = ({ source, resizeMode, onLoad, onError, style, ...props }) => {
   return (
     <FastImage

packages/uikit-react-native-foundation/src/components/Image/Image.reactnative.tsx

@@ -3,10 +3,11 @@ import { Image } from 'react-native';
 
 import type { SendbirdImageComponent } from './index';
 
-const Image_ReactNative: SendbirdImageComponent = ({ onLoad, onError, ...props }) => {
+const Image_ReactNative: SendbirdImageComponent = ({ onLoad, onError, style, tintColor, ...props }) => {
   return (
     <Image
       {...props}
+      style={[style, { tintColor }]}
       onError={onError && ((e) => onError(e.nativeEvent))}
       onLoad={onLoad && ((e) => onLoad(e.nativeEvent.source))}
     />

packages/uikit-react-native-foundation/src/components/Image/index.ts

@@ -5,14 +5,20 @@ import { NativeModules } from 'react-native';
 export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'onError'> {
   onLoad?: (event: { width: number; height: number }) => void;
   onError?: (event: { error?: unknown }) => void;
+  tintColor?: string;
 }
 
 export type SendbirdImageComponent = React.FC<SendbirdImageProps>;
 
 function getImageModule(): SendbirdImageComponent {
-  const hasFastImage = Boolean(NativeModules.FastImageView) && Boolean(require('react-native-fast-image'));
+  const hasFastImage = Boolean(NativeModules.FastImageView);
   if (hasFastImage) {
-    return require('./Image.fastimage').default;
+    try {
+      require('react-native-fast-image');
+      return require('./Image.fastimage').default;
+    } catch (e) {
+      return require('./Image.reactnative').default;
+    }
   } else {
     return require('./Image.reactnative').default;
   }