diff --git a/README.md b/README.md index 077582b73e..15b6270c3c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native) [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions) [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative) -![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-466%20KB-blue) +![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-459%20KB-blue) diff --git a/examples/ExpoMessaging/yarn.lock b/examples/ExpoMessaging/yarn.lock index 08f8124803..ee39931b0d 100644 --- a/examples/ExpoMessaging/yarn.lock +++ b/examples/ExpoMessaging/yarn.lock @@ -7403,10 +7403,10 @@ stream-buffers@2.2.x, stream-buffers@~2.2.0: version "0.0.0" uid "" -stream-chat-react-native-core@7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3" - integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA== +stream-chat-react-native-core@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.0.tgz#b5002ec967467a2ac4be54700e5e4e60bbd5fd97" + integrity sha512-Rfecu6kH2zBW0ufhVz076NlpOg6QxNgShGnK4js/ypjSZ4rGZIKMFHNuArLVr/uSuTWiVPNO1zMI/LyvljtwdQ== dependencies: "@gorhom/bottom-sheet" "^5.1.1" dayjs "1.10.5" @@ -7419,17 +7419,17 @@ stream-chat-react-native-core@7.0.0: path "0.12.7" react-native-markdown-package "1.8.2" react-native-url-polyfill "^1.3.0" - stream-chat "^9.0.0" + stream-chat "^9.2.0" use-sync-external-store "^1.4.0" "stream-chat-react-native-core@link:../../package": version "0.0.0" uid "" -stream-chat@^9.0.0: - version "9.1.1" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.1.1.tgz#c81ffa84a7ca579d9812065bc159010191b59090" - integrity sha512-7Y23aIVQMppNZgRj/rTFwIx9pszxgDcS99idkSXJSgdV8C7FlyDtiF1yQSdP0oiNFAt7OUP/xSqmbJTljrm24Q== +stream-chat@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" + integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" @@ -7441,10 +7441,10 @@ stream-chat@^9.0.0: linkifyjs "^4.2.0" ws "^8.18.1" -stream-chat@^9.2.0: - version "9.2.0" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" - integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== +stream-chat@^9.3.0: + version "9.3.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.3.0.tgz#35ca4db9e841eb92d07413ae156de0500ad77b23" + integrity sha512-S73B3HrvmQvJjq58Zjo50vh74juhsWsVRpT+OBjGAxSGxlA+ITkZ3vKs8Y/r2eDK7mBTMmX5QCruFaDJH5dRuw== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock index a054cfd1b8..84f9b26279 100644 --- a/examples/SampleApp/ios/Podfile.lock +++ b/examples/SampleApp/ios/Podfile.lock @@ -2234,7 +2234,7 @@ PODS: - libwebp (~> 1.0) - SDWebImage/Core (~> 5.10) - SocketRocket (0.7.1) - - stream-chat-react-native (7.0.0): + - stream-chat-react-native (7.1.0): - DoubleConversion - glog - hermes-engine @@ -2662,9 +2662,9 @@ SPEC CHECKSUMS: SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 - stream-chat-react-native: ba870d69df921790816046ea3cdf32fbd5973a73 + stream-chat-react-native: b6555353e3f8726478abdf8614d9303cf8d8de42 Yoga: be02ca501b03c79d7027a6bbbd0a8db985034f11 PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d -COCOAPODS: 1.16.2 +COCOAPODS: 1.14.3 diff --git a/examples/SampleApp/yarn.lock b/examples/SampleApp/yarn.lock index 33d8f8a708..cfa6e4d7a6 100644 --- a/examples/SampleApp/yarn.lock +++ b/examples/SampleApp/yarn.lock @@ -7540,10 +7540,10 @@ statuses@~1.5.0: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== -stream-chat-react-native-core@7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3" - integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA== +stream-chat-react-native-core@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.0.tgz#b5002ec967467a2ac4be54700e5e4e60bbd5fd97" + integrity sha512-Rfecu6kH2zBW0ufhVz076NlpOg6QxNgShGnK4js/ypjSZ4rGZIKMFHNuArLVr/uSuTWiVPNO1zMI/LyvljtwdQ== dependencies: "@gorhom/bottom-sheet" "^5.1.1" dayjs "1.10.5" @@ -7556,7 +7556,7 @@ stream-chat-react-native-core@7.0.0: path "0.12.7" react-native-markdown-package "1.8.2" react-native-url-polyfill "^1.3.0" - stream-chat "^9.0.0" + stream-chat "^9.2.0" use-sync-external-store "^1.4.0" "stream-chat-react-native-core@link:../../package": @@ -7567,10 +7567,10 @@ stream-chat-react-native-core@7.0.0: version "0.0.0" uid "" -stream-chat@^9.0.0: - version "9.0.1" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.1.tgz#5c556f7212811b0216db745478e2c7dd8b72162a" - integrity sha512-v5jPrvFeZ+mT1r+4Xbw6o/rYe36BYoMVKEscBR12zj+edXS3sw1xgbrbxOfNPPSNKQF6euXya/TmzxC5whisgQ== +stream-chat@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" + integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" @@ -7582,10 +7582,10 @@ stream-chat@^9.0.0: linkifyjs "^4.2.0" ws "^8.18.1" -stream-chat@^9.2.0: - version "9.2.0" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" - integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== +stream-chat@^9.3.0: + version "9.3.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.3.0.tgz#35ca4db9e841eb92d07413ae156de0500ad77b23" + integrity sha512-S73B3HrvmQvJjq58Zjo50vh74juhsWsVRpT+OBjGAxSGxlA+ITkZ3vKs8Y/r2eDK7mBTMmX5QCruFaDJH5dRuw== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" diff --git a/examples/TypeScriptMessaging/yarn.lock b/examples/TypeScriptMessaging/yarn.lock index 74b4ebdc7c..7f0f19dac8 100644 --- a/examples/TypeScriptMessaging/yarn.lock +++ b/examples/TypeScriptMessaging/yarn.lock @@ -6926,10 +6926,10 @@ statuses@~1.5.0: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== -stream-chat-react-native-core@7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3" - integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA== +stream-chat-react-native-core@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.0.tgz#b5002ec967467a2ac4be54700e5e4e60bbd5fd97" + integrity sha512-Rfecu6kH2zBW0ufhVz076NlpOg6QxNgShGnK4js/ypjSZ4rGZIKMFHNuArLVr/uSuTWiVPNO1zMI/LyvljtwdQ== dependencies: "@gorhom/bottom-sheet" "^5.1.1" dayjs "1.10.5" @@ -6942,7 +6942,7 @@ stream-chat-react-native-core@7.0.0: path "0.12.7" react-native-markdown-package "1.8.2" react-native-url-polyfill "^1.3.0" - stream-chat "^9.0.0" + stream-chat "^9.2.0" use-sync-external-store "^1.4.0" "stream-chat-react-native-core@link:../../package": @@ -6953,10 +6953,10 @@ stream-chat-react-native-core@7.0.0: version "0.0.0" uid "" -stream-chat@^9.0.0: - version "9.1.1" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.1.1.tgz#c81ffa84a7ca579d9812065bc159010191b59090" - integrity sha512-7Y23aIVQMppNZgRj/rTFwIx9pszxgDcS99idkSXJSgdV8C7FlyDtiF1yQSdP0oiNFAt7OUP/xSqmbJTljrm24Q== +stream-chat@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" + integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" @@ -6968,10 +6968,10 @@ stream-chat@^9.0.0: linkifyjs "^4.2.0" ws "^8.18.1" -stream-chat@^9.2.0: - version "9.2.0" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" - integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== +stream-chat@^9.3.0: + version "9.3.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.3.0.tgz#35ca4db9e841eb92d07413ae156de0500ad77b23" + integrity sha512-S73B3HrvmQvJjq58Zjo50vh74juhsWsVRpT+OBjGAxSGxlA+ITkZ3vKs8Y/r2eDK7mBTMmX5QCruFaDJH5dRuw== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" diff --git a/package/expo-package/yarn.lock b/package/expo-package/yarn.lock index 64bb96e3c9..f63eafd5f9 100644 --- a/package/expo-package/yarn.lock +++ b/package/expo-package/yarn.lock @@ -4778,10 +4778,10 @@ stream-buffers@2.2.x, stream-buffers@~2.2.0: resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4" integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg== -stream-chat-react-native-core@7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.1.tgz#212ebcc1c53c727226f35a3f6268fb931c9c1d4f" - integrity sha512-cS6m7rPuXQ/ALzUzRAaafRUN+kMHVMmwPzUC7SoBm+lljOLX0TuwMCxK5hcLo1CPCmqXhw/8inZuVevhPEdVqA== +stream-chat-react-native-core@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.0.tgz#b5002ec967467a2ac4be54700e5e4e60bbd5fd97" + integrity sha512-Rfecu6kH2zBW0ufhVz076NlpOg6QxNgShGnK4js/ypjSZ4rGZIKMFHNuArLVr/uSuTWiVPNO1zMI/LyvljtwdQ== dependencies: "@gorhom/bottom-sheet" "^5.1.1" dayjs "1.10.5" @@ -4794,13 +4794,13 @@ stream-chat-react-native-core@7.0.1: path "0.12.7" react-native-markdown-package "1.8.2" react-native-url-polyfill "^1.3.0" - stream-chat "^9.0.0" + stream-chat "^9.2.0" use-sync-external-store "^1.4.0" -stream-chat@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.0.tgz#cb22dcb8b7f070c623a13b6b75b212d560534d6c" - integrity sha512-I4+/DEp7dP3WBgRmqHaLswL+Y2fyQkUWJhYBS5zx4bpu1cYM6WEir9HYjToDNuJjltqa/FFIEF/tMPWr7iTc0A== +stream-chat@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" + integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" diff --git a/package/native-package/yarn.lock b/package/native-package/yarn.lock index a81022324c..49c17e75ed 100644 --- a/package/native-package/yarn.lock +++ b/package/native-package/yarn.lock @@ -3450,10 +3450,10 @@ statuses@~1.5.0: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== -stream-chat-react-native-core@7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.1.tgz#212ebcc1c53c727226f35a3f6268fb931c9c1d4f" - integrity sha512-cS6m7rPuXQ/ALzUzRAaafRUN+kMHVMmwPzUC7SoBm+lljOLX0TuwMCxK5hcLo1CPCmqXhw/8inZuVevhPEdVqA== +stream-chat-react-native-core@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.0.tgz#b5002ec967467a2ac4be54700e5e4e60bbd5fd97" + integrity sha512-Rfecu6kH2zBW0ufhVz076NlpOg6QxNgShGnK4js/ypjSZ4rGZIKMFHNuArLVr/uSuTWiVPNO1zMI/LyvljtwdQ== dependencies: "@gorhom/bottom-sheet" "^5.1.1" dayjs "1.10.5" @@ -3466,13 +3466,13 @@ stream-chat-react-native-core@7.0.1: path "0.12.7" react-native-markdown-package "1.8.2" react-native-url-polyfill "^1.3.0" - stream-chat "^9.0.0" + stream-chat "^9.2.0" use-sync-external-store "^1.4.0" -stream-chat@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.0.tgz#cb22dcb8b7f070c623a13b6b75b212d560534d6c" - integrity sha512-I4+/DEp7dP3WBgRmqHaLswL+Y2fyQkUWJhYBS5zx4bpu1cYM6WEir9HYjToDNuJjltqa/FFIEF/tMPWr7iTc0A== +stream-chat@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.2.0.tgz#f3109891ca27f17b6fd0aa6ebcf66be12df1f88c" + integrity sha512-inz3CA5tuqqSrla7qjRTCKs+coRKOYROWf0wEWYgbCu0tAUuiBTRtu1PJL1isEXIaPLiWi00BuRrBEIFon9Kng== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" diff --git a/package/package.json b/package/package.json index 57bbe4df15..f640cbf34b 100644 --- a/package/package.json +++ b/package/package.json @@ -77,7 +77,7 @@ "path": "0.12.7", "react-native-markdown-package": "1.8.2", "react-native-url-polyfill": "^1.3.0", - "stream-chat": "^9.2.0", + "stream-chat": "^9.3.0", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { diff --git a/package/src/__tests__/offline-support/offline-feature.js b/package/src/__tests__/offline-support/offline-feature.js index 5bc46f9ca6..39da50ad11 100644 --- a/package/src/__tests__/offline-support/offline-feature.js +++ b/package/src/__tests__/offline-support/offline-feature.js @@ -520,11 +520,9 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); - await waitFor(async () => { - act(() => dispatchConnectionChangedEvent(chatClient)); - await act( - async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true), - ); + act(() => dispatchConnectionChangedEvent(chatClient)); + await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await waitFor(() => { expect(screen.getByTestId('channel-list')).toBeTruthy(); }); diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx index cbb6b8f1a7..36f0a7ca81 100644 --- a/package/src/components/Chat/Chat.tsx +++ b/package/src/components/Chat/Chat.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, useEffect, useState } from 'react'; +import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'; import { Image, Platform } from 'react-native'; import { Channel, OfflineDBState } from 'stream-chat'; @@ -11,8 +11,7 @@ import { useMutedUsers } from './hooks/useMutedUsers'; import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext'; import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext'; import { useDebugContext } from '../../contexts/debugContext/DebugContext'; -import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext'; -import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext'; +import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext'; import type { Theme } from '../../contexts/themeContext/utils/theme'; import { DEFAULT_USER_LANGUAGE, @@ -156,6 +155,11 @@ const ChatWithContext = (props: PropsWithChildren) => { // Setup translators const translators = useStreami18n(i18nInstance); + const translationContextValue = useMemo( + () => ({ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }), + [client.user?.language, translators], + ); + /** * Setup connection event listeners */ @@ -262,9 +266,7 @@ const ChatWithContext = (props: PropsWithChildren) => { return ( - + {children} @@ -286,7 +288,7 @@ const ChatWithContext = (props: PropsWithChildren) => { * - setActiveChannel - function to set the currently active channel */ export const Chat = (props: PropsWithChildren) => { - const { style } = useOverlayContext(); + const { theme } = useTheme(); - return ; + return } {...props} />; }; diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx index f9e5945203..ed88b39a59 100644 --- a/package/src/components/ImageGallery/ImageGallery.tsx +++ b/package/src/components/ImageGallery/ImageGallery.tsx @@ -1,4 +1,4 @@ -import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react'; +import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; @@ -125,7 +125,6 @@ export const ImageGallery = (props: Props) => { numberOfImageGalleryGridColumns, overlayOpacity, } = props; - const [imageGalleryAttachments, setImageGalleryAttachments] = useState([]); const { resizableCDNHosts } = useChatConfigContext(); const { theme: { @@ -188,13 +187,6 @@ export const ImageGallery = (props: Props) => { */ const [currentImageHeight, setCurrentImageHeight] = useState(fullWindowHeight); - /** - * JS and UI index values, the JS follows the UI but is needed - * for rendering the virtualized image list - */ - const [selectedIndex, setSelectedIndex] = useState(0); - const index = useSharedValue(0); - /** * Header visible value for animating in out */ @@ -214,57 +206,86 @@ export const ImageGallery = (props: Props) => { * photo attachments */ - const photos = messages.reduce((acc: Photo[], cur) => { - const attachmentImages = - cur.attachments - ?.filter( - (attachment) => - (attachment.type === FileTypes.Giphy && - (attachment.giphy?.[giphyVersion]?.url || - attachment.thumb_url || - attachment.image_url)) || - (attachment.type === FileTypes.Image && - !attachment.title_link && - !attachment.og_scrape_url && - getUrlOfImageAttachment(attachment)) || - (isVideoPlayerAvailable() && attachment.type === FileTypes.Video), - ) - .reverse() || []; - - const attachmentPhotos = attachmentImages.map((a) => { - const imageUrl = getUrlOfImageAttachment(a) as string; - const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url; - const isInitiallyPaused = !autoPlayVideo; - - return { - channelId: cur.cid, - created_at: cur.created_at, - duration: 0, - id: `photoId-${cur.id}-${imageUrl}`, - messageId: cur.id, - mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type, - original_height: a.original_height, - original_width: a.original_width, - paused: isInitiallyPaused, - progress: 0, - thumb_url: a.thumb_url, - type: a.type, - uri: - a.type === 'giphy' - ? giphyURL - : getResizedImageUrl({ - height: fullWindowHeight, - resizableCDNHosts, - url: imageUrl, - width: fullWindowWidth, - }), - user: cur.user, - user_id: cur.user_id, - }; - }); + const photos = useMemo( + () => + messages.reduce((acc: Photo[], cur) => { + const attachmentImages = + cur.attachments + ?.filter( + (attachment) => + (attachment.type === FileTypes.Giphy && + (attachment.giphy?.[giphyVersion]?.url || + attachment.thumb_url || + attachment.image_url)) || + (attachment.type === FileTypes.Image && + !attachment.title_link && + !attachment.og_scrape_url && + getUrlOfImageAttachment(attachment)) || + (isVideoPlayerAvailable() && attachment.type === FileTypes.Video), + ) + .reverse() || []; + + const attachmentPhotos = attachmentImages.map((a) => { + const imageUrl = getUrlOfImageAttachment(a) as string; + const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url; + const isInitiallyPaused = !autoPlayVideo; + + return { + channelId: cur.cid, + created_at: cur.created_at, + duration: 0, + id: `photoId-${cur.id}-${imageUrl}`, + messageId: cur.id, + mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type, + original_height: a.original_height, + original_width: a.original_width, + paused: isInitiallyPaused, + progress: 0, + thumb_url: a.thumb_url, + type: a.type, + uri: + a.type === 'giphy' + ? giphyURL + : getResizedImageUrl({ + height: fullWindowHeight, + resizableCDNHosts, + url: imageUrl, + width: fullWindowWidth, + }), + user: cur.user, + user_id: cur.user_id, + }; + }); - return [...attachmentPhotos, ...acc] as Photo[]; - }, []); + return [...attachmentPhotos, ...acc] as Photo[]; + }, []), + [autoPlayVideo, fullWindowHeight, fullWindowWidth, giphyVersion, messages, resizableCDNHosts], + ); + + /** + * The URL for the images may differ because of dimensions passed as + * part of the query. + */ + const stripQueryFromUrl = (url: string) => url.split('?')[0]; + + const photoSelectedIndex = useMemo(() => { + const idx = photos.findIndex( + (photo) => + photo.messageId === selectedMessage?.messageId && + stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''), + ); + + return idx === -1 ? 0 : idx; + }, [photos, selectedMessage]); + + /** + * JS and UI index values, the JS follows the UI but is needed + * for rendering the virtualized image list + */ + const [selectedIndex, setSelectedIndex] = useState(photoSelectedIndex); + const index = useSharedValue(photoSelectedIndex); + + const [imageGalleryAttachments, setImageGalleryAttachments] = useState(photos); /** * Photos length needs to be kept as a const here so if the length @@ -274,17 +295,6 @@ export const ImageGallery = (props: Props) => { */ const photoLength = photos.length; - useEffect(() => { - setImageGalleryAttachments(photos); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - /** - * The URL for the images may differ because of dimensions passed as - * part of the query. - */ - const stripQueryFromUrl = (url: string) => url.split('?')[0]; - /** * Set selected photo when changed via pressing in the message list */ @@ -306,8 +316,7 @@ export const ImageGallery = (props: Props) => { ); runOnUI(updatePosition)(newIndex); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedMessage, photoLength]); + }, [selectedMessage, photos, index, translationX, fullWindowWidth]); /** * Image heights are not provided and therefore need to be calculated. @@ -318,22 +327,24 @@ export const ImageGallery = (props: Props) => { const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri; useEffect(() => { - setCurrentImageHeight(fullWindowHeight); + let currentImageHeight = fullWindowHeight; const photo = imageGalleryAttachments[index.value]; const height = photo?.original_height; const width = photo?.original_width; if (height && width) { const imageHeight = Math.floor(height * (fullWindowWidth / width)); - setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight); + currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight; } else if (photo?.uri) { if (photo.type === FileTypes.Image) { Image.getSize(photo.uri, (width, height) => { const imageHeight = Math.floor(height * (fullWindowWidth / width)); - setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight); + currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight; }); } } + + setCurrentImageHeight(currentImageHeight); // eslint-disable-next-line react-hooks/exhaustive-deps }, [uriForCurrentImage]); diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx b/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx index 898de782fc..8ff504e4cb 100644 --- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx +++ b/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx @@ -60,10 +60,19 @@ export const ReactionListBottomItem = (props: ReactionListBottomItemProps) => { const scaleValue = useRef(new Animated.Value(1)).current; const { theme: { - colors: { black, grey_gainsboro, light_blue }, + colors: { black }, messageSimple: { reactionListBottom: { - item: { container, countText, icon, iconFillColor, iconSize, iconUnFillColor }, + item: { + container, + countText, + filledBackgroundColor, + icon, + iconFillColor, + iconSize, + iconUnFillColor, + unfilledBackgroundColor, + }, }, }, }, @@ -134,7 +143,7 @@ export const ReactionListBottomItem = (props: ReactionListBottomItemProps) => { style={[ styles.itemContainer, { - backgroundColor: reaction.own ? light_blue : grey_gainsboro, + backgroundColor: reaction.own ? filledBackgroundColor : unfilledBackgroundColor, transform: [{ scale: scaleValue }], }, container, diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx index a5fa2a9883..c60167033e 100644 --- a/package/src/components/MessageList/MessageList.tsx +++ b/package/src/components/MessageList/MessageList.tsx @@ -38,10 +38,6 @@ import { MessagesContextValue, useMessagesContext, } from '../../contexts/messagesContext/MessagesContext'; -import { - OverlayContextValue, - useOverlayContext, -} from '../../contexts/overlayContext/OverlayContext'; import { PaginatedMessageListContextValue, usePaginatedMessageListContext, @@ -149,7 +145,6 @@ type MessageListPropsWithContext = Pick< Pick & Pick & Pick & - Pick & Pick< MessagesContextValue, | 'DateHeader' @@ -278,7 +273,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => { noGroupByUser, onListScroll, onThreadSelect, - overlay, reloadChannel, ScrollToBottomButton, selectedPicker, @@ -1253,7 +1247,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => { onViewableItemsChanged={stableOnViewableItemsChanged} ref={refCallback} renderItem={renderItem} - scrollEnabled={overlay === 'none'} showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround} style={flatListStyle} testID='message-flat-list' @@ -1330,7 +1323,6 @@ export const MessageList = (props: MessageListProps) => { UnreadMessagesNotification, } = useMessagesContext(); const { loadMore, loadMoreRecent } = usePaginatedMessageListContext(); - const { overlay } = useOverlayContext(); const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext(); return ( @@ -1365,7 +1357,6 @@ export const MessageList = (props: MessageListProps) => { MessageSystem, myMessageTheme, NetworkDownIndicator, - overlay, reloadChannel, ScrollToBottomButton, scrollToFirstUnreadThreshold, diff --git a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx index 7dff4e45e0..eb7f23fda8 100644 --- a/package/src/components/MessageMenu/MessageUserReactionsItem.tsx +++ b/package/src/components/MessageMenu/MessageUserReactionsItem.tsx @@ -32,7 +32,7 @@ export const MessageUserReactionsItem = ({ const { id, name, type } = reaction; const { theme: { - colors: { accent_blue, black, grey, grey_gainsboro, white }, + colors: { black, grey_gainsboro, white }, messageMenu: { userReactions: { avatarContainer, @@ -40,9 +40,13 @@ export const MessageUserReactionsItem = ({ avatarName, avatarNameContainer, avatarSize, + filledBackgroundColor, + iconFilledColor, + iconUnFilledColor, radius, reactionBubbleBackground, reactionBubbleBorderRadius, + unfilledBackgroundColor, }, }, }, @@ -76,7 +80,8 @@ export const MessageUserReactionsItem = ({ style={[ styles.reactionBubbleBackground, { - backgroundColor: grey_gainsboro, + backgroundColor: + alignment === 'left' ? filledBackgroundColor : unfilledBackgroundColor, borderColor: alignment === 'left' ? white : grey_gainsboro, borderWidth: radius / 2, left, @@ -87,7 +92,7 @@ export const MessageUserReactionsItem = ({ > diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap index 31a66d0b23..e607860800 100644 --- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap +++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap @@ -158,7 +158,6 @@ exports[`Thread should match thread snapshot 1`] = ` onViewableItemsChanged={[Function]} removeClippedSubviews={false} renderItem={[Function]} - scrollEnabled={false} scrollEventThrottle={0.0001} showsVerticalScrollIndicator={true} stickyHeaderIndices={[]} diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx index cf64e2edbf..63092dcdf8 100644 --- a/package/src/contexts/overlayContext/OverlayProvider.tsx +++ b/package/src/contexts/overlayContext/OverlayProvider.tsx @@ -204,8 +204,8 @@ export const OverlayProvider = (props: PropsWithChildren) - {children} + {children} {overlay === 'gallery' && (