v3 - rework

[PedroBern]

@andreialecu @alexpchin

rework with reanimated v2

[github-actions[bot]]

The Expo app for the example from this branch is ready!

expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-41

[alexpchin]

Hi @PedroBern Before integrating thisreact-native-collapsible-tab-view, I started doing something similar to this. Initial thoughts (not problems, just thoughts).

• Scrolling on the header will only work when you touch the Header, if the header included Touchables, it might cause a problem?
• Due to nestedScrollEnabled, the inner scroll will need to be connected to the outer scroll.
• I thought there was a warning about VirtualizedLists should never be nested inside plain ScrollViews but as the components are Animated, this might not apply

I will look in more detail later, I'm trying to implement the current version into an app (without any bugs) so that it can be pushed live. Once that is done, I can come back to this!

[PedroBern]

Scrolling on the header will only work when you touch the Header, if the header included Touchables, it might cause a problem?

The recent push can scroll anywhere. Don't know about touchables yet.

I thought there was a warning about VirtualizedLists should never be nested inside plain ScrollViews but as the components are Animated, this might not apply

It does not apply here because we have the following structure:

_ Vertical Scrollview Horizontal Flatlist <- would have the warning if we don't have this intermediate component ____ Vertical Flatlist

Check out the new expo preview, now there are 2 examples, in the second one we can see all tabs at once, which makes it easy to develop.

[alexpchin]

_ Vertical Scrollview Horizontal Flatlist <- would have the warning if we don't have this intermediate component ____ Vertical Flatlist

Isso é muito sorrateiro.

[PedroBern]

@alexpchin removed the top level scrollview. Now it is very performant, (not reusable yet, just a demo).

I removed the sync scroll offsets. It's translating just the header now. Not sure if it's good or bad for the user experience, what you think?

[PedroBern]

I'm canceling this PR.

[PedroBern]

sorry for taking your time

[alexpchin]

@PedroBern No problem!

[PedroBern]

@alexpchin @andreialecu v3 is ready, just need to update the README, now all animations/scrolls are done in the UI thread with reanimated.

Can someone please run the preview on iOS and give me feedback? I tested only on android.

New features:

• diffClamp
• diffClamp with animated snap (instead of scroll snap)

Removed

• react-native-tab-view
• react-navigation support (sorry @andreialecu)

[andreialecu]

I can take a look in a couple of days. Would probably stay on v2 for the current project though as that has been working well so far.

Lacking react navigation support would be a blocker anyway.

Do you plan on adding it back later?

[PedroBern]

That would be nice, thanks.

We definitely can add it back later.

Right now the v3 does not even come with a tab bar, the user must provide a custom one, but there is a nice example in the examples folder, a simplified version of the material one.

But the performance gains were fantastic, all computations are done in the UI thread now. Including the scroll sync and snapping. In v2 all these computations are done in the JS thread and that was causing a bug where the tabs do not sync. It was reported for at least 4 people and me, one has even sent a reproducible snack.

[alexpchin]

Going to review this tomorrow, time permitting. Nice work @PedroBern

[PedroBern]

Now we have real lazy support in v3.2

With react-native-tab-view it was an issue.