Comments (9)
I was able to fix the glitch in #12. I propose we keep the custom snapping code and if someone wants to override they can use disableSnap: true
and their own custom snap offsets.
from react-native-collapsible-tab-view.
I guess one reason for using the custom snap code is the ability to override the snapThreshold
.
The native snapToOffsets
prop has improved behavior and stops momentum scrolling at the snap points, so the header doesn't peek through before snapping back, which may be preferable. Also snapToEnd
needs to be set to false.
from react-native-collapsible-tab-view.
May need to verify that it doesn't break cases when the tab content slightly overshoots the window size by less than the snap offset, so it doesn't get stuck offscreen with the list snapping back and not allowing access to it.
from react-native-collapsible-tab-view.
The snapToOffsets
indeed looks like a better solution.
from react-native-collapsible-tab-view.
I did a quick test on the examples folder, adding snapToOffsets={[0, HEADER_HEIGHT]}
to all scrollable components and running on the Collapsible Tab View no snap
demo, wich has disableSnap={true}
, and it looks like working fine for scroll view, but does not work for flatlist.
The flatlist snaps the header and itself.
from react-native-collapsible-tab-view.
Weird. It works with FlatList in the app I'm working on with no issues. I didn't test the examples folder though, something must be different.
from react-native-collapsible-tab-view.
@PedroBern make sure to also add snapToEnd={false}
otherwise the snap points keep repeating for the rest of the list, resulting in weird scrolling behavior.
from react-native-collapsible-tab-view.
@PedroBern make sure to also add snapToEnd={false} otherwise the snap points keep repeating for the rest of the list, resulting in weird scrolling behavior.
😝 forgot, I will try it again later
from react-native-collapsible-tab-view.
@andreialecu Can you make a review of #11, please? There was one thing I didn't understand, after fixing #8 and moving to snapToOffsets
if I didn't add this line, the albums tab would double in height.
from react-native-collapsible-tab-view.
Related Issues (20)
- Invalid onScroll event for Tabs.ScrollView
- Does this work on React Native Web? HOT 1
- Programmatically show header when `revealHeaderOnScroll={true}`
- Make AnimatedPagerView style customizable
- Is there a way to prevent scroll being lost when scrolling through dynamic tabs in collapsed state?
- Is it possible to reveal header on tab change? HOT 1
- Turbo repo - pnpm installation - getting `TypeError: deepEqual is not a function (it is Object)` HOT 3
- Great component! HOT 1
- ExampleComponentSharedPullToRefresh ios bug
- How to make the title slide without having to collapse into a page
- Collapsed header
- How to programatically switch tabs? HOT 2
- Header is reseting when switching to 5th tab from 1st tab HOT 4
- Nested TabViews HOT 1
- change the indicator style HOT 4
- No content rendered when the tab navigation is inside a ScrollView. HOT 3
- VirtualizedList missing HOT 1
- In Recent update if we use Lazy then all content in tabs goes blank.(BUG) HOT 1
- Cannot read property 'stateNode' of undefined when using Tabs.Flatlist
- Slide Flickering in Android also the state changing every index
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-collapsible-tab-view.