Closed ruppysuppy closed 2 months ago
ruppysuppy
commented
3 months ago NOTE: The issue is related to stream-chat-expo but since it doesn't have a public repo, thought of adding it here (since the same team seems to have developed all the stream-chat packages)
arekkubaczkowski
commented
2 months ago @ruppysuppy stream-chat-expo actually refers to this repository :)
khushal87
commented
2 months ago Hey @ruppysuppy, can you explain what exactly you see wrong here? Your loom has been deleted so I am not able to get the issue.
https://github.com/user-attachments/assets/16ffcc1b-ec5f-4e85-92d6-5bc941a0f8d2
ruppysuppy
commented
2 months ago Yeah - stream customer service asked us to update the package & try again as we are using a slightly outdated version
Issue
Describe your issue here
When the user opens the keyboard on an empty chat, the empty screen starts jumping around. The bug is present on both the default empty screen and custom ones (only on iOS app, NOT the Android app)
For a detailed look at the issue, please check out this loom video: https://www.loom.com/share/834c023319a14ca08a199e9a0bee0eef?sid=885b36a6-e18b-40f5-843e-5e6e13257e20
Steps to reproduce
Steps to reproduce the behavior:
Expected behavior
The empty screen should NOT jump around, but remain fixed & be resized according to the available space on the screen
Project Related Information
Customization
Click To Expand
The issue appears regardless we use a custom empty state indicator in either `Channel` or `MessageList` or keep them `undefined` (ie: don't pass any custom component to use the default one) ```tsx
// OR
Offline support
Environment
Click To Expand
#### `package.json` - where it's installed: ```json { "name": "lounge-expo-app", "version": "1.0.0", "main": "index.js", "scripts": { // would prefer not sharing them }, "dependencies": { "@dev-plugins/react-navigation": "^0.0.6", "@dev-plugins/react-query": "^0.0.6", "@expo/metro-runtime": "~3.2.1", "@expo/react-native-action-sheet": "^4.1.0", "@expo/webpack-config": "~19.0.1", "@logrocket/react-native": "^1.33.6", "@notifee/react-native": "^7.8.2", "@react-native-async-storage/async-storage": "1.23.1", "@react-native-community/datetimepicker": "8.0.1", "@react-native-community/netinfo": "11.3.1", "@react-native-community/slider": "^4.5.2", "@react-native-firebase/analytics": "^20.1.0", "@react-native-firebase/app": "^20.1.0", "@react-native-firebase/auth": "^20.1.0", "@react-native-firebase/crashlytics": "^20.1.0", "@react-native-firebase/firestore": "^20.1.0", "@react-native-firebase/messaging": "^20.1.0", "@react-native-firebase/perf": "^20.1.0", "@react-native-firebase/remote-config": "^20.1.0", "@react-native-firebase/storage": "^20.1.0", "@react-native-picker/picker": "2.7.5", "@react-navigation/material-top-tabs": "^6.6.13", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "@rneui/base": "^4.0.0-rc.8", "@rnw-community/shared": "^0.54.0", "@rnw-community/wdio": "^0.54.0", "@segment/analytics-react-native": "^2.17.0", "@segment/sovran-react-native": "^1.0.4", "@sentry/react": "~5.22.0", "@sentry/react-native": "~5.22.0", "@shopify/flash-list": "1.6.4", "@stream-io/flat-list-mvcp": "^0.10.3", "dotenv": "^16.4.5", "dotenv-safe": "^9.1.0", "expo": "51.0.14", "expo-application": "~5.9.1", "expo-av": "~14.0.5", "expo-blur": "~13.0.2", "expo-build-properties": "~0.12.3", "expo-clipboard": "~6.0.3", "expo-constants": "~16.0.2", "expo-contacts": "~13.0.4", "expo-dev-client": "~4.0.18", "expo-device": "~6.0.2", "expo-document-picker": "~12.0.2", "expo-file-system": "~17.0.1", "expo-haptics": "~13.0.1", "expo-image": "~1.12.12", "expo-image-manipulator": "~12.0.5", "expo-image-picker": "~15.0.5", "expo-linear-gradient": "~13.0.2", "expo-linking": "~6.3.1", "expo-location": "~17.0.1", "expo-media-library": "~16.0.3", "expo-notifications": "~0.28.9", "expo-sharing": "~12.0.1", "expo-splash-screen": "~0.27.5", "expo-status-bar": "~1.12.1", "expo-updates": "~0.25.17", "fast-text-encoding": "^1.0.6", "joi": "^17.13.1", "jotai": "^2.8.3", "lodash": "^4.17.21", "logrocket": "5.0.1", "lottie-ios": "4.4.1", "lottie-react": "^2.4.0", "lottie-react-native": "6.7.0", "react": "18.2.0", "react-dom": "^18.2.0", "react-image-crop": "^10.1.5", "react-multi-carousel": "^2.8.5", "react-native": "0.74.2", "react-native-compressor": "^1.8.0", "react-native-country-picker-modal": "^2.0.0", "react-native-document-picker": "^9.0.1", "react-native-dropdown-picker": "^5.4.6", "react-native-emoji-selector": "^0.2.0", "react-native-file-viewer": "~2.1.5", "react-native-gesture-handler": "~2.16.1", "react-native-get-random-values": "~1.11.0", "react-native-google-places-autocomplete": "^2.5.1", "react-native-gradle-plugin": "^0.71.17", "react-native-hyperlink": "^0.0.22", "react-native-image-crop-picker": "^0.40.0", "react-native-localize": "^3.0.4", "react-native-modal-datetime-picker": "^15.0.0", "react-native-pager-view": "6.3.0", "react-native-paper": "^5.11.1", "react-native-qrcode-svg": "^6.2.0", "react-native-quick-sqlite": "margelo/react-native-quick-sqlite", "react-native-reanimated": "~3.10.0", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-share": "^10.0.2", "react-native-svg": "15.2.0", "react-native-tab-view": "^3.5.1", "react-native-toast-message": "~2.1.6", "react-native-uuid": "^2.0.1", "react-native-vector-icons": "^10.1.0", "react-native-view-shot": "3.8.0", "react-native-web": "~0.19.10", "react-native-webview": "13.8.6", "stream-chat": "8.17.0", "stream-chat-expo": "~5.28.1", "ua-parser-js": "^1.0.38", "zod": "^3.23.8" }, "devDependencies": { "@babel/core": "^7.24.0", "@storybook/addon-actions": "^6.5.16", "@storybook/addon-controls": "^6.5.16", "@storybook/addon-ondevice-actions": "^6.5.2", "@storybook/addon-ondevice-controls": "^6.5.2", "@storybook/react-native": "^6.5.2", "@types/dotenv-safe": "^8.1.6", "@types/react": "~18.2.79", "@types/ua-parser-js": "^0.7.39", "storybook-react-context": "^0.6.0" }, "peerDependencies": { "axios": "*" }, "private": true } ``` #### `package.json` - where it's used: ```json { "version": "1.0.0", "name": "@lounge/app-ui", "types": "src/index.ts", "main": "dist", "private": true, "sideEffects": [ "*.css" ], "files": [ "types", "src", "dist", "assets" ], "scripts": { // would prefer not sharing them }, "dependencies": { "@formatjs/intl-datetimeformat": "^6.12.5", "@formatjs/intl-getcanonicallocales": "^2.3.0", "@formatjs/intl-locale": "^4.0.0", "@formatjs/intl-numberformat": "^8.10.3", "@formatjs/intl-pluralrules": "^5.2.14", "@hookform/resolvers": "~3.1.0", "@rnw-community/shared": "^0.54.0", "@rnw-community/wdio": "^0.54.0", "copyfiles": "^2.4.1", "date-fns-tz": "^3.1.3", "google-libphonenumber": "^3.2.32", "jotai": "^2.8.3", "linkify-it": "^4.0.1", "mime": "^3.0.0", "react-hook-form": "~7.44.3", "react-image-crop": "^10.1.5", "react-instantsearch-core": "^7.5.0", "tlds": "^1.240.0", "typesense-instantsearch-adapter": "^2.8.0", "zod": "^3.23.8" }, "devDependencies": { "@types/google-libphonenumber": "^7.4.30" }, "peerDependencies": { "@react-native-async-storage/async-storage": "*", "@react-native-community/netinfo": "*", "@react-navigation/material-top-tabs": "*", "@shopify/flash-list": "*", "@supercharge/promise-pool": "*", "@tanstack/react-query": "*", "@wdio/globals": "*", "axios": "*", "date-fns": "*", "expo": "*", "expo-application": "*", "expo-av": "*", "expo-blur": "*", "expo-clipboard": "*", "expo-constants": "*", "expo-contacts": "*", "expo-document-picker": "*", "expo-file-system": "*", "expo-image": "*", "expo-image-picker": "*", "expo-linear-gradient": "*", "expo-linking": "*", "expo-location": "*", "expo-media-library": "*", "expo-notifications": "*", "expo-updates": "*", "instantsearch.js": "*", "lodash": "*", "react": "*", "react-dom": "*", "react-multi-carousel": "*", "react-native": "*", "react-native-country-picker-modal": "*", "react-native-document-picker": "*", "react-native-emoji-selector": "*", "react-native-google-places-autocomplete": "*", "react-native-hyperlink": "*", "react-native-image-crop-picker": "*", "react-native-localize": "*", "react-native-paper": "*", "react-native-qrcode-svg": "*", "react-native-reanimated": "*", "react-native-safe-area-context": "*", "react-native-share": "*", "react-native-svg": "*", "react-native-tab-view": "*", "react-native-toast-message": "*", "react-native-uuid": "*", "react-native-view-shot": "*", "react-native-web": "*", "react-native-webview": "*", "semver": "*", "stream-chat": "*", "stream-chat-expo": "*", "webdriverio": "*" } } ``` **`react-native info` output:** ``` System: OS: macOS 14.2.1 CPU: (12) arm64 Apple M2 Pro Memory: 69.55 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.20.1 path: /opt/homebrew/bin/node Yarn: version: 3.5.0 path: /opt/homebrew/bin/yarn npm: version: 10.8.0 path: /opt/homebrew/bin/npm Watchman: version: 2024.06.17.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /opt/homebrew/lib/ruby/gems/3.2.0/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - watchOS 10.2 Android SDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: version: 15.1/15C65 path: /usr/bin/xcodebuild Languages: Java: version: 19.0.2 path: /usr/bin/javac Ruby: version: 3.2.2 path: /opt/homebrew/opt/ruby/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: Not Found react-native: Not Found react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found ``` - **Platform that you're experiencing the issue on**: - [x] iOS - [ ] ~Android~ - **`stream-chat` version you're using that has this issue:** - `8.17.0` - **`stream-chat-expo` version you're using that has this issue:** - `5.28.1` - Device/Emulator info: - OS version: `iOS 17.2` - Device/Emulator: `iPhone 15 Pro Max`
Additional context
Screenshots
Click To Expand