✨Upgrade React Navigation to V5 ✨ #311

harrisrobin · 2020-02-07T03:51:45Z

This PR upgrade react-navigation to v5 while maintaining all the functionality such as navigation state persistence & back button handler.

✅ upgrade to react-navigation v5
✅ migrate existing back button handler and navigation persistence to the recommended way of doing it in V5.
✅ use react-native-safearea-context instead of SafeAreaView

Demo

This project was generated using Bowser with my changes to include React Navigation V5:
https://github.com/harrisrobin/ignite-bowser-react-navigation-v5

… does not

…on/stack,native

…tton

nirre7 · 2020-02-07T07:47:11Z

Just curious, if I have an ignite based app with react-navigation 4.x and upgrade the app to use react-navigation v5 will this be seamless for production apps or will they crash or "loose" the route state?

harrisrobin · 2020-02-07T15:04:34Z

Just curious, if I have an ignite based app with react-navigation 4.x and upgrade the app to use react-navigation v5 will this be seamless for production apps or will they crash or "loose" the route state?

I don't think it will be "seamless" because we are now storing navigation state separately and not part of the MobX store. You would probably want to reset the user's storage or version your stores so that you can easily migrate them just to be sure.

chakrihacker · 2020-02-08T07:13:24Z

@harrisrobin that's a well-crafted PR, any reason why mobx is not used to store navigation state, is it because react-navigation already provides a way to do that?

harrisrobin · 2020-02-09T18:33:25Z

@harrisrobin that's a well-crafted PR, any reason why mobx is not used to store navigation state, is it because react-navigation already provides a way to do that?

It's not possible to do it anymore in v5 and is not recommended by the react-navigation team.

fortydegrees · 2020-02-11T16:20:40Z

This woulod be great to be integrated. Has anyone been able to get this to work? I've struggled, though left an 'issue' on the repo.

harrisrobin · 2020-02-11T17:14:58Z

This woulod be great to be integrated. Has anyone been able to get this to work? I've struggled, though left an 'issue' on the repo.

@fortydegrees you can always generate a project using this branch to test it.

git clone git@github.com:harrisrobin/ignite-bowser.git
ignite new <YOUR_BOILERPLATE_NAME> -b /full/path/to/cloned-boiler-plate

fortydegrees · 2020-02-12T10:00:05Z

Can confirm that this update works seamlessly!

jamonholmgren · 2020-02-12T19:21:18Z

@harrisrobin Can you run yarn ci:test on your local machine and see if you can replicate the issues that CI is reporting?

robinheinze

@harrisrobin This is really great, thorough PR. Really nice work 🎉 I just mentioned one super tiny change, since I think it might break model generators, but otherwise it looks awesome.

boilerplate/app/models/root-store/root-store.ts

robinheinze · 2020-02-12T21:43:26Z

@harrisrobin Actually, you might also want to double check the screen and navigator generators. The screen one inserts the new screen into the root navigator so I think this would introduce some changes there, and the generated navigator will look different as well.

bhaveshdaswani93 · 2020-02-20T03:52:54Z

any updates when this PR is going to be merged

harrisrobin · 2020-03-11T20:35:26Z

@osamaaamer95 @robinheinze done in c58583a

osamaaamer95 · 2020-03-12T11:22:31Z

@harrisrobin what about paddingBottom on this line? I think once the app has been wrapped in <SafeAreaProvider /> you can simply import <SafeAreaView /> from react-native-safe-area-context and use that as the wrapper here: const Wrapper = props.unsafe ? View : SafeAreaView

