React-native-router-flux: react-native-scrollable-tab-view is slow when put inside a scene

[yaronlevi]

Version

Tell us which versions you are using:

• react-native-router-flux v3.31.0
• react-native v0.29.0

Expected behaviour

Actual behaviour

When using react-native-scrollable-tab-view and putting it inside a scene, switching between tabs is slow: the underline that sits under the selected tab is moving not smooth enough.

When react-native-scrollable-tab-view outside a scene, the bar moves more smoothly.

Steps to reproduce

1. Clone https://github.com/yaronlevi/tabsslow
2. Run on Genymotion(android) or device (Nexus 5)
3. In render() comment/uncomment "return tabs()" to see the difference in the tabs underline animation.

[cridenour]

Hey @yaronlevi this is interesting. If possible could you fork the Example app and add this component to it so we can test it as you have configured? Definitely shouldn't be happening.

[yaronlevi]

Hi, I've updated "Steps to reproduce". please ask me if you need more info.
Thanks

[hopglascock]

@yaronlevi did you turn off dev mode? react-native-scrollable-tab-view always stutters for me unless I turn that off

[simontong]

I'm having same issue with one scene loading a bunch of components. With or without debug mode on is the same staggering effect on the tabs.

[yaronlevi]

OK, I found the problem.
The problem is me being a total beginner in RN for not knowing to:
Turn off DEV SETTINGS -> JS Dev Mode
After turning it off everything is smooth and cool.
Sorry for bothering the contributors (-:

[MovingGifts]

@yaronlevi Where did you find/how can I get to DEV SETTINGS -> JS Dev Mode?

[hopglascock]

@MovingGifts
On android from the dev screen it's under DEV SETTINGS -> JS Dev Mode
On IOS you cannot change it on the device you can change the flag on this line in AppDelegate

NSString *fullURL = [NSString stringWithFormat:@"%@%@", testURL, @"index.ios.bundle?platform=ios&dev=true"];

when you do that you might get this problem https://github.com/facebook/react-native/issues/8663

probably not the best solution, but I don't know of a better one

[ruandao]

got the same problem on iOS
when I turn on "Debug JS Remotely", the Actions.xxx() be in very slow

[kumarpatel]

@yaronlevi Could you share your implementation of react-native-scrollable-tab-view integrated with react-native-router-flux?