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
975 stars 326 forks source link

[🐛] 🔥 Getting error and crashing while trying to upload a video. #2403

Closed mehdidavoodi7 closed 9 months ago

mehdidavoodi7 commented 9 months ago

Issue

While I am trying to upload a video I got this error:

TypeError: null is not an object (evaluating 'item.file.name.lastIndexOf')

Steps to reproduce

Steps to reproduce the behavior:

  1. Go to a chat and try to upload a video
  2. Once you click on a video this error pops up

Expected behavior

Project Related Information

Customization

Click To Expand

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

Offline support

Environment

Click To Expand

#### `package.json`: ```json { "name": "reactnativeweb", "version": "0.0.1", "private": true, "main": "index.tsx", "scripts": { "build-web": "npx ts-node src/scripts/buildWeb.ts", "web": "npx ts-node src/scripts/serveWeb.ts", "android": "npm run update-version && react-native run-android", "ios": "npm run update-version && react-native run-ios", "start": "npm run update-version && react-native start", "test": "jest", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "update-version": "rimraf version.ts && genversion --es6 --semi version.ts", "build-android": "react-native bundle --platform android --dev false --entry-file index.tsx --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && npm run clean-android-drawables", "clean-android-drawables": "rm -rf ./android/app/src/main/res/drawable-* ./android/app/src/main/res/raw" }, "dependencies": { "@gorhom/portal": "^1.0.11", "@invertase/react-native-apple-authentication": "^2.2.1", "@notifee/react-native": "^5.6.0", "@ptomasroos/react-native-multi-slider": "^2.2.2", "@react-native-async-storage/async-storage": "^1.15.7", "@react-native-camera-roll/camera-roll": "^7.3.0", "@react-native-community/netinfo": "^11.2.1", "@react-native-firebase/app": "^15.3.0", "@react-native-firebase/messaging": "^15.3.0", "@react-native-google-signin/google-signin": "8.0.0", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.0.2", "@react-navigation/native-stack": "^6.1.0", "@stream-io/flat-list-mvcp": "^0.10.3", "@types/react": "17.0.2", "ajv": "^8.11.0", "axios": "^0.27.2", "buffer": "^6.0.3", "expo": "^45.0.4", "expo-av": "~11.2.3", "expo-blur": "^11.2.0", "expo-font": "^10.0.4", "expo-web-browser": "^10.2.1", "fbemitter": "^3.0.0", "lodash": "^4.17.21", "react": "17.0.2", "react-native": "^0.68.2", "react-native-base64": "^0.2.1", "react-native-confirmation-code-field": "^7.3.0", "react-native-date-picker": "4.2.2", "react-native-fs": "^2.20.0", "react-native-geolocation-service": "^5.3.0", "react-native-gesture-handler": "^2.14.1", "react-native-haptic-feedback": "^1.14.0", "react-native-image-crop-picker": "^0.40.2", "react-native-image-picker": "^4.8.4", "react-native-image-resizer": "^1.4.5", "react-native-linear-gradient": "^2.6.2", "react-native-modal": "^13.0.0", "react-native-reanimated": "^2.17.0", "react-native-safe-area-context": "4.3.3", "react-native-screens": "^3.13.1", "react-native-share": "^7.8.0", "react-native-svg": "^12.5.1", "react-native-vector-icons": "^9.0.0", "react-native-video": "^5.2.1", "react-native-walkthrough-tooltip": "^1.3.1", "react-native-web": "^0.17.7", "react-native-web-hooks": "^3.0.1", "react-native-web-linear-gradient": "^1.1.2", "react-player": "^2.10.0", "react-query": "^3.39.2", "screenfull": "file:externalLibraries/modified/screenfull", "stream-chat-react-native": "^5.22.1", "webfontloader": "^1.6.28" }, "devDependencies": { "@babel/core": "^7.19.3", "@babel/runtime": "^7.19.4", "@react-native-community/eslint-config": "^3.1.0", "@types/fbemitter": "^2.0.32", "@types/jest": "^26.0.23", "@types/lodash": "^4.14.178", "@types/lodash-webpack-plugin": "^0.11.6", "@types/react-native": "^0.68.9", "@types/react-native-base64": "^0.2.0", "@types/react-native-vector-icons": "^6.4.10", "@types/webfontloader": "^1.6.33", "@types/webpack": "^5.28.0", "@types/webpack-bundle-analyzer": "^4.4.1", "@types/webpack-env": "^1.17.0", "@typescript-eslint/eslint-plugin": "^5.23.0", "@typescript-eslint/parser": "^5.23.0", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.3", "babel-plugin-lodash": "^3.3.4", "babel-plugin-react-native-web": "^0.17.1", "babel-preset-env": "^1.7.0", "bundle-stats-webpack-plugin": "^3.2.2", "css-loader": "^6.5.1", "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", "eslint-import-resolver-typescript": "^3.5.1", "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jest": "^27.1.3", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.31.10", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "favicons": "^6.2.2", "favicons-webpack-plugin": "^5.0.2", "genversion": "^3.0.2", "html-webpack-plugin": "^5.3.2", "jest": "^26.6.3", "lodash-webpack-plugin": "^0.11.6", "metro-react-native-babel-preset": "^0.73.2", "prettier": "^2.4.1", "react-dom": "^17.0.2", "react-native-codegen": "^0.69.2", "react-test-renderer": "17.0.2", "rimraf": "^3.0.2", "style-loader": "^3.3.1", "ts-command-line-args": "^2.2.0", "typescript": "^4.7.2", "webpack": "^5.65.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.7.2", "webpack-merge": "^5.8.0" }, "resolutions": { "@types/react": "17.0.2", "@types/react-dom": "^17.0.2" }, "jest": { "preset": "react-native", "moduleFileExtensions": [ "ts", "tsx", "js", "jsx", "json", "node" ] } } ``` **`react-native info` output:** ``` System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Pro Memory: 75.72 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.4.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.12.2 - ~/node_modules/.bin/npm Watchman: Not Found Managers: CocoaPods: 1.14.3 - /opt/homebrew/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.3 AI-223.8836.35.2231.10406996 Xcode: 15.1/15C65 - /usr/bin/xcodebuild Languages: Java: 18.0.1.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: ^0.68.2 => 0.68.7 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found ``` - **Platform that you're experiencing the issue on**: - [] iOS - [ ] Android - [x] **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.22.1` - Device/Emulator info: - I am using a physical device and this also happens on simulator - OS version: `iOS 17.2` - Device/Emulator: `iPhone 15 and iPhone 14`

Additional context

Screenshots

Click To Expand

![Simulator Screenshot - iPhone 15 - 2024-01-23 at 12 43 52](https://github.com/GetStream/stream-chat-react-native/assets/130352795/283d262f-d9b3-421a-8bc6-db6ee604cae9)

khushal87 commented 9 months ago

Hey @mehdidavoodi7, please downgrade your @react-native-camera-roll/camera-roll version to <=7.2.2. There's some issue with the library on higher versions. I see that you are using ^7.3.0. Please go through this issue on their repo for reference - https://github.com/react-native-cameraroll/react-native-cameraroll/issues/576.

It seems like file name and size are not returned appropriately on higher versions.