Native filter tabs

[noumantahir]

Current filter system is used more like button to shift state causing posts feed to re-render posts list items. This causes a momentary lag in app performance.

Expected behavior The transition from one tab to another should be instantaneous. just like bottom navigation tabs only in this case it should change posts filter.

Additional context The idea is to replace button based filter tab with actual native tabs with built-in cache functionality.

Ideally the new system will use most of the same codebase as available postsContainer and sub components

Checklist

• [x] promoted posts
• [x] user switching hooks - (buggy when switching user while in non feed tab)
• [x] double tap to scroll up
• [x] load posts from storage on startup
• [x] handling logout
• [x] Make hide Images button functional
• [x] scheduled new posts check
• [x] Fix memory leak on component unmount
• [x] fix missing keys issues
• [x] traverse on scroll event back to component parent
• [x] post tabbedPosts to profile screen
• [x] port tabbedPosts to community pages
• [x] port tabbedPosts to tag results pages

[noumantahir]

A quick status update regarding native filters...

So far we have,

• Implemented basic tabs with clean filter change implementation.
• Ported load posts routine to it's separate sub-class under tabbedPosts
• Ported our reducer as it is from postsContainer and organised it better along with some cleaning.

Only drawback we have in our current implementation is the fact when a list is updated, the chagne is not register thrown by reducer, to make it force throw a change callback, I am copying state Object.create(state) and returning it back, not the most efficient solution but is done only for experimentation for now.

Status Update Log https://user-images.githubusercontent.com/6298342/113621976-cb3c5180-9675-11eb-9e2a-277a0a0a3b4a.mov

The recording is from an android phone running in debug mode, release mode performance will be even better for sure.

ref: https://github.com/ecency/ecency-mobile/tree/nt/native-filters

[noumantahir]

Status Update The feed screen is now useable with most of primary functions like,

1. pagination
2. refresh
3. logged out view
4. empty list view for friends and communities tabs

Pending Items

• [x] 1. promoted posts
• [x] 2. user switching hooks
• [ ] 3. double tap to scroll up
• [ ] 4. new posts check
• [x] 5. load posts from storage on startup

Video https://youtu.be/ZDgcxsvxw-k

[noumantahir]

@feruzm please if you get a change feel free to update the ToDo/Pending items to list of feed screens functionalities... it's a big component, very easy to miss something from tests.

[noumantahir]

@feruzm checkout this issue related to promoted posts fetch on tab change...there is a glitch when new promoted posts is rendered in place of previous post because of image height calculation. this should affect our previous builds as well...

However if user move to other tab for the first time, the glitch do not affect anything as expected.

https://user-images.githubusercontent.com/6298342/114015269-efb94900-9882-11eb-8999-d1fb3ea0cd94.mov

[noumantahir]

Suggestion 1: we keep the current structure but fix height of promoted post, it will remove the glitch in no time.

Suggestion 2: we fetch updated promotions on list end callback and stack promoted posts just like regular posts. this will make sure user get new ads as they scroll down

[feruzm]

@noumantahir

1. You mean have fixed size for height of promoted posts?
2. You mean on first list end callback we show all promoted posts? Promoted posts should be showing every 3 item on list, so right now limit 20 means we should have at least 6 promoted post until first list end callback.

[noumantahir]

@feruzm

1. yes
2. if we remove refresh ads on tab change, we will have same old list of ads, what I am suggesting is we add more ads to promotedPosts array when all ads are displayed so user see new ads as scrolling down instead of not showing at all

[noumantahir]

Status Update

• [x] 1. promoted posts
• [x] 2. user switching hooks - (buggy when switching user while in non feed tab)
• [ ] 3. double tap to scroll up
• [ ] 4. new posts check
• [x] 5. load posts from storage on startup
• [x] 6. handling logout

[noumantahir]

Updates

• [x] promoted posts
• [x] user switching hooks - (buggy when switching user while in non feed tab)
• [x] double tap to scroll up
• [x] load posts from storage on startup
• [x] handling logout
• [x] Make hide Images button functional
• [x] scheduled new posts check
• [x] Fix memory leak on component unmount
• [x] fix missing keys issues
• [ ] port tabbedPosts to profile screen
• [ ] port tabbedPosts to community pages
• [ ] port tabbedPosts to tag results pages

[noumantahir]

Updates

• [x] port tabbedPosts to community pages
• [x] port tabbedPosts to tag results pages

Pending

• [ ] port tabbedPosts to profile screen - scroll issues, tab change issues

[noumantahir]

attempting to make use of this package...

https://github.com/zyslife/react-native-head-tab-view

[noumantahir]

skipping head-tab-view for now, documentation is very confusing and is not well written package

[noumantahir]

• [x] port tabbedPosts to profile screen

  Know issues

• tab change issue while scrolling

  Creating an issue on ScrollableTabView repo

  Update: seems it's a know issue created here... https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/964

[noumantahir]

Finally! fixed weird unresponsive tab change while scrolling issues by discarding nested scrollview in favour of stacked tab bars.

The final implementation is surprisingly more clean may even be more efficient as there are not nested tab bars.

Only thing I dislike the fact there are 2 tabs for each stack when viewing your own profile, that does not look as promising compared to 3 - 2 stacked tabs

https://user-images.githubusercontent.com/6298342/114520448-e0f3dd00-9c5a-11eb-8c55-ee97c70de1bb.mov

[noumantahir]

@feruzm

My suggestion: We can do non stacked 3 tabs [Posts, Blogs, Replies] for user's profile and keep other profiles stacked..

[feruzm]

@noumantahir lets move Blog to 1st line of tabs and remove sub tabs ? My only concert is that, can these tabs if 3-4 items fit nicely in smaller screen sizes. We can of course make Wallet tab as icon so it takes lesser space when viewing other people's account.

[noumantahir]

let me try.. we can also try removing image icon perhaps... we already have images toggle button in feed screen

[feruzm]

good point, on profile page that's (view change toggle) probably not necessary

[noumantahir]

@feruzm single profile tab bar on small to large screens, codes pushed as well..

[feruzm]

after update from previous version, I launched app and this is what I got... For example, Top filter at first loaded posts and then showing spinner, it did stop but on other tabs it is not stopping so there is likely some bug or cache update logic that's not working.

https://user-images.githubusercontent.com/3015990/114842475-8c2e9e80-9de1-11eb-9247-4c0867466fc4.MP4

[noumantahir]

could be something introduced because editable tag update as it did required tweak to tabbedPost... will debug