Skip to content

propose cleaner, more familiar usage patterns#2

Closed
aarongreenwald wants to merge 1 commit into
masterfrom
suggested-usage
Closed

propose cleaner, more familiar usage patterns#2
aarongreenwald wants to merge 1 commit into
masterfrom
suggested-usage

Conversation

@aarongreenwald
Copy link
Copy Markdown
Contributor

This PR modifies the example app to encourage/propose a usage pattern that is more familiar to React Native developers, feels less invasive, and better highlights some of the power of this solution by showing how it can be used to create a clean separation of concerns between multiple modules in the same application.

  • The app is initialized with a navigator that knows what tabs/drawers to create, and imports modules that provide a single function that registers their screens. These modules might even be npm modules, developed in different repositories and by entirely separate teams. The modules' only responsibility to the navigator is that they namespace their screen names to ensure uniqueness and that they export a function that registers all their pushable screens.
  • A screen's implementation should look like a regular React Native Component. A developer working on a project using react-native-navigation should feel at home immediately and adoption shouldn't feel like a lot of change. The README doesn't seem very scary, but looking at the example made me kind of wrinkle my nose a bit. :)
    • It's unnecessary to import everything that is being pushed all the time. (It's also not possible, because some of the pushed screens are in different modules. You know the screen's name and that's it.)
    • You still need to extend Screen instead of Component. I'm considering ways around this, but I'm not sure it's a good idea so we'll come back to this. If we come up with a way to use this solution declaratively we'll probably be able to get rid of the Screen business along with all uses of this.navigator.
  • It wasn't immediately obvious to me that you only need to extend Screen if you want to reference the navigator inside the screen. You can push any component if it's registered, regardless of type. I'm not sure how often people have screens that don't do any navigation, but I suppose it could happen. I think clarifying this reduces the amount of mysterious magic going on.

I might be missing something in the implementation that makes my proposal back recommendation. If this isn't feasible or if you think it's not a good idea, let me know.

@talkol
Copy link
Copy Markdown
Contributor

talkol commented Mar 18, 2016

Unrelated to this PR, I added full redux support. When doing so, I had to change the API slightly to handle redux connected components easily. I updated example according to the new API style, let me know if this change achieves the same purpose as your suggestion:

https://github.com/wix/react-native-navigation/blob/master/example
https://github.com/wix/react-native-navigation/blob/master/example-redux

@aarongreenwald
Copy link
Copy Markdown
Contributor Author

@talkol I like what you did in the two examples, I think they are both much better and achieve the same results plus more, so I'm closing this. Thanks!

@aarongreenwald aarongreenwald deleted the suggested-usage branch March 20, 2016 12:16
guyca pushed a commit that referenced this pull request Apr 9, 2017
* adding support for android centered title and custom font

* PR feedback
guyca pushed a commit that referenced this pull request Apr 9, 2017
* adding support for android centered title and custom font

* PR feedback
jstheoriginal pushed a commit to jstheoriginal/react-native-navigation that referenced this pull request Jul 17, 2017
…-support

Added requiresFullScreen param to LightBox.
legildas pushed a commit to crazybaud/react-native-navigation that referenced this pull request Mar 7, 2018
yogevbd pushed a commit that referenced this pull request May 2, 2018
* feat: support a “modal” prop for tabbed ios apps

* fix: apply temp fix for react-native-navigation#1502 (#1)

* fix: enable fab icon scaling (#2)

* v1.1.340 [ci skip]

* Update FloatingActionButtonCoordinator.java

* Update top-level-api.md

* Update package.json
reimertz pushed a commit to mavencook/react-native-navigation that referenced this pull request Sep 14, 2018
* feat: support a “modal” prop for tabbed ios apps

* fix: apply temp fix for react-native-navigation#1502 (#1)

* fix: enable fab icon scaling (wix#2)

* v1.1.340 [ci skip]

* Update FloatingActionButtonCoordinator.java

* Update top-level-api.md

* Update package.json
shalehaha pushed a commit to shalehaha/react-native-navigation that referenced this pull request Dec 15, 2018
JustinKasad pushed a commit to JustinKasad/react-native-navigation that referenced this pull request Mar 27, 2019
added try/catch to avoid app crashing during multi screen load
alpamys-qanybet added a commit to alpamys-qanybet/react-native-navigation that referenced this pull request Oct 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants