search

GetStream / stream-chat-react-native

💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
https://getstream.io/chat/sdk/react-native/
Other
976 stars 325 forks source link

🔥[🐛] React Native - Loop when clicking away from Permission Modal #2129

Closed arthurgeron-work closed 1 year ago

arthurgeron-work commented 1 year ago

Issue

If the user opens the attachment picker without giving prior file permissions to the app and refuses it. In that case, the app enters a loop, opening/closing the permissions modal until it's accepted.

Steps to reproduce

Steps to reproduce the behavior:

  1. Call toggleAttachmentPicker from within a Channel input context, from useMessageInputContext.
  2. Refuse file/pictures permission or click outside the modal

Expected behavior

Project Related Information

Customization

Click To Expand

```typescript jsx # N/A ```

Offline support

Environment

Click To Expand

#### `package.json`: ```json { "name": "redacted", "version": "redacted", "private": true, "scripts": { }, "dependencies": { "@gorhom/bottom-sheet": "4.4.5", "@invertase/react-native-apple-authentication": "2.2.2", "@miblanchard/react-native-slider": "2.3.1", "@notifee/react-native": "7.6.1", "@react-native-async-storage/async-storage": "1.17.12", "@react-native-camera-roll/camera-roll": "5.0.3", "@react-native-clipboard/clipboard": "1.11.1", "@react-native-community/audio-toolkit": "2.0.3", "@react-native-community/blur": "4.3.0", "@react-native-community/datetimepicker": "7.0.0", "@react-native-community/hooks": "3.0.0", "@react-native-community/netinfo": "9.3.7", "@react-native-community/progress-bar-android": "1.0.5", "@react-native-community/progress-view": "1.4.1", "@react-native-firebase/analytics": "version-14", "@react-native-firebase/app": "version-14", "@react-native-firebase/auth": "version-14", "@react-native-firebase/messaging": "version-14", "@react-native-firebase/remote-config": "version-14", "@react-native-firebase/storage": "version-14", "@react-navigation/bottom-tabs": "6.5.7", "@react-navigation/core": "6.4.8", "@react-navigation/drawer": "6.6.2", "@react-navigation/material-top-tabs": "6.6.2", "@react-navigation/native": "6.1.6", "@react-navigation/native-stack": "6.9.12", "@segment/analytics-react-native": "2.14.0", "@segment/sovran-react-native": "1.0.3", "@sentry/react-native": "5.3.0", "@shopify/flash-list": "1.4.3", "@stream-io/flat-list-mvcp": "0.10.2", "@tanstack/react-query": "4.24.6", "amazon-ivs-react-native-player": "1.3.0", "axios": "1.3.4", "babel-plugin-transform-inline-environment-variables": "0.4.4", "d3": "5.15.0", "date-fns": "2.12.0", "dayjs": "1.11.7", "deep-equal": "1.0.1", "deprecated-react-native-prop-types": "4.0.0", "eslint-plugin-jest": "27.2.1", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-testing-library": "5.10.2", "form-data": "2.3.1", "getstream": "8.1.5", "i18next": "22.4.15", "immer": "10.0.1", "intl": "1.2.4", "jest-websocket-mock": "2.4.0", "jwt-decode": "3.1.1", "lodash": "4.17.21", "lottie-react-native": "6.0.0-rc.2", "md5-o-matic": "0.1.1", "mime-db": "1.30.0", "moment": "2.29.1", "native-base": "3.4.25", "numeral": "2.0.6", "patch-package": "6.5.1", "prettier": "2.8.8", "prop-types": "15.6.0", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "7.23.0", "react-i18next": "12.2.2", "react-native": "0.71.7", "react-native-action-button": "2.8.5", "react-native-actions-shortcuts": "1.0.1", "react-native-add-calendar-event": "3.0.1", "react-native-animatable": "1.3.3", "react-native-audio-recorder-player": "3.4.0", "react-native-autocomplete-dropdown": "1.1.4", "react-native-autocomplete-input": "5.0.2", "react-native-blob-util": "0.17.3", "react-native-branch": "5.8.0", "react-native-circular-progress": "1.3.6", "react-native-code-push": "7.1.0", "react-native-config": "j-piasecki/react-native-config#@jpiasecki/new-arch", "react-native-device-info": "10.3.0", "react-native-document-picker": "8.1.3", "react-native-draggable": "3.3.0", "react-native-draggable-flatlist": "4.0.0", "react-native-dropdown-picker": "3.7.1", "react-native-elements": "3.0.0-alpha.1", "react-native-exception-handler": "2.10.10", "react-native-fast-image": "8.6.3", "react-native-fbsdk": "3.0.0", "react-native-file-viewer": "2.1.0", "react-native-fs": "2.20.0", "react-native-gesture-handler": "2.9.0", "react-native-get-random-values": "1.8.0", "react-native-haptic-feedback": "1.14.0", "react-native-htmlview": "0.12.1", "react-native-iap": "7.5.6", "react-native-image-crop-picker": "0.39.0", "react-native-image-picker": "4.10.0", "react-native-image-resizer": "1.4.5", "react-native-image-zoom-viewer": "2.2.27", "react-native-keep-awake": "4.0.0", "react-native-keyboard-aware-scroll-view": "0.9.5", "react-native-linear-gradient": "2.6.0", "react-native-localize": "2.2.4", "react-native-marquee": "0.3.2", "react-native-masked-text": "1.12.1", "react-native-mmkv": "2.7.0", "react-native-modalize": "2.1.1", "react-native-onesignal": "4.5.0", "react-native-orientation-locker": "1.5.0", "react-native-pager-view": "6.1.0-rc.2", "react-native-parsed-text": "0.0.22", "react-native-pdf": "6.6.2", "react-native-permissions": "2.1.4", "react-native-quick-sqlite": "8.0.2", "react-native-rate": "1.2.9", "react-native-raw-bottom-sheet": "2.2.0", "react-native-reanimated": "2.14.4", "react-native-redash": "18.1.0", "react-native-root-toast": "3.3.0", "react-native-safe-area-context": "4.5.0", "react-native-screens": "3.20.0", "react-native-section-list-get-item-layout": "2.2.1", "react-native-share": "8.2.1", "react-native-snap-carousel": "3.9.1", "react-native-sortable-list": "0.0.24", "react-native-splash-screen": "3.3.0", "react-native-star-rating-widget": "1.1.1", "react-native-svg": "13.8.0", "react-native-svg-charts": "5.4.0", "react-native-swipeable-item": "2.0.2", "react-native-switch": "2.0.0", "react-native-tab-view": "3.3.4", "react-native-text-size": "4.0.0-rc.1", "react-native-track-player": "3.2.0", "react-native-url-polyfill": "1.3.0", "react-native-vector-icons": "9.2.0", "react-native-video": "5.2.1", "react-native-view-shot": "3.1.2", "react-native-webview": "new-arch", "react-native-youtube": "2.0.0", "react-native-youtube-iframe": "2.2.1", "react-redux": "8.0.5", "redux": "4.2.1", "redux-thunk": "2.4.1", "reselect": "4.1.5", "rn-placeholder": "3.0.0", "serialize-error": "2.1.0", "shallow-equals": "1.0.0", "socket.io-client": "1.x.x", "stream-analytics": "3.4.4", "stream-chat-react-native": "5.15.0", "styled-components": "5.3.5", "tc-svg": "git+https://github.com/tradersclub/TCIcons.git", "uuid": "8.3.2", "victory-native": "36.3.1", "youtube-video-id": "0.0.2", "yup": "0.32.11", "zustand": "4.3.8" }, "devDependencies": { "@arthurgeron/eslint-plugin-react-usememo": "1.1.4", "@babel/core": "7.21.0", "@babel/eslint-parser": "7.19.1", "@babel/plugin-transform-flow-strip-types": "7.21.0", "@babel/plugin-transform-react-jsx": "7.21.0", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", "@babel/preset-typescript": "7.21.4", "@babel/runtime": "7.21.0", "@babel/types": "7.21.2", "@commitlint/cli": "17.0.2", "@commitlint/config-conventional": "17.0.2", "@react-native-community/eslint-config": "3.2.0", "@react-navigation/devtools": "6.0.18", "@reduxjs/toolkit": "1.8.1", "@sentry/types": "7.45.0", "@testing-library/jest-native": "5.4.2", "@testing-library/react-hooks": "8.0.1", "@testing-library/react-native": "11.5.2", "@tsconfig/react-native": "3.0.0", "@types/jest": "^29.2.1", "@types/jwt-decode": "3.1.0", "@types/lodash": "4.14.172", "@types/numeral": "2.0.1", "@types/react": "18.0.28", "@types/react-dom": "18.0.10", "@types/react-native-share": "3.3.3", "@types/react-native-snap-carousel": "3.8.5", "@types/react-native-svg-charts": "5.0.12", "@types/react-native-video": "5.0.12", "@types/react-test-renderer": "^18.0.0", "@types/redux": "3.6.0", "@types/socket.io-client": "1.x.x", "@types/styled-components": "5.1.26", "@types/styled-components-react-native": "5.2.1", "@typescript-eslint/eslint-plugin": "5.59.1", "@typescript-eslint/parser": "5.59.1", "babel": "6.23.0", "babel-jest": "29.4.3", "babel-plugin-dynamic-import-node": "2.3.3", "babel-plugin-inline-import": "3.0.0", "babel-plugin-module-alias": "1.6.0", "babel-plugin-module-resolver": "3.0.0", "babel-plugin-remove-react-jsx-attribute": "1.0.2", "babel-plugin-transform-remove-console": "6.9.4", "babel-polyfill": "6.26.0", "babel-preset-env": "1.7.0", "babel-preset-es2015": "6.24.1", "cross-env": "7.0.2", "enzyme": "3.11.0", "eslint": "8.32.0", "eslint-import-resolver-typescript": "3.5.5", "eslint-plugin-import": "2.26.0", "eslint-plugin-import-helpers": "1.3.1", "eslint-plugin-no-inline-styles": "1.0.5", "eslint-plugin-radar": "0.2.1", "eslint-plugin-react": "7.32.1", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-unicorn": "45.0.2", "expo-linear-gradient": "11.0.2", "husky": "8.0.3", "jest": "29.4.3", "jest-sonar": "0.2.15", "jetifier": "2.0.0", "lint-staged": "13.0.2", "metro-react-native-babel-preset": "0.75.1", "nock": "13.2.4", "react-native-flipper": "0.184.0", "react-native-flipper-performance-plugin": "0.4.0", "react-native-gradle-plugin": "0.71.14", "react-native-mmkv-flipper-plugin": "1.0.0", "react-native-performance": "4.0.0", "react-native-performance-flipper-reporter": "4.0.0", "react-native-svg-transformer": "0.14.3", "react-query-native-devtools": "4.0.0", "react-test-renderer": "18.2.0", "redux-flipper": "2.0.1", "require-json5": "1.3.0", "ts-jest": "29.1.0", "ts-prune": "0.10.3", "typescript": "5.0.4", "yarnhook": "0.6.0" }, "resolutions": { "react-native-gesture-handler": "2.9.0", "react-native-redash": "18.1.0", "xmldom": "0.5.0", "lodash": "4.17.21", "hosted-git-info": "3.0.8", "styled-components": "^5", "@babel/core": "7.21.0", "@babel/**/@babel/core": "7.21.0", "@babel/types": "7.21.2", "@babel/**/@babel/types": "7.21.2", "react": "18.2.0", "react-dom": "18.2.0", "@types/react": "18.0.28", "@types/react-dom": "18.0.10", "zustand ": "4.3.6" }, "engines": { "npm": ">=8.0.0", "node": ">=16.0.0" } } ``` **`react-native info` output:** ``` System: OS: macOS 13.4 CPU: (8) arm64 Apple M1 Memory: 87.02 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 19.9.0 - /var/folders/j5/9cnzfspj0l7_r_g1xfl_f1_r0000gp/T/yarn--1685719953224-0.6546979111132107/node Yarn: 1.22.19 - /var/folders/j5/9cnzfspj0l7_r_g1xfl_f1_r0000gp/T/yarn--1685719953224-0.6546979111132107/yarn npm: 9.6.4 - /opt/homebrew/bin/npm Watchman: 2023.04.03.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Android NDK: 23.1.7779620 IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9971841 Xcode: 14.3/14E222b - /usr/bin/xcodebuild Languages: Java: 17.0.6 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.7 => 0.71.7 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found ``` - **Platform that you're experiencing the issue on**: - [ ] iOS - [x] Android - [ ] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [ ] Both - **`stream-chat-react-native` version you're using that has this issue:** - 5.15.0 - Device/Emulator info: - [x] Also reproduced on a physical device (Android 10) - OS version: Android 10 - Device/Emulator: iPhone 14 Pro Max