I am using this in a project (couldn't wait for this PR to be merged) and it works as expected.

harrisrobin · 2020-03-12T14:45:24Z

@harrisrobin what about paddingBottom on this line?

I am using this in a project (couldn't wait for this PR to be merged) and it works as expected.

I personally don't handle paddingBottom in screen, just the notch. What's your use-case for that?

I think once the app has been wrapped in <SafeAreaProvider /> you can simply import <SafeAreaView /> from react-native-safe-area-context and use that as the wrapper here: const Wrapper = props.unsafe ? View : SafeAreaView

I prefer to use the hook instead. The ternary with View/SafeAreaView causes typescript to complain when passing certain props.

osamaaamer95 · 2020-03-12T14:55:38Z

The use-case is on Android where content goes under the transparent/translucent navigation bar if no padding is applied.

viralS-tuanlv · 2020-03-28T09:03:33Z

i saw this pr not enough to ready merge

@harrisrobin

# [5.0.0](v4.14.3...v5.0.0) (2020-03-29) * ✨Upgrade React Navigation to V5 ✨ (#311 by @harrisrobin) ([f68ec23](f68ec23)), closes [#311](#311) ### BREAKING CHANGES * * React Navigation upgraded to version 5, a backwards incompatible change * Navigation state is no longer handled in MobX-State-Tree * Removed `NavigationStore` * Navigation state is now handled in React hooks (also persisted to async storage) * Back button handler is a hook now rather than a component * Added `react-native-safe-area-context` wrapping the primary navigator * Removed `ignite g navigator` generator * Screen generator no longer tries to add the new screen to a navigator

infinitered-circleci · 2020-03-29T23:46:32Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

anasjaghoub · 2020-05-05T07:17:27Z

@harrisrobin @robinheinze
Thanks for your great efforts and this amazing boilerplate that really helps getting started with react native.

I've noticed that in this ticket you've removed NavigationStore. I would love if you can help me by providing an example for navigating with params between screens. I was following this tutorial https://reactnavigation.org/docs/MST-integration/#overview
However I've found you've removed the NavigationStore, so my question is it for a reason? what's the alternative way? and if you can update the demo application to provide an example for navigating with params like models / snapshots.

jamonholmgren · 2020-05-05T22:50:34Z

@anasjaghoub Thanks for your comment -- we're working on some additional examples and documentation as well as a blog post!

anasjaghoub · 2020-05-06T09:08:42Z

that's great @jamonholmgren can't wait for it! Best wishes.

harrisrobin added 14 commits October 14, 2019 04:17

feat(mobx-react): swap out mobx-react for mobx-react-lite

b7e1801

fix(typo) mobx-react-lite not mobx-react-light

cd3a977

init CONTRIBUTING.md

7d1c635

(chore): remove integration test line in Contribution doc

3b1d450

remove ignite build badge

fdb685b

Merge branch 'master' of github.com:infinitered/ignite-bowser

23774f8

remove language around linter having to comply to standard since ours…

69b1243

… does not

Merge remote-tracking branch 'upstream/master'

4f665ba

upgrade to react-navigation v5

8d3b05f

revert package.json that was accidently copied

75156b7

remove react-navigation lib from package.json and add @react-navigati…

cd375b1

…on/stack,native

fix removed variable in app.tsx for APP_NAME

6b6e58f

revert if statement in demo-screen.tsx.ejs

f7971c8

revert if statement for conditional detox testId in welcome-screen bu…

821362b

…tton

harrisrobin requested review from jamonholmgren and leonskim February 7, 2020 14:56

add screen tracking example

82f24c5

jamonholmgren requested a review from robinheinze February 12, 2020 19:16

robinheinze suggested changes Feb 12, 2020

View reviewed changes

boilerplate/app/models/root-store/root-store.ts Outdated Show resolved Hide resolved

fix ejs tag issue causing integration test to fail

d00ac1d

harrisrobin added 2 commits March 11, 2020 16:27

fix lint errors

435a9a5

add react-native-safearea-context

c58583a

harrisrobin added 7 commits March 11, 2020 16:53

chore: styling

e7b98e5

fix yarn compile errors

e6bdc42

fix lint errors

0459044

fix safeareacontext version for expo

f6ff324

use safe area context whether we're using expo or not

501cd9f

remove trailing space from generators-integration.test.ts:40

5581edb

default export app from app.tsx

0aad12c

robinheinze approved these changes Mar 11, 2020

View reviewed changes

hedgerh mentioned this pull request Mar 14, 2020

Upgrade to latest React Navigation? #320

Closed

harrisrobin added 3 commits March 21, 2020 12:41

resolve merge conflicts

a93fa85

fix screen generator

a2b16f1

deprecate navigator generator

b0ec426

harrisrobin added 2 commits March 28, 2020 12:27

remove screen generator

9267674

remove screen generator from docs

ff0da15

jamonholmgren approved these changes Mar 29, 2020

View reviewed changes

Add back in screen generator

df7a4f4

jamonholmgren merged commit f68ec23 into infinitered:master Mar 29, 2020

infinitered-circleci added the released label Mar 29, 2020

✨Upgrade React Navigation to V5 ✨ #311

✨Upgrade React Navigation to V5 ✨ #311

Uh oh!

Conversation

harrisrobin commented Feb 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo

Uh oh!

nirre7 commented Feb 7, 2020

Uh oh!

harrisrobin commented Feb 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chakrihacker commented Feb 8, 2020

Uh oh!

harrisrobin commented Feb 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fortydegrees commented Feb 11, 2020

Uh oh!

harrisrobin commented Feb 11, 2020

Uh oh!

fortydegrees commented Feb 12, 2020

Uh oh!

jamonholmgren commented Feb 12, 2020

Uh oh!

robinheinze left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

robinheinze commented Feb 12, 2020

Uh oh!

bhaveshdaswani93 commented Feb 20, 2020

Uh oh!

harrisrobin commented Mar 11, 2020

Uh oh!

osamaaamer95 commented Mar 12, 2020

Uh oh!

harrisrobin commented Mar 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

osamaaamer95 commented Mar 12, 2020

Uh oh!

viralS-tuanlv commented Mar 28, 2020

Uh oh!

infinitered-circleci commented Mar 29, 2020

Uh oh!

anasjaghoub commented May 5, 2020

Uh oh!

jamonholmgren commented May 5, 2020

Uh oh!

anasjaghoub commented May 6, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

harrisrobin commented Feb 7, 2020 •

edited

Loading

harrisrobin commented Feb 7, 2020 •

edited

Loading

harrisrobin commented Feb 9, 2020 •

edited

Loading

harrisrobin commented Mar 12, 2020 •

edited

Loading