React-native-router-flux: 0.25 Support

Considering the NavigationExperimental bugs (FYI https://github.com/aksonov/react-native-router-flux/issues/557) I'm not sure if it makes sense support RN0.25. Should we skip .25 and move to RN0.26?

RN26 (https://github.com/facebook/react-native/releases/tag/v0.26.0-rc) fixed some NavigatorExperimental bugs, such as https://github.com/facebook/react-native/commit/81c62c5f41da2e34f0c0e19ca38843918c23c32b

Man I was really hoping 0.25 would include the recent NavigationExperimental fixes. Can anyone confirm that 0.25 didn't touch NE at all?

@cridenour it seems like it didn't. Replace routes still didn't work for me after the upgrade, and I also observed the "route state changes but view doesn't update" bug. Hanging back at RN24 and router-flux 2.x for now.

Also, React Native 0.25 changes how the imports are done from

import React, { Component, View } from 'react-native';

to

import React, { Component } from 'react';
import { View } from 'react-native';

https://github.com/facebook/react-native/releases/tag/v0.25.1

@thelordoftheboards #637

@cridenour Sorry I did not recognize the issue by reading the name.

@aksonov Looking for your thoughts. Let's skip RN.25 and invest all devo resources to RN0.26?

Any idea if/when RN 0.25 will be supported?

@aksonov is on a well deserved break, but I have to think we're going to wait for 0.26 as 0.25 did not include any NavigationExperimental fixes. Between the 0.24 branch and a few open pull requests, I imagine you could get pretty close though.

@cridenour Fair enough! Yeah I agree, waiting until 0.26 is probably the best option (:

Did anybody try 0.26-rc?

I have been able to run a knock off of the React Relay To Do (naturally with all the 0.25 import changes) example and it works great, I have not tried any navigator experimental features though so I cannot attest to how well they work.

So is .22 the latest stable or .24 is fine ?

0.24 and 0.25 are _mostly_ fine with the 3.24 branch but not stable

@sylvainbaronnet can you describe your App/Tests? Are you, for example, using Tabs?

I use a custom NavBar and a Drawer, I was using type="replace" but there's a bug currently so I only use type="push" with panHandlers={null} sometimes

I don't use Tabs but I know there's a critical bug discussed here : #489

@sylvainbaronnet - There's something wrong with the storage of state when using the 3.24 branch. So I wouldn't say it's stable at all!

For instance when I use Actions.routeName({type: 'push'}), the sceneName will not be added to the routes store.

I'm using RN 0.24.1

I did say it was not stable... although it works fine for me as temporary solution

Yeah I need the full power of RNRF, meaning tabs & replace & navigationState & static navigationBar, so v22 is pretty much a safe heaven for now. But it puts people who uses it more and more behind from the standpoint of the other packages that rely on earlier versions of react-native.

I hope everyone knows that the 2.x branch is stable and works great (fork and modify if you need to get rid of RN0.25 warnings). I'm using it right now and I miss nothing from 3.x.

If you want to use RN0.24/25 right now with a stable RNRF and not lose out on features, I highly recommend it.

How difficult is the 3.x upgrade path? Right now I have a hand-rolled
router but would like to switch to Redux, and cleaning up the router
logic would make that easier. I just don't know what my situation will
be if I start with 2.x when 3.X becomes compatible.

Thanks.

Upgrading from 2.x => 3.x is super easy. Just change Route to Scene, the name prop to key and remove your Schemas. There might be something else for features I haven't used, but that's it in a nutshell.

Can confirm that the current master branch is more stable than the 3.24 branch when using react-native 0.24.1

Fixes I've noticed:

• type: Replace, this will actually replace the previous scene and not show the previous scenes content.

Confirmed working:

• type: pop, works as expected

Problems:
As I was writing this, I noticed one major problem, I'll open up a new issue.
EDIT: I've fixed the problem, checkout my fork which is attached to the below (664) issue.

@jamesone could you try this PR instead of yours and see if it fixes the issue you ran into? https://github.com/aksonov/react-native-router-flux/pull/667

@joenoon Glad to see that you start working on 0.26-wip, i've made some fixes, Example seems to work good! I've got only strange warning:

@aksonov cool! i have a PR upstream for that warning: https://github.com/facebook/react-native/pull/7518

you could try silencing it for now:

console.ignoredYellowBox = ['Warning: Failed propType: SceneView'];

also working on what i think will be a better tab component, but will see what you did and we can compare notes

@aksonov check out https://github.com/joenoon/react-native-router-flux/tree/0.26-wip if you get a chance.

I didn't want to push that commit into your repo without first getting approval. I think that tab library is a big improvement since its smart about not rendering the content of the tab until the tab is active. It also seems to fix or avoid the issue I was running into with my app, where on load it was switching tabs as it was rendering.

Its also waiting on an upstream PR, so pointing at another fork of mine until that gets hopefully accepted.

@joenoon Looks good (after your fixes will be approved for navigator), have you checked Example project? Btw, i see NavigationView is removed from latest RN master, maybe we could do the same within 0.26-wip?

Another idea is to move TabBar to separate component and require setting component prop (so no default TabBar).

If we do remove the default TabBar, we should make sure it's included in the Example - because even though I use a custom one for various reasons, seeing how the default one changes in each release helps me keep up to date with the best ways to use DefaultRenderer.

@aksonov I started working off of the Example project. Do you know any nice way around needing to rm -rf node_modules/react-native-router-flux/ && npm i after every src change when working on the Example project? I know one way but its very hacky.

I've updated my 0.26-wip branch to make the tab/nav work out of the box a bit more, and added some examples of more advanced hide nav/tab tracking through the tree: https://github.com/aksonov/react-native-router-flux/compare/61ac6d3...4d8d369

NavigationView is no longer used anywhere in 0.26-wip, so thats great we got away from it before it was removed upstream.

I worry about not providing a default tab implementation. It seems like such a fundamental part of navigation and I don't really like the idea of everyone having to maintain their own implementation. I guess it depends on the goals of the project. I'd like to see something usable/customizable out of the box, but I could be swayed if there are strong arguments for it. I'm not a big fan of the reference implementation trend - it feels a little bit like punting sometimes.

@aksonov FYI i ended up finding a neat way to speed up the dev flow: https://github.com/joenoon/react-native-router-flux/commit/ea0a2603f344df637272ed2e7f9d839a1f41ee7b

@joenoon Fantastic, will try it! For now i just edited RNRF inside node_modules/react-native-router-flux and then copied it to RNRF own folder

Will you merge all things into 0.26-wip?

Ok, i agree about default tab bar, however be ready that it will raise more issues ;)

@aksonov 0.26-wip updated! Yes, I understand about the tab bar and issues :)

@sylvainbaronnet can you show your example about how to use rnrf(3.22.23) with drawer? My rn version is 0.24.1

@aksonov I believe react 0.26.0 is out.. Check https://github.com/facebook/react-native/releases, the latest tag is 0.26.0 half an hour ago.

@SudoPlz I can't seem to find it on npm. This is what I am seeing right now:

@aksonov Try now, its up!

Works pretty well with react-native-router-flux installed from git like this:

    "react-native-router-flux": "git+https://github.com/aksonov/react-native-router-flux.git",

My use cases, however, are trivial.

@joenoon @thelordoftheboards is there an easy way to specify in my package.json that I would like npm to install/use the 0.26-wip branch? I'd like to try .26 but would like to pick up some of the changes for .26 that are not yet in master. Thanks!

@anthonywebb SO Answer

"react-native-router-flux": "aksonov/react-native-router-flux#0.26-wip"

@Kerumen thank you!

Closing this. RN v26 is out and is supported by latest RNRF series v3.26.x