search

software-mansion-labs / react-native-turbo-demo

React Native Turbo - an open source library that can bring your turbo-enabled web application into the React Native world.
MIT License
105 stars 11 forks source link

Upgrading to latest react-native 0.73 #80

Closed krschacht closed 7 months ago

krschacht commented 10 months ago

I can tell you guys are updating this project. It's currently in a state where it won't build and run properly, but if I go back to the latest tagged commit then things work.

While upgrading the example app, are you planning to upgrade its react native version to the latest 0.73 or is there an inherent incompatiblity? I pulled your repo and am trying to do it myself but I've not been able it.

pfeiffer commented 10 months ago

I expect the library to be compatible with RN 0.73 - we're currently using it in a project built with Expo 49. Expo SDK 50, due to be released in January, uses RN 0.73.

krschacht commented 10 months ago

@pfeiffer I created a fresh RN 0.73 project and basically re-implemented your example app within it (using react-native 0.73 package) and I got it working. So you are right — no fundamental compatibility issues. I'm trying to do the same with Expo 50 so I can try to integrate this with the new file-based router. Have you done any work to re-factor the routing code in your /example app to use the new file-based expo routing?

krschacht commented 10 months ago

I spent all day trying to get the /example app working in a fresh Expo 50 install and a fresh Expo 49 install. I can't get it working with either. I'm really stumped because I'm not getting an error message, it's just that the WebView is not rendering the contents (nor making any request to the server). I have the exact same code working in a bare create-react-native RN 0.73 project but I cannot get it working in a bare expo-49 project.

Could you try creating a bare expo-49 app and get /example working in it? I think that would be a really helpful reference, not just for me, but for others too.

This is exact sequence of commands I did:

npx create-expo-app ExampleExpo49 --template blank-typescript@49
npm install -g eas-cli
npx expo install expo-dev-client
eas login
eas build
eas build --profile development --platform ios
npx expo start

I install the development client on a real device, scan the QR code from expo start, and at this point the sample template app is running in.

After that I added in the /example project:

Screenshot 2023-12-21 at 6 23 28 PM

The tabs work at the bottom but I can't get anything to load in the Web Screen. I've hacked away at this all day, trying lots of different tactics to debug. Oddly, I do basically the exact same steps in a bare react-native-0.73 project and it works.

pklatka commented 10 months ago

Hello @krschacht, I've created a bare Expo app (with npx create-expo-app --template bare-minimum), and everything seems to be working fine. Check out this repo. Although I haven't tested it with Expo Go, webview accurately displays the content when running the app on a simulator (npm run ios). Please note that I'm using gitpkg to obtain libraries (react-native-turbo and react-native-web-screen).

krschacht commented 10 months ago

@pklatka This is incredibly helpful, thanks! I am not sure what I was doing different on my end. On theory I had was that I was running XCode 14.x so I also upgraded that to 15.1. But regardless, your repo worked for me so I'm now over this hump. I really appreciate the time you took to create that repo.

However, I did encounter a three small bugs with your repo, as-is, when using the glitch demo app you pointed to. This is when I went through all the options on the Turbo Native Demo. The first bug is probably known, but I think the second two are legit bugs:

  1. The strada "Form example" worked, but the "Menu example" did not. I think that you may not have implemented this native component yet so it still falls back to the web-based menu. You probably already know about this.
  2. The "Turbo scroll restoration" does not work quite right. You go to the long demo page, scroll way down, tap "Navigate to another screen", it moves forward, then you go back and it has restored the scroll position on the really long demo page, but then you go back again to get to the "Turbo Native Demo" home menu and you find it's scrolled you all the way to the bottom of this page too. It's a subtle bug, but I think this may be a bug with your RN Turbo Native wrapper code in that it's not properly remembering which single page to apply the scroll position restoration too. (screen recording of the bug)
  3. After the sequence of actions I described above (in 2) I'm back at the Turbo Native Demo homescreen. There is some issue with how the previous screen is unloaded when the Back button is tapped because when I tap to go back to "Turbo scroll restoration" I get this native error. I know it's complaining about "Fallback", and I realize that's being used because there isn't an explicit route setup for the scroll demo, but try the same thing with "Navigate to another webpage" (which uses the One route/screen) and it does the same thing. Tapping back and then revisiting triggers the error. I tried to debug this by adding a link back to the home screen (rather than using the back button) and that avoids the issue. So it's something to do with how screens are unloaded with Back: 
    
ERROR  The screen 'Fallback' was removed natively but didn't get removed from JS state. This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.

Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens. at NativeStackViewInner (http://10.0.0.127:8081/index.bundle//&platform=ios&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app:144188:22) at RNCSafeAreaProvider


([screenshot of this error](https://share.zight.com/d5u2l7p5))
krschacht commented 10 months ago

@pklatka I have fixed the Menu example and the Overflow Menu example by adding those two Strada components. I just emailed you about this. I would like to help you make this overall react-native-turbo project better, if you would like help. I emailed you at contact@klatka.it so take a look

pfeiffer commented 8 months ago

Should work with RN 0.73 now - we use it via Expo SDK 50.

pklatka commented 7 months ago

Everything should work properly for RN 0.73 - see the turbo-demo-expo-example app in examples directory.