Additional context

Screenshots

Click To Expand

https://github.com/GetStream/stream-chat-react-native/assets/71399856/ca52bdc1-06ec-4752-a014-817cfa79220d

I patched the solution on AttachmentPickerby not setting onEndReached when photoError is true, later I will open a PR with that fix.

arthurgeron-work commented 1 year ago

It's also odd that it shows "Reconnecting" whenever you call toggleAttachmentPicker, it was not shown in the video but it happens.

vanGalilea commented 1 year ago

Hey @arthurgeron-work thanks for reaching out.

The issue you've submitted is missing important information that will help us reproduce and help you solve this issue. Please follow our issue template entirely without skipping any parts.

arthurgeron-work commented 1 year ago

@vanGalilea

I hadn't seen that before because of patch-package automation. My apologies, I've adapted my issue to your template.

khushal87 commented 1 year ago

Hey @arthurgeron-work, can you please share the code where you are calling the toggleAttachmentPicker from outside?

In default behaviour, there is no such open and close behaviour noticeable in the app that I can see.

arthurgeron-work commented 1 year ago

Hey @arthurgeron-work, can you please share the code where you are calling the toggleAttachmentPicker from outside?

In default behaviour, there is no such open and close behaviour noticeable in the app that I can see.

The code is a simple:

<TouchableOpacity
          onPress={toggleAttachmentPicker}

we get the function from the context:

const { toggleAttachmentPicker } = useMessageInputContext();

That method isn't called anywhere else.

stream-ci-bot commented 1 year ago

:tada: This issue has been resolved in version 5.16.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: