luna icon indicating copy to clipboard operation
luna copied to clipboard

feat(404, web-linking): nested web linking, clean URLs, 404 page

Open mikehardy opened this issue 3 years ago • 3 comments

Who knew web-compatible navigation would be subtle? I did not.

I need to handle these things though, and none were handled with this template or my previous knowledge:

  • deep links
  • 404 pages
  • web compatible routing (that is: URL <--> route name correspondence) with nested navigators

So after reading the react-navigation docs about deep linking and playing with it here I got it all working: https://reactnavigation.org/docs/configuring-links/

Features used:

  • nested linking config (but react-navigation types are busted there? I had to ts-ignore. Haven't logged it yet) https://reactnavigation.org/docs/configuring-links/#handling-nested-navigators

  • URL 'cleaning' on our default first screen path https://reactnavigation.org/docs/configuring-links/#omitting-a-screen-from-path

  • 404 / catch all routing: https://reactnavigation.org/docs/configuring-links/#handling-unmatched-routes-or-404

If you like this and merge it, I think it handles all of the navigation cases that I've come across as I build and QA the web part of my work projects. Took a while to get there!

mikehardy avatar Dec 06 '21 05:12 mikehardy

I think this might do it for a while, I'm done with base layer stuff that was missing as I worked through final features this weekend

I don't think it belongs in this template because there's no react-native-paper integration and that's a very opinionated thing to add - but wait until you come across the fact react-native-web is simply missing react-native Alert component :fearful:

https://github.com/necolas/react-native-web/issues/1026#issuecomment-986430291

Maybe adding a small web shim here would make sense though? Like https://github.com/necolas/react-native-web/issues/1026#issuecomment-687572134

Hard to say. I went full react-native-paper so I used react-native-paper-alerts which wraps the app in a "Portal" with a Provider and lets you get themed dialogs with buttons and everything, so I'm not motivated to do anything different at this layer

mikehardy avatar Dec 06 '21 05:12 mikehardy

this one is definitely not ready by the way - but the current deployed version is also whacky on github.io :-), it strips the '/luna' part of the URL. react-native-firebase-auth-example also has some issues. I've nearly got my work project launched then I'm going to sleep a couple days :sleeping: so this can wait. It's close to working though - I didn't have to advance knowledge too much in order to get it working for real at the higher layers

mikehardy avatar Dec 06 '21 18:12 mikehardy

I've nearly got my work project launched then I'm going to sleep a couple days 😴 so this can wait. It's close to working though - I didn't have to advance knowledge too much in order to get it working for real at the higher layers

😂😂 Haha, don't worry, it's open source, no time pressure, right? Have your days of sleep, I'm sure you deserve them. If you need any help, just let me know 👌

LunatiqueCoder avatar Dec 06 '21 18:12 LunatiqueCoder