Comments (20)
For those who are looking for a quick drop in I've thrown together an implementation of this using the new FlatList component, you can find the code here: https://github.com/nickcharles/react-native-invertible-flat-list
from react-native-invertible-scroll-view.
FlatList now has an inverted
prop
from react-native-invertible-scroll-view.
The issue with ListView is that it is already deprecated since 0.43 and also that no pullrequests got merged anymore, even those from Januar 2017, with the argumentation that it is deprecated.
from react-native-invertible-scroll-view.
It appears that the children are being passed differently to the create element function for the scrollview in virtualizedlist. You can modify that code to make it work or for now you can make a quick fix in your renderitem function. Just wrap the child in a view with the style {
transform: [
{ scaleY: -1 },
],
}
from react-native-invertible-scroll-view.
@braco don't think so, I'm going to continue using what I wrote. I'll update it for 0.45 next week.
from react-native-invertible-scroll-view.
Really nice work with react-native-invertible-flat-list, @nickcharles. Works great.
from react-native-invertible-scroll-view.
There's also this StackOverflow answer which worked really well for me: https://stackoverflow.com/questions/43399343/inverting-a-flatlist#_=_
from react-native-invertible-scroll-view.
We haven't tried it at all. My guess is that it won't work, I'm not sure if FlatList supports composing scroll views yet. If it does, it wouldn't be too hard to get this component working with FlatList.
from react-native-invertible-scroll-view.
@ide since react native will be transitioning to FlatList in the next few months are there plans in the future to expand this library to FlatList as well?
from react-native-invertible-scroll-view.
I tried it and is somewhat works. I'm testing against Android however and issue #33 is stopping me from testing it fully. Is there any thought as to what is causing 33 to help get it up to speed for the flatlist?
from react-native-invertible-scroll-view.
No current plans to support FlatList -- it's not something I'm against but also don't have as much of a need compared to other projects.
from react-native-invertible-scroll-view.
I've tried it out with the new FlatList-Component and it isn't working well.
- The rows are drawn upside down (even the text)
- the Event "onViewableItemsChanged" usually returns exactly those rows, that are currently visible while scrolling. When using InvertableScrollView the FlatList returns ALL rows in this event with the first rendering, regardless whether they are visible or not
Any ideas?
from react-native-invertible-scroll-view.
@jpshelley how did you make it work?
from react-native-invertible-scroll-view.
There are improvements to FlatList in the latest release, does this unblock anything?
https://github.com/facebook/react-native/releases/tag/v0.45.0
from react-native-invertible-scroll-view.
@lorenzsell that's exactly what my package does =)
from react-native-invertible-scroll-view.
?????
from react-native-invertible-scroll-view.
Given the inverted
prop on FlatList, should that be the preferred method of creating inverted scroll lists now?
from react-native-invertible-scroll-view.
Yeah, I would use the built-in prop if that works well.
from react-native-invertible-scroll-view.
I would also encourage using that instead of custom libraries.
from react-native-invertible-scroll-view.
Also faced upside down issue.
Update: used FlatList
's inverted
prop, removed this lib, and modified scrollToXxx
methods. works fine now.
from react-native-invertible-scroll-view.
Related Issues (20)
- Stange render issue on [email protected]
- Support for React Native v0.40 HOT 1
- Readme example has some errors
- Invertible scroll "compacting" rows HOT 4
- How to achieve that content is rendered starting from the screen top when first chat like wechat? HOT 2
- height combined with other components.
- Using Clipboard on inverted list gives wrong item data? HOT 2
- How to add support to section headers? HOT 1
- keyboard avoid problem
- react-native-invertible-scroll-view not working on Huawei Android 7 devices. HOT 4
- How can I have access to the SectionID ? HOT 1
- Doesn't work with single long component
- Opens Bottom Problem HOT 5
- Not using the props style
- Bundling failed: SyntaxError: A trailing comma is not permitted after the rest element HOT 3
- trouble with creating a horizontal rtl list in react native
- Bad scrolling with Android Pie 9 and Pixel 2 XL HOT 3
- Add project deprecation warning to the ReadME? HOT 1
- check the end of list in InvertibleScrollView?
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-invertible-scroll-view.