BlackBoxVision / react-native-mercadopago-px

🚀 MercadoPago PX bridge for react-native
https://react-native-mercadopago-px.blackbox-vision.tech
MIT License
103 stars 25 forks source link

Broken styles in the application when installing the package #27

Closed jmlacruz closed 3 years ago

jmlacruz commented 3 years ago

When I install the package in its version 0.6.2 or 0.6.1 the styles are broken in my application, the background of some components is placed in gray, the compomente Alert, the letters are placed very small, the icons are exchanged.

Previously this did not happen, the package was installed correctly and worked perfectly. I assume it is another package in my package.json that was upgraded to a more recent version and this produces a conflict of styles.

Here's my package.json

"dependencies": { "@blackbox-vision/react-native-mercadopago-px": "^0.6.1", "@react-native-community/async-storage": "^1.6.3", "@react-native-community/datetimepicker": "^2.1.0", "@react-native-community/geolocation": "^2.0.2", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/toolbar-android": "0.1.0-rc.2", "@react-navigation/drawer": "^5.9.0", "@react-navigation/native": "^5.8.6", "@react-navigation/stack": "^5.9.0", "axios": "^0.19.0", "js-base64": "^2.5.1", "laravel-echo": "^1.6.1", "react": "16.13.1", "react-native": "0.63.2", "react-native-app-intro-slider": "^3.0.0", "react-native-awesome-alerts": "^1.3.3", "react-native-calendars": "^1.217.0", "react-native-device-info": "^5.4.0", "react-native-fbsdk": "^1.1.1", "react-native-gesture-handler": "^1.8.0", "react-native-gifted-chat": "^0.13.0", "react-native-google-places-autocomplete": "^1.8.0", "react-native-google-signin": "^2.1.1", "react-native-image-picker": "^2.3.4", "react-native-linear-gradient": "^2.5.6", "react-native-maps": "0.26.1", "react-native-onboarding-swiper": "^1.1.4", "react-native-onesignal": "^3.6.1", "react-native-paper": "^3.10.1", "react-native-ratings": "^7.2.0", "react-native-reanimated": "^1.13.1", "react-native-responsive-screen": "^1.3.0", "react-native-safe-area-context": "^3.1.8", "react-native-screens": "^2.13.0", "react-native-simple-radio-button": "^2.7.4", "react-native-snap-carousel": "^3.9.1", "react-native-swiper-flatlist": "^2.0.3", "react-native-vector-icons": "^6.6.0", "react-navigation": "^4.0.10", "react-redux": "^7.1.3", "redux": "^4.0.4", "redux-promise-middleware": "^6.1.2", "redux-thunk": "^2.3.0", "socket.io-client": "^2.3.0", "validate.js": "^0.13.1" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/runtime": "^7.12.1", "@react-native-community/eslint-config": "0.0.5", "babel-jest": "^24.9.0", "eslint": "^6.6.0", "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.57.0", "react-native-dotenv": "^0.2.0", "react-test-renderer": "16.9.0", "redux-devtools-extension": "^2.13.8", "redux-logger": "^3.0.6", "remote-redux-devtools": "^0.5.16" },

These are the captures of the error in my application

Screenshot_2020-11-08-09-39-05-064_com virtualapp Screenshot_2020-11-08-09-39-23-724_com virtualapp Screenshot_2020-11-08-09-51-25-236_com virtualapp

manutuero commented 3 years ago

Hi @jmlacruz, thanks for submit this issue. I almost sure that our lib isn't the causant of this styles bug. Maybe you had a problem with the upgrade to React Native 0.63 version. You can try to make a downgrade and check if this problem solves.

If not, can you give us some type of access to repo for analyze the cause of bug? Only with this info can't give you a response.

JonatanSalas commented 3 years ago

Hi @jmlacruz it seems to be an issue with react-navigation maybe, I can deduce it because it changes the background color of your screen.

I'm closing this issue since it isn't related to library itself. Our library doesn't modify styles, we operate with native code only.

LuisGarcia9000 commented 3 years ago

No cierren aun este bug, a mi me paso el mismo problema, en las pantallas con ScrollView estas aparecen en gris y no es posible cambiarlo. Buscando encontré que a otras personas les paso lo mismo y su deducción, quitando y poniendo librerias en el package.json, fue que la es la librería de "@blackbox-vision/react-native-mercadopago-px": "^0.6.2", es el problema. Sin esta libreria todo se ve normal, con esta libreria se ven grises los ScrollViews.

Lo probé y fue verdad.

Por favor revisen cual es el problema, ya que para nosotros es muy importante usar su libreria para la intergración con MercadoPago.

Aqui la referencia: https://github.com/facebook/react-native/issues/30232#issuecomment-720809657

JonatanSalas commented 3 years ago

Without a reproduction case we're not able to check where is the issue. We're currently using this library in some of our apps in production with the latest version of react-native, and we're not dealing with this issue.

Version 0.6.2 is deprecated due to an issue with promises management.

jmlacruz commented 3 years ago

Hi @JonatanSalas and @manutuero thank you for your answers. According to your comments, the error could be in the react-native or react-navigation version. Could you tell me, in the projects you have done, which version of these packages you are using? Because the error in the styles started after I ran npm i at some point. So I think it's a conflict between the new versions of those packages.

jmlacruz commented 3 years ago

No cierren aun este bug, a mi me paso el mismo problema, en las pantallas con ScrollView estas aparecen en gris y no es posible cambiarlo. Buscando encontré que a otras personas les paso lo mismo y su deducción, quitando y poniendo librerias en el package.json, fue que la es la librería de "@blackbox-vision/react-native-mercadopago-px": "^0.6.2", es el problema. Sin esta libreria todo se ve normal, con esta libreria se ven grises los ScrollViews.

Lo probé y fue verdad.

Por favor revisen cual es el problema, ya que para nosotros es muy importante usar su libreria para la intergración con MercadoPago.

Aqui la referencia: facebook/react-native#30232 (comment)

Es verdad lo que dices, me paso igual, al quitar el paquete los estilos se veian correctamente, el detalle es que originalmente cuando instale el paquete funcionaba todo perfecto, entonces en algun punto con la actualizacion de algun paquete es que entraron en conflicto los estilos. Lo que pienso es que debe haber una version anterior de los paquetes en que todo funciona perfecto, estoy buscando que numero de version es en la que eso ocurre. Porque tambien necesito este paquete para procesar mis pagos, que ya lo venia haciendo normalmente.

JonatanSalas commented 3 years ago

@jmlacruz @LuisGarcia9000 we've added a section explaining how to fix this issue:

https://github.com/BlackBoxVision/react-native-mercadopago-px#in-android-background-color-turns-gray

We're going to review, but it isn't a priority in our backlog, since we've more things to get done.

fervailanti commented 3 years ago

@jmlacruz @LuisGarcia9000 we've added a section explaining how to fix this issue:

https://github.com/BlackBoxVision/react-native-mercadopago-px#in-android-background-color-turns-gray

We're going to review, but it isn't a priority in our backlog, since we've more things to get done.

Hi Jonatan. as I say in #30232, I have the same issue, but I am not using the BlackBoxVision library, I am using mercadopago/px-android as a native module, so, probably the issue is related to mercadopago itself.

About your workaround in https://github.com/BlackBoxVision/react-native-mercadopago-px#in-android-background-color-turns-gray, I see you only refer to the gray background issue in FlatList and ScrollView, but there is also a bigger issue related to the Text lineHeight where I still don't find any workaround, it is mentioned here.