bartonhammond/snowflake

How to navigate/transition between pages?

Closed this issue · 10 comments

I am new to React. Here are questions.
1.
In example the App class decides what component to render: Login or Profile(Tabbar) depending on state value. How to make nice transitions between screens while using the redux?
2. In example the TabNavigator is used which does not follow the redux thing. Can I integrate Navigator or ExNavigator with Redux, or this makes no sense?

I'm using react-native-router-flux (aka RNRF) in my app and it works great. I made the following modifications in Snowflake to support it:

  1. Define navigation schema and routes in the snowflake.js file. This also allows you to define the animations during view transitions.
  2. Replace Snowflake's Tabbar implementation with built-in version from RNRF. I was able to add Tabbar icons using react-native-vector-icons.
  3. I modified app.js to navigate directly to Register (or Login) after startup.
  4. Navigate using "type: replace" to Tabbar screen after registration/login. This ensures that Tabbar is now the root in the navigation tree.
  5. Navigate back to Register (or Login) using "type: replace" when user logout.
  6. Although there may be another way, I ended up separating Snowflake's single Login container into 3 separate containers (i.e. Register, Login and Password) which in turn calls a common rendering component. I found this was necessary because after user does a successful Register or Login, there is an extra render on the Login module in the "LOGIN_STATE_LOGOFF" state which temporarily flashes a slightly different render screen before app.js calls the Tabbar.js container.

Thank you @wookiem
Do you have any example which you can share?

Can you share how snowflake.js and app.js look like?

Sure. Give me a few hours.

@wookiem I like what you've done - it makes good sense.

Any chance you could do a PR?

Hi Barton. Yes, that's even better since I think most will benefit from the
changes.

On Monday, 7 March 2016, Barton Hammond notifications@github.com wrote:

@wookiem https://github.com/wookiem I like what you've done - it makes
good sense.

Any chance you could do a PR?


Reply to this email directly or view it on GitHub
#74 (comment)
.

Ok, I've submitted the PR with the changes. I'm not familiar with Jest, so some of my changes ended up breaking the current jest test scripts. Barton, not sure if you can take a crack at updating the jest tests. If not, I might have time to revisit next week.

I'll look at everything tomorrow. Thanks very much for this effort!

That works. Thanks Barton.

Thanks @wookiem - Good job! There were some, but few, corrections required. You might look at the diff and see what changes I made.
Again, thanks!

Thanks Barton. I'll check out the diffs when I get a chance.