Compatibility issues with react-native-web 0.18

[johnf]

trafficstars

Description

There are some breaking chaneges in react-native-web 0.18.0 which cause compilation failures

CodeSandbox/Snack link

N/A

Steps to reproduce

Upgrade to react-native-web 0.18

NativeBase Version

3.4.6

Platform

• [ ] Android
• [X] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

https://github.com/GeekyAnts/NativeBase/blob/master/src/utils/useResponsiveQuery/useResponsiveQuery.web.ts#L2

'react-native-web/dist/exports/StyleSheet/createCompileableStyle no longer exists in version 0.18

[Viraj-10]

Hi @johnf, Thanks for reporting the issue. We will look into this issue. We will add support for 0.18 in a later version. for now you can use 0.17

[duro]

I'm eager to understand when this will land. We are running into issue with being unable to use certain latest versions of Expo modules which require react-native-web 0.18

[exneval]

really hope nativebase can work well with rnw 0.18.x updates

[johnf]

FYI if you use patch package to delete the relevant .web files, everything seems to work fine. No idea if this will cause any other issues. The RNW app I'm using this for isn't mission-critical for me, so caveat emptor for others.

[theonetheycallneo]

@johnf Mind posting your patch/** files from patch-package? We are running into the same issue. Error looks like this at the top:

Failed to compile.

/home/circleci/repo/node_modules/react-native/Libraries/Pressability/Pressability.js
Cannot find module: '../Utilities/Platform'. Make sure this package is installed.

You can install this package by running: yarn add ../Utilities/Platform.

"expo": "45.0.4",
    "expo-asset": "8.4.6",
    "expo-auth-session": "3.6.1",
    "expo-av": "11.2.3",
    "expo-gl": "11.3.0",
    "expo-linear-gradient": "11.3.0",
    "expo-localization": "13.0.0",
    "expo-random": "12.2.0",
    "expo-speech": "10.2.0",
    "expo-splash-screen": "0.15.1",
    "expo-status-bar": "1.3.0",
    "expo-structured-headers": "2.1.1",
    "expo-three": "6.1.0",
    ...
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.68.2",
    "react-native-web": "0.17.5",

[johnf]

native-base+3.4.9.patch.txt

@theonetheycallneo Attached - You might need to clear your babel cache before it works. I basically just remove the .web files

[danielantelo]

native-base+3.4.9.patch.txt

@theonetheycallneo Attached - You might need to clear your babel cache before it works. I basically just remove the .web files

applying this patch gets my app working again on latest expo 46, thanks!

[dohomi]

I'm looking forward to get this fixed. Especially in Expo the 0.18 has better support for live reload

[pors]

Is there an ETA for this? I'm guessing a large part of your users (the ones that use Expo) have this problem?

[Viraj-10]

We are working on this currently. Patch provided above won't affect most of the parts. although we suggest waiting for us to resolve this with a stable release. we have created an Issue on react-native-web for additional information. any suggestions and PR are welcome.

[Viraj-10]

Hi Everyone, We have released v3.4.12-alpha.1 for react-native-web 0.18 and expo SDK 46 support.

[likeSo]

Hi Everyone, We have released v3.4.12-alpha.1 for react-native-web 0.18 and expo SDK 46 support.

The newest version shows in the npm is still 3.4.12: native-base | Essential… | =surajahmedc… | 2022-08-12 | 3.4.12 | android

[Viraj-10]

Hi @likeSo, 3.4.12 is released just now with some hotfix. we have previously pushed rnw 0.18 changes with v3.4.12-alpha.1. So please specifically install this version for support for rnw 0.18 and SDK version 45 and above.

[pors]

Hi @likeSo, 3.4.12 is released just now with some hotfix. we have previously pushed rnw 0.18 changes with v3.4.12-alpha.1. So please specifically install this version for support for rnw 0.18 and SDK version 45 and above.

Works for me! Thanks @Viraj-10

The only thing is that icons and font sizes have changed. Not sure if this is related to NB though.

[lap888]

+1

[dohomi]

@Viraj-10 I updated the nativebase package inside of the template starter of solito and it breaks visually a few things with icons and images. Especially Expo is not starting any longer without errors.

[Viraj-10]

Hi @dohomi, Can you provide some more details? Like Error logs and some snapshots for icons and images.

[dohomi]

Hi @Viraj-10 I just figured out that there are several open PR to actually get the solito starter up and running. After manually going through the PRs I got the template up and running. I think best would be to merge the open PRs that things like image paths and package.json is working out of the box.

[Viraj-10]

Hi @dohomi, Thanks for letting us know. We will merge them soon after testing.

[dohomi]

@Viraj-10 currently the version breaks the Storybook example with expo 46. It seems to be fixed for expo but not in combination with Storybook

[johnf]

@Viraj-10 Which of the changes in 3.4.12 was supposed to fix the issue?

I'm still seeing the same problem

Failed to compile.

Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/createCompileableStyle' in '.../node_modules/native-base/lib/module/utils/useResponsiveQuery'
ERROR in ./node_modules/native-base/lib/module/utils/useResponsiveQuery/useResponsiveQuery.web.js 8:53-127
Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/createCompileableStyle' in '.../node_modules/native-base/lib/module/utils/useResponsiveQuery'

ERROR in ./node_modules/native-base/lib/module/utils/useResponsiveQuery/useResponsiveQuery.web.js 10:40-101
Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/i18nStyle' in '.../node_modules/native-base/lib/module/utils/useResponsiveQuery'

ERROR in ./node_modules/native-base/lib/module/utils/useResponsiveQuery/useResponsiveQuery.web.js 12:15-74
Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/compile' in '.../node_modules/native-base/lib/module/utils/useResponsiveQuery'

ERROR in ./node_modules/native-base/lib/module/utils/useResponsiveQuery/useResponsiveQuery.web.js 14:44-109
Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/styleResolver' in '.../node_modules/native-base/lib/module/utils/useResponsiveQuery'

webpack compiled with 4 errors

[johnf]

nm. Just realised the changes are in the alpha and not the release version. I've tested the alpha and all compiles nicely now. Will post again if I notice any other issues

[RicardoBrito1938]

Just commenting here, indeed the best option for now is to keep with react-native-web 17, i will be checking in how i can help with some pr

[Viraj-10]

Hi All, current PR in v3.4.12-alpha is temporary fix. We are working on stable fix which doesn't require rnw private files. we have released a alpha for those who wants to checkout expo 46 and rnw 0.18.

[Luca-Settle]

"native-base": "~3.4.12-alpha", this version should work with expo 46? my project is still crashing Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

[michalpanek]

Do you have plans to update version 2.x of native-base to fix this issue as well? Or the only option (besides some possible maybe existed hacks) to use expo sdk 46 is to upgrade from version 2.x to 3.x?

[inform880]

@Luca-Settle I just installed from the source branch, worked for me for a temp fix:

npm i git+https://github.com/GeekyAnts/NativeBase.git\#fix/react-native-web0.18

[YukiOmori]

@inform880 It worked! Thanks!

[Nasseratic]

@Viraj-10 Any plans to release the fix?

[zivc]

This fixed it for me thank you @inform880

[Viraj-10]

Hi All, This issue will be fixed in the next release of native-base. sorry for the delay.