IMPORTANT: v4 beta release is ready (v3 is not supported anymore)

[aksonov]

Please check latest 4.0.0-beta.* , Example as demo:
https://github.com/aksonov/react-native-router-flux/tree/v4

V4 Features:

• Based on latest https://reactnavigation.org API
• Separated navigation logic from presentation. You may change now navigation state directly from your business logic code - stores/reducers/etc. navigationStore
• Built-in state machine (former Switch replacement) - each ‘scene’ has onEnter/onExit handlers.
• MobX-powered, all used scenes are wrapped as 'observer' automatically. You may subscribe to navigationStore (former Actions), observe current navigation state, etc. If you are using Redux, you still could pass your reducer factory to createReducer param for Router.
• Flexible nav bar customization, that is not allowed by react navigation right now:
  How to customize the back button in Stack Navigator react-navigation/react-navigation#779
• Built-in reactnavigation drawer support (use drawer attribute for Scene and contentComponent to use your own Drawer)
• 'Lightbox' support (used by popups like Error alert within Example project)

Breaking changes (comparing to v3):

1. No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop:
   https://reactnavigation.org/docs/navigators/custom

2. No support for partial hiding of tab bar for some tabs because of react navigation bug:
   Cannot read property 'setNativeProps' of undefined react-navigation/react-navigation#1584

3. No possibility to skip animation during reset/replace:
   How to reset the navigation stack without animation? react-navigation/react-navigation#1493

4. Switch is removed - you may use onEnter (or just on) / onExit handlers for more flexible logic. They could be async functions. Success termination of onEnter will run success handler, failure handler will be run otherwise. You can pass just state keys to success/failure too. This way you can create very complex state machine and don't use Switch or navigation from componentDidMount.

5. getSceneStyle is removed (no needed in v4).

6. Custom reducer (‘createReducer prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.)

7. Drawer is 'drawer' attribute Scene

8. Modal is 'modal' attribute for Scene

9. No flux 'focus' actions - use onEnter/onExit handlers instead.

As you can see React Navigation still contains some issues, but anyway it is more stable than obsolete 'react-native-experimental-navigation' used by v3 now.

Here is link about road to v1 (so you can see all issues at one place):
react-navigation/react-navigation#723

[Kennytian]

Good news, I love you!!

[hungdev]

i love you.

[isAlmogK]

How do you install version 4, I'm not seeing a tag or release for it?

[aksonov]

It is with 'beta' tag. Latest beta for today is 4.0.0-beta.5

[southerneer]

@AlmogRnD in package.json it would be:

"react-native-router-flux": "^4.0.0-beta.5",

[isAlmogK]

Thanks this is perfect

[aksonov]

Master is replaced with v4 now. v3 is moved to 'v3' branch.

[guysegal]

Amazing Work!

I have a few questions though:

1. When is documentation for v4 is expected? Will it contain a tutorial for migration from v3 to v4?

2. if a future release of react-native will break something in v3, will it be fixed in v3 patch releases?

Thanks

[aksonov]

@guysegal

1. We will start working on it next week. Yes, eventually migration tutorial will be created too - actually most API is the same, differences are already listed. Feel free to submit PRs, it is open-source project. Follow me on github/twitter to get updates.

2. If community will submit PR/patch I will publish new v3 revision.

[eseQ]

@aksonov awesome. But i have one q: why mobx in dependencies?

[aksonov]

@dictory mobx manages navigation state and reload navigators after state changes.

[isAlmogK]

Hi off topic have you had a chance to look at my githup issue with redux been stuck and can't move forward

…

On Jul 9, 2017 23:24, "Pavel Aksonov" ***@***.***> wrote: @dictory <https://github.com/dictory> mobx manages navigation state and reload navigators after state changes. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1974 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKWI6WV67Cc7UfOZmFjIdEe2ulQCPXYks5sMcOwgaJpZM4OOgfQ> .

[aksonov]

@AlmogRnD Will do it today.

[isAlmogK]

Thanks appreciate it, getting behind

…

On Jul 9, 2017 23:27, "Pavel Aksonov" ***@***.***> wrote: @AlmogRnD <https://github.com/almogrnd> Will do it today. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1974 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKWI1YiJnxYbHD5yl7PTtK9n5u4RIJRks5sMcRDgaJpZM4OOgfQ> .

[bragur]

Beautiful! How about further drawer attributes, like drawerPosition, initialRoutename etc.? Where or how would they be declared?

[aksonov]

@bragur Check beta.7, you could define it as Scene props for drawer now

[aksonov]

My lighting talk proposal about RNRF v4 version:
https://gist.github.com/aksonov/e2d7454421e44b1c4c72214d14053410

[itinance]

Can you explain pls the following statement:

Built-in reactnavigation drawer support (use drawer attribute for Scene and contentComponent to use your own Drawer)

In the API-documentation i've found nothing about it.

Is the new drawer-Attribute simply a boolean setting to true when a scene is managed by a drawer? I understood, that contentCOmponent is the attribute where to pass the final Drawer-Component is it was with "drawer" in v3

[aksonov]

@itinance Please check Example project to see new drawer syntax.

[aksonov]

I've just updated 'migration' docs about drawer.

[saimonmoore]

@aksonov I just upgraded a really simple app from v3 to v4 (4.0.0-beta.17) and navigation just stopped working (no errors or anything in the console). I checked the breaking changes and migration file but I didn't see anything that affected my app so I haven't really changed anything. Not sure how to proceed:

(onPress for each song would execute this: const goToSongScene = () => Actions.song({song: this.props.song});). The callback executes but the Action call does nothing.

Is there anything there that you can see offhand? Or tips to go about debugging this?

Very much appreciate any help with this.
Thanks.

[saimonmoore]

Nm thanks, I switched to react-navigation pure

[antonsivogrivov]

Tell me please, what is better (v3 or v4) to use for production with redux?

[waqas19921]

@aksonov Please provide a better documentation for v4 as in example The components Lightbox, modal are used and there is no documentation about them and also many changes in props but have nothing documented.

[tejacoder]

how to add icon in v4 ?

[eseQ]

Anyone can write migration guide like webpack

[aksonov]

@waqas19921, @dictory Yes, v4 lacks of documentation and we are trying to improve it. Unfortunately we have lack of maintainers now.

Guys, this project is open source, feel free to check sources and submit PR for docs. Guys, let's improve open source, not just use it for free.

@tejacoder Check Example project and existing docs. If still not clear, create separate issue.

All, I'm closing this ticket (original aim was just to make announce), create issue (and better with PRs) if any.