javascript - How to create Twitter like profile layout?

Question

I am trying to create Twitter like profile layout in React Native. Although many apps use this pattern. My current JSX setup is something like this.

• Header (profile)
• ViewPagerNav (custom)
• ViewPager
  • Tab with ListView
  • Tab with ListView

Problem is that only bottom part scrolls. I have seen this problem for many React Native apps. Is there a solution for this?

How should my render view look like to g full get page scrolling?

Answer 1

There is actually a really good example of this in the F8 app. The 3 files you want to look at are here:

https://github.com/fbsamples/f8app/blob/master/js/tabs/schedule/MyScheduleView.js https://github.com/fbsamples/f8app/blob/master/js/common/ListContainer.js https://github.com/fbsamples/f8app/blob/master/js/common/PureListView.js

If you want to see how it works in the app it is the My F8 tab.

The basic idea is that the ListContainer keeps track of the scroll position via the handleScroll function. It passes handleScroll to all of its children renaming the function to onScroll.

The PureListView a it takes that onScroll property via the object spread operator {...this.props} and passes it into the ListView.

That is all just to keep track of the scroll. If you look in MyScheduleView.js you can see how it is mostly implemented.

Hope that helps.