Lazy loading for scrollable Tabs during mounting and rendering. #303

code-smith · 2016-06-09T22:53:11Z

Made code changes to mount only initial tab when loaded and lazily mount other tabs whenever selected. By default it mounts all tabs at once.
Once all tabs are mounted, only renders selected tab instead of all tabs.

…t tabs only when clicked for first time and render only selected tabs

skv-headless · 2016-06-10T07:05:58Z

index.js

@@ -18,6 +19,28 @@ const TimerMixin = require('react-timer-mixin');
 const DefaultTabBar = require('./DefaultTabBar');
 const ScrollableTabBar = require('./ScrollableTabBar');

+class StaticContainer extends Component{


https://github.com/facebook/react-native/blob/master/Libraries/Components/StaticContainer.js
why not this?

i dint know about this. Logic's no different. Let me know, i can change it if you insist

I was going to paste this as well. There is an entire subproj: https://github.com/reactjs/react-static-container. Should use that instead of you own.

@cancan101 I'll change it in the final submission. Appreciate if you can give feedback on other part of logic and test it's effectiveness .

@cancan101 @skv-headless i made changes and used the external component mentioned, package.json had to be changed.

@cancan101 were you able to implement lazy rendering of selected tab without static container from outside library?

skv-headless · 2016-06-10T07:26:00Z

I need some time to understand this. Please be patient. I thought about it. We can't solve everything for user. For ex

Lazy should be optional (for me it is working good without laziness)
What to show before tab loaded (loader, white view, some image)
Use static container or not.

Also it is possible to do outside the library to control everything.

code-smith · 2016-06-10T08:49:24Z

Let me chip in.
#1. Lazy mounting cannot be done outside the Library at all. Lazy mounting can only be done within the library.
Though it's good to give an option whether to lazy mount or not i don't think it would be of much help.
Mounting all tabs at once can really slow down your application and if it you application isn't heavy to slow down then it would definitely not slow down with lazy mount enabled.
So why give such option? And why mount all tabs initially?
I think its more of requirement now to lazy mount/load form performance point of view. I know i'm strongly opinionated here.
If lazy load option needs to be given then i can make some code changes. Though i still believe tabs should only be mounted lazily, for the component to be high performing.

#2. What to show before tab loading, is something thats very application specific and can/should be done outside the library for each tab. It's something user can/should do within his tab (child).

#3. Using Static container is a good practice that improves performance when there are multiple views. why re-render what's not selected when the user's intention is to view only what he is selecting?
Rendering all can get very expensive and its a very bad behaviour and i strongly believe static container should be implemented.
Mounting all children at once happens only once initially but rendering keeps happening every time user scrolls and its very very bad to render all children.

As far as features that can be done outside the library:
#1 Lazy Mounting cannot be controlled outside library, hence the motivation to change the code.
#2 Loaders and spinners etc can and should be done by user specific to his/her application requirement outside the library, I don't think we should worry about this.
#3 I was not able to render tabs only for selected tabs from outside the library, @skv-headless please give an example.

skv-headless · 2016-06-11T18:27:52Z

package.json

@@ -28,6 +28,7 @@
  },
  "homepage": "https://github.com/brentvatne/react-native-scrollable-tab-view#readme",
  "dependencies": {
+    "react-static-container": "^1.0.1",


I think it shipped with react-native try like here https://github.com/facebook/react-native/blob/50c2467905815dbb434beecd0e649fb4a7bc2e20/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js#L16

https://github.com/facebook/react-native/blob/50c2467905815dbb434beecd0e649fb4a7bc2e20/Libraries/react-native/react-native.js
https://github.com/facebook/react-native/blob/50c2467905815dbb434beecd0e649fb4a7bc2e20/Libraries/Components/StaticContainer.js
Though it is shipped in the code, its not exported to the main ReactNative object.
It's not working like in the tabbarios, so had to do it from external component(i think its an offical release , not sure)
@skv-headless Please suggest alternative if not that plugin.I would like to wrap this whole thing today itself

skv-headless · 2016-06-11T18:28:27Z

Please fix eslint warnings

skv-headless · 2016-06-11T18:32:59Z

index.js

  renderScrollableContent() {
    if (Platform.OS === 'ios') {
+      let scenes=[]


I think this code same for both platforms. Please create a function or component instead of duplicating code.

…tion

skv-headless · 2016-06-12T14:03:57Z

index.js

+          <SceneComponent
+          key={key}
+          style={{width: this.state.containerWidth, }}
+          selected={selected}>


I think selected is unnecessary variable, just write false here.

it's needed in the _.keyExists case, where it's value is changed to true if its current page

skv-headless · 2016-06-12T14:11:50Z

Sorry that I'm so picky but it helps me to understand code

code-smith · 2016-06-12T14:13:04Z

It's cool, You'd like to maintain consistency. Will make changes.

skv-headless · 2016-06-12T14:13:13Z

SceneComponent.js

+
+const StaticContainer = require('react-static-container');
+
+class SceneComponent extends Component {


stateless component would be awesome here like this one https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/Button.ios.js

code-smith · 2016-06-12T16:18:50Z

All changes done. Let me know

oubushixb · 2016-06-15T05:41:00Z

great work!

skv-headless · 2016-06-15T18:48:09Z

index.js

@@ -96,8 +105,26 @@ const ScrollableTabView = React.createClass({
    }
  },

+  updateSceneKeys(children, sceneKeys = [], currentPage) {


Is this the same as?

sceneKeys.concat([this._makeSceneKey(children[currentPage])])

No.not even close.

Is this correct if sceneKeys would be a Set?
I'm looking to log and this function add a key of currentPage to sceneKeys
What is the difference?

yes, distinct keys, which are added only on first time scroll/click.
Lets say out of 5 given tabs, user goes to tab2 for the first time from initial tab tab 1, and then tab3 for the first time ,now you have 3 keys .User doesnt open tab4/5 but goes back to tab2 again, then new key shouldnt be added, only 3 keys should be present. Only when user scrolls to tab4/5 for the first time keys for tab4/5 should be added. Once #keys === #children, its not updated anymore

skv-headless · 2016-06-15T18:55:23Z

index.js

+    if(this.props.children.length !== this.state.sceneKeys.length) {
+      let newKeys = this.updateSceneKeys(this.props.children, this.state.sceneKeys, pageNumber);
+      this.setState({currentPage: pageNumber, sceneKeys: newKeys, });
+    }else{


eslint error. Could you please fix this

skv-headless · 2016-06-15T18:57:56Z

Could you please squash and rebase commits?

code-smith · 2016-06-15T19:19:29Z

@skv-headless please be responsive, this is taking a lot of my time. mind sharing email or skype to finish this quickly. I'm spending way too much time on this

skv-headless · 2016-06-16T05:50:58Z

Your changes in master

code-smith · 2016-06-16T05:52:24Z

Amazing!! Hope it helps others too :)

skv-headless · 2016-06-16T05:53:37Z

It will. Thanks

code-smith · 2016-06-16T08:06:46Z

When can we have an npm release of this updated version?

lalatgithub · 2017-04-27T16:10:14Z

wasn't this merged and updated on npm? i really need this... having 2 tabs with network calls

code-smith added 2 commits June 10, 2016 01:59

Lazy mouting and rendering of tabs when selected.Changes made to moun…

85177e3

…t tabs only when clicked for first time and render only selected tabs

ios changes

c451582

This was referenced Jun 9, 2016

Lazy scrollable tab view #70

Closed

Use StaticContainer to prevent re-renders of hidden pages #232

Closed

skv-headless reviewed Jun 10, 2016
View reviewed changes

used staticcontainer component

4eebe1c

skv-headless reviewed Jun 11, 2016
View reviewed changes

merging from examples branch , code changes done as per owners sugges…

fbea7b1

…tion

skv-headless reviewed Jun 12, 2016
View reviewed changes

Code changes as suggest by owner

417c892

eslint fix

0f81fc4

skv-headless reviewed Jun 15, 2016
View reviewed changes

code changes as suggested

5d49787

skv-headless closed this Jun 16, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy loading for scrollable Tabs during mounting and rendering. #303

Lazy loading for scrollable Tabs during mounting and rendering. #303

code-smith commented Jun 9, 2016

skv-headless Jun 10, 2016

code-smith Jun 10, 2016

cancan101 Jun 10, 2016

code-smith Jun 10, 2016 •

edited

Loading

code-smith Jun 10, 2016 •

edited

Loading

code-smith Jun 11, 2016

skv-headless commented Jun 10, 2016 •

edited

Loading

code-smith commented Jun 10, 2016 •

edited

Loading

skv-headless Jun 11, 2016

code-smith Jun 11, 2016

skv-headless commented Jun 11, 2016

skv-headless Jun 11, 2016

code-smith Jun 11, 2016

skv-headless Jun 12, 2016

code-smith Jun 12, 2016 •

edited

Loading

skv-headless commented Jun 12, 2016

code-smith commented Jun 12, 2016

skv-headless Jun 12, 2016

code-smith Jun 12, 2016

code-smith Jun 12, 2016

code-smith commented Jun 12, 2016

oubushixb commented Jun 15, 2016

skv-headless Jun 15, 2016

code-smith Jun 15, 2016

skv-headless Jun 15, 2016 •

edited

Loading

code-smith Jun 15, 2016 •

edited

Loading

skv-headless Jun 15, 2016

skv-headless commented Jun 15, 2016

code-smith commented Jun 15, 2016

skv-headless commented Jun 16, 2016

code-smith commented Jun 16, 2016

skv-headless commented Jun 16, 2016

code-smith commented Jun 16, 2016

lalatgithub commented Apr 27, 2017 •

edited

Loading


		const StaticContainer = require('react-static-container');

		class SceneComponent extends Component {

Lazy loading for scrollable Tabs during mounting and rendering. #303

Lazy loading for scrollable Tabs during mounting and rendering. #303

Conversation

code-smith commented Jun 9, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

code-smith Jun 10, 2016 • edited Loading

Choose a reason for hiding this comment

code-smith Jun 10, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skv-headless commented Jun 10, 2016 • edited Loading

code-smith commented Jun 10, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skv-headless commented Jun 11, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

code-smith Jun 12, 2016 • edited Loading

Choose a reason for hiding this comment

skv-headless commented Jun 12, 2016

code-smith commented Jun 12, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

code-smith commented Jun 12, 2016

oubushixb commented Jun 15, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skv-headless Jun 15, 2016 • edited Loading

Choose a reason for hiding this comment

code-smith Jun 15, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skv-headless commented Jun 15, 2016

code-smith commented Jun 15, 2016

skv-headless commented Jun 16, 2016

code-smith commented Jun 16, 2016

skv-headless commented Jun 16, 2016

code-smith commented Jun 16, 2016

lalatgithub commented Apr 27, 2017 • edited Loading

code-smith Jun 10, 2016 •

edited

Loading

code-smith Jun 10, 2016 •

edited

Loading

skv-headless commented Jun 10, 2016 •

edited

Loading

code-smith commented Jun 10, 2016 •

edited

Loading

code-smith Jun 12, 2016 •

edited

Loading

skv-headless Jun 15, 2016 •

edited

Loading

code-smith Jun 15, 2016 •

edited

Loading

lalatgithub commented Apr 27, 2017 •

edited

Loading