Malformed calls from JS: field sizes are different

[dulcehc]

I have this same issue https://github.com/dev-yakuza/react-native-image-modal/issues/5, it only happens on Android. I tested on a physical device.

I'm using Expo 36, react-native 0.61 and react-native-image-modal: 1.0.1

[dev-yakuza]

Hi, there.

Thanks for reporting.

I think this is related 5#issuecomment-602171074.

So, can you try this?

1. reinstall: rm -rf node_modules and npm install
2. watchman watch-del-all
3. remove build folder: rm -rf android/app/build(I don't know expo is the same path)
4. remove bundle file: rm android/app/src/main/assets/index.android.bundle(I don't know expo is the same path)
5. delete the app on the device
6. run: npm run android

Thanks and please share your result!

[dulcehc]

Thanks for your quick response @dev-yakuza. I tried executing those steps but still get the same result. Also I tested in a simulator:

[dev-yakuza]

Sorry to hear that 😭

I will test this library on Expo And I will find and fix it asap.

thanks

[dev-yakuza]

@dulcehc Can you share your Node version?

If you use Node 13 version, Can you downgrade to 12 version and test it? (because I didn't get the error message, I am node 12, and mac )

• Mac

brew uninstall node
brew install node@12

• windows

choco uninstall node
choco install nodejs-lts

[dev-yakuza]

I checked, but I couldn't find this issue. 🤔

I added Expo example. You can test it.

https://github.com/dev-yakuza/react-native-image-modal/tree/75139318cb6459db947d607fa38d520914bfab4c/ExampleWithExpo

[dev-yakuza]

I fixed the suspicious code.

please try 1.0.4 version and let me know the result 🙇

Thanks!

[dulcehc]

@dulcehc Can you share your Node version?

If you use Node 13 version, Can you downgrade to 12 version and test it? (because I didn't get the error message, I am node 12, and mac )

• Mac

brew uninstall node
brew install node@12

• windows

choco uninstall node
choco install nodejs-lts

actually, I'm using Node 12.13.0

[dulcehc]

I fixed the suspicious code.

please try 1.0.4 version and let me know the result 🙇

Thanks!

Thanks for taking time to look into this. I tested your example with Expo on my Android device and it's working, there's only a weird effect when opening/closing the modal.

I updated my project with version 1.0.4 but I get the same error. The difference with your example is that it's an ejected Expo project and the version is 36.

[dev-yakuza]

Thanks for taking time to look into this. I tested your example with Expo on my Android device and it's working, there's only a weird effect when opening/closing the modal.

I updated my project with version 1.0.4 but I get the same error. The difference with your example is that it's an ejected Expo project and the version is 36.

1 I am sorry. I am not familiar with Expo. I executed the command below to create Expo and install my library

expo init Example
# I selected Typescript
cd Example
yarn add react-native-image-modal

So, I think I didn't eject the Expo project. Am I right? Example link is here - ExampleWithExpo

2 I searched about how to init with the specific version in Expo. but I couldn't get the solution. If you know how to init Expo project with the specific version(36), please let me know it.

thanks.

[dulcehc]

Thanks for taking time to look into this. I tested your example with Expo on my Android device and it's working, there's only a weird effect when opening/closing the modal. I updated my project with version 1.0.4 but I get the same error. The difference with your example is that it's an ejected Expo project and the version is 36.

1 I am sorry. I am not familiar with Expo. I executed the command below to create Expo and install my library

expo init Example
# I selected Typescript
cd Example
yarn add react-native-image-modal

So, I think I didn't eject the Expo project. Am I right? Example link is here - ExampleWithExpo

2 I searched about how to init with the specific version in Expo. but I couldn't get the solution. If you know how to init Expo project with the specific version(36), please let me know it.

thanks.

You can try to change the version by updating these lines:

"expo": "^36.0.0"
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"

Right, you aren't using the ejected version. For my project, I have to add custom native functionality, that's why executed expo eject and I have the folders for ios and android in my working directory.

[dev-yakuza]

Thanks for sharing. I will test again on Expo 36. 👍

is it possible to share your project? I think it's better to see your project directly

thanks

[dev-yakuza]

I tested on Expo 36 and eject the project, but I couldn't get the error message 😭 It's quite difficult if I don't get the error message, because I can't debug it...

I released 1.0.5 version. You can set renderToHardwareTextureAndroid in this version. Can you set renderToHardwareTextureAndroid={false} and test it? (Because I've seen your second error image, said about renderToHardwareTextureAndroid)

I hope this solves your problem.

thanks.

[dulcehc]

Thanks again for looking into this issue! I have executed the previous steps, removing node_modules and installing all dependencies, and now using version 1.0.5. I get an error by setting renderToHardwareTextureAndroid={false}:

I don't know what could be the issue in my project :(. For now, I have disabled modal version for Android.

[dev-yakuza]

I am sorry to hear that. I fixed the suspicious code and just released 1.0.6. Can you test it for me, please? 🙇 I really hope this solves this issue. 🙏

[dulcehc]

Same error :(

[dev-yakuza]

I am so sad to hear that😭 Can you share your android version?

[dulcehc]

Physical device: Android 8.0 Simulator: Android 9.0

[subhamg]

Same error :(

I'm getting this error too. Did whatever you asked in your past comments. Using version 1.0.6 and Expo 37

[dev-yakuza]

@subhamg @dulcehc can you guys share your package.json?

@subhamg is your project also ejected?

[subhamg]

package.json

@dev-yakuza No, my project is not ejected.

[dev-yakuza]

@subhamg Thanks.

Can you share your source code? or Can you make a new project and make this error and share it? 🙏

because I couldn't make this error, and it is very difficult to fix this issue. 😭

[dev-yakuza]

@subhamg

I fixed the suspicious code. please try 1.0.7 version and let me know the result 🙇 Thanks!

[subhamg]

@subhamg

I fixed the suspicious code. please try 1.0.7 version and let me know the result 🙇 Thanks!

I'm still getting the same error. 😭

Here is the code.

[dulcehc]

@subhamg @dulcehc can you guys share your package.json?

@dev-yakuza here is my file

{ "version": "1.0.0", "private": true, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.3.0", "babel-core": "^6.26.3", "babel-eslint": "^10.0.1", "babel-jest": "^24.1.0", "babel-preset-env": "^1.7.0", "eslint": "^5.13.0", "eslint-config-standard": "^12.0.0", "eslint-plugin-import": "^2.16.0", "eslint-plugin-node": "^8.0.1", "eslint-plugin-promise": "^4.0.1", "eslint-plugin-standard": "^4.0.0", "jest": "^24.1.0", "jest-expo": "^36.0.0", "jetifier": "^1.6.5", "react-native-scripts": "1.14.0", "react-native-unimodules": "^0.7.0", "react-test-renderer": "16.3.1", "reactotron-react-native": "^2.1.7" }, "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject", "test": "node ./node_modules/jest/bin/jest.js", "lint": "eslint \"*/.js\"", "fix": "eslint \"*/.js\" --fix", "link-libraries": "react-native link lottie-ios && react-native link react-native-onesignal && react-native link react-native-device-info && react-native link react-native-iap && react-native link react-native-android-fullscreen-webview-video && react-native link react-native-firebase", "copy-google-services": "cp google-services.json android/app/google-services.json", "postinstall": "jetify" }, "jest": { "preset": "jest-expo", "verbose": true, "transformIgnorePatterns": [ "node_modules/(?!react)/" ] }, "dependencies": { "@react-native-community/netinfo": "4.6.0", "@react-native-firebase/analytics": "^6.3.4", "@react-native-firebase/app": "^6.3.4", "babel-preset-es2015": "^6.24.1", "babel-preset-expo": "^8.0.0", "babel-preset-react": "^6.24.1", "eslint-plugin-react": "^7.12.4", "expo": "^36.0.0", "expo-app-auth": "~8.0.0", "expo-app-loader-provider": "~8.0.0", "expo-core": "^2.0.0", "expo-file-system-interface": "^2.0.0", "expo-font": "~8.0.0", "expo-font-interface": "^3.0.0", "expo-localization": "~8.0.0", "expo-location": "~8.0.0", "expo-react-native-adapter": "^2.0.0", "expo-sensors": "~8.0.0", "expo-sensors-interface": "^3.0.0", "expo-task-manager-interface": "^3.0.0", "expokit": "^36.0.1", "handler": "^0.1.3", "iap-receipt-validator": "^1.0.6", "jest-cli": "^24.1.0", "lottie-react-native": "^2.5.11", "moment": "^2.24.0", "moment-timezone": "^0.5.25", "native-base": "^2.10.0", "prop-types": "^15.6.2", "react": "16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", "react-native-device-info": "^2.1.2", "react-native-flip-view": "^1.0.5", "react-native-floating-labels": "^1.1.9", "react-native-form-validator": "^0.2.0", "react-native-gesture": "^0.2.0", "react-native-gesture-handler": "~1.5.0", "react-native-i18n": "^2.0.15", "react-native-iap": "^2.4.6", "react-native-image-modal": "^1.0.1", "react-native-modal": "^7.0.2", "react-native-onesignal": "^3.2.12", "react-native-picker-dropdown": "^0.1.2", "react-native-picker-select": "^5.2.3", "react-native-responsive-fontsize": "^0.1.8", "react-native-screens": "2.0.0-alpha.12", "react-native-swiper": "^1.6.0-nightly.3", "react-native-webview": "7.4.3", "react-navigation": "^3.11.0", "react-navigation-stack": "^1.1.1", "react-navigation-transitions": "^1.0.10", "react-redux": "^5.0.7", "redux": "^4.0.0", "redux-mock-store": "^1.5.4", "validator": "^10.11.0" } }

[dev-yakuza]

I think it is out of my skills. So, I've asked the communities on Facebook. I hope someone helps me to solve this issue.

@dulcehc @subhamg sorry to make you inconvenience. 🙇‍♂️

[usamamoinakhter]

This error is generated when you are passing some value from react native to native android, and the native android is calling some function using the received value and the received value is null.

[dev-yakuza]

@dulcehc @subhamg Can you guys share Expo snack? 🙏

[dev-yakuza]

This error is generated when you are passing some value from react native to native android, and the native android is calling some function using the received value and the received value is null.

@usamamoinakhter thanks! I understand it, but I didn't make a custom native feature. I just used Modal and Animated.View. So, is it related to react native issue? 😭

[dev-yakuza]

@dulcehc @subhamg Guys, can you try this one?

react-native issue 28233

1. Use code attached as an App.js.
2. Start react-native-debugger, have it listen on 19001 or whatever your metro bundler expose
3. Start app with expo start, then choose android emulator (but you can use device the same thing happens).
4. After the application loaded, open developer menu and use Debug option. Hopefully your react-native-debugger will overtake, you should see the application structure in it.
5. Once again from developer menu open inspector, it should be collapsed and you should be able to highlight the content on your target while walking through the structure. But as soon as you highlight RCTView, you will get error attached above. If I remove style from the code, inspector is working without problems.

[subhamg]

I tried and still getting the same error.

@dulcehc @subhamg Guys, can you try this one?

react-native issue 28233

1. Use code attached as an App.js.
2. Start react-native-debugger, have it listen on 19001 or whatever your metro bundler expose
3. Start app with expo start, then choose android emulator (but you can use device the same thing happens).
4. After the application loaded, open developer menu and use Debug option. Hopefully your react-native-debugger will overtake, you should see the application structure in it.
5. Once again from developer menu open inspector, it should be collapsed and you should be able to highlight the content on your target while walking through the structure. But as soon as you highlight RCTView, you will get error attached above. If I remove style from the code, inspector is working without problems.

[subhamg]

@dev-yakuza I think we are getting this issue because you have used animated for animation. It's deprecated as mentioned in the Doc. Can you please check this again? Thank you

[dev-yakuza]

@subhamg

Thanks for sharing, but I don't use animated props for the modal. 😭

https://github.com/dev-yakuza/react-native-image-modal/blob/fcde097336dda3cfe2a409f4d789524dee3ee077/src/ImageDetail/index.tsx#L700-L706

But I found this answer because of your opinion.

https://stackoverflow.com/a/38877780/13316596

So, I try to remove Modal for this library!

thanks!

[dev-yakuza]

@subhamg just simple question. when do you get this error?

1. touch the image to show modal?
2. pinch-zoom?

I tried to remove modal but it is impossible. If I remove modal, I couldn't show full screen. 😭

[dev-yakuza]

I fixed the suspicious code. and release 1.0.8.

Please update and test it, and let me know the result 🙇

[tastafur]

@dev-yakuza To me this error has happened to me working with the image component of react native when in certain circumstances they reached the height, an undefined value, so I solved it by painting only the image when it really had the height value

[dev-yakuza]

@tastafur Thanks for sharing your solution. 🙇‍♂️

So, when the image doesn't have height value, this error occurs, and if the image has height value, this library works well.

Is my understanding right?