Navigation in React Native Web

[@Chocoholic1337]

Really enjoying the series so far. I really like hearing your thought process throughout the development cycle. Keep it up! :)

[@brunohplemos]

About DevHub's navigation, the most "complex" file is ModalRenderer.tsx, which is like a "StackNavigator". It handles which modal will be visible and handle the animations between each modal transition (slide from left if big screen, from bottom if small screen, push transition between modal scerens, etc). It uses react-spring for the animations. If the project needs to be URL-based, maybe it's easier to use some existing solution. You can use a different navigator for web and mobile if you want the best of both worlds.

[@bawad]

Yeah, I ended up going with react router because the web/native API is almost exactly the same. But react-navigation > react-router-native

[@brunohplemos]

On a more complex project I would probably use react-router on web and react-native-navigation on mobile, and maybe write a thin layer to increase code sharing. This is fine because you can have some .web.tsx and .native.tsx files only with the navigation code. So no need to limit ourselves with bad cross platform solutions.

[@bawad]

I agree that seems like the best way to go

[@SogMosee]

Hello Ben, at 5:40 , what is the vim command you used to change the next three words? I know C changes the entire line, ce changes the entire word, and vi + #w, then c can select multiple words then change, but how did you instantly change the following 3 words preceding the closing tag?

[@bawad]

c3w that would change 3 words but I probably used: ct< Which is change until you hit the "

[@pankajmundra7814]

Hi can you please create a video for How to make a sticky view in react native web....I tried scrollview stickyindices but it's not working.

[@impzeropvp]

Why are the "WorkoutHistory" and "CurrentWorkout" screens put into the "modules" directory when they are actually screens? (in other words, why don't you rename the folder "modules" to "screens") Am I missing something?

[@bawad]

screens is a good name too

[@frankcooke576]

How about using an enum for the routes instead of that type?

[@bawad]

I like that idea

[@egoratrubnikov]

Why do you use 'useContext' hook and not 'useObservable' hook from 'mobx-react-lite'?

[@bawad]

Because we just want to share the instance of our mobx class

[@itsMapleLeaf]

Hey Ben, you should consider using the root store pattern (mobx.js.org/best/store.html#combining-multiple-stores ). Then you could have just _one_ context, then make a custom hook for accessing all stores through that context, e.g. `const { workoutStore } = useRootStore()`

[@bawad]

Thanks for the tip! So would it be: const RootStoreContext = createContext({ navStore: new NavStore(), workoutStore: new WorkoutStore() }) const { workoutStore } = useContext(RootStoreContext)

[@itsMapleLeaf]

@@bawad Precisely c: Though you might want to consider declaring the root store as a class, so you can pass "this" to each of the stores, for easy cross-store access. class RootStore { workoutStore = new WorkoutStore(this) navStore = new NavStore(this) } const RootStoreContext = React.createContext(new RootStore()) Might not be necessary here, but something to keep in mind for later if needed

[@bawad]

Oh that's a nice trick 👌

[@cunningham.s_law]

are you gonna be the next terry a davis?

[@bawad]

maybe

[@MrREALball]

You could've used something like const isWeb = Platform.OS === 'web'; const RouterPackage = isWeb ? require('react-router-dom') : require('react-router-native); const Router = isWeb ? RouterPackage.BrowserRouter : RouterPackage.NativeRouter; export Router; export default RouterPackage; I think its the best way for routing atm

[@bawad]

I think I might of tried doing something like that, but couldn't get it to work.