expo / react-native-invertible-scroll-view Goto Github PK
View Code? Open in Web Editor NEWAn invertible ScrollView for React Native
License: MIT License
An invertible ScrollView for React Native
License: MIT License
Hey! Awesome work on this module.
I'm trying to autoscroll a specific cell to the bottom of the view, which requires measuring the offset of that cell relative to the ListView container.
Naively, I added an onLayout
property to my "child" views (returned from renderRow
), but unfortunately the x
and y
values come back as 0
. This is because they are 0
, relative to my cell's immediate parent:
<View style={inversionStyle}>{child}</View>
Your inverted view is what I really want to measure. I tried other methods (including measureLayoutRelativeToParent
) to no avail.
I hacked my way around this in my fork by adding onLayout
to your wrapper view and passing the dimensions (along with the index of the row) back up to the parent:
<View style={inversionStyle} onLayout={ev => this.props.onCellLayout(idx, ev.nativeEvent.layout)}>{child}</View>
It works, but maybe you know of a cleaner way?
hi @ide,
when using refreshControl
with inverted, i.e
<InvertibleScrollView
inverted={true}
refreshControl={this._renderRefreshControl()}
/>
the refreshControl
is rendered at the bottom of the screen.
is there a way to render it on the top of the screen?
I use react-native-invertible-scroll-view
with NavigatorIOS
class GiftedMessengerExample extends Component {
render(){
return (
<ListView
ref='listView'
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderFooter={this.renderLoadEarlierMessages}
style={this.styles.listView}
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
/>
);
}
}
class Nav extends Component{
render(){
return (
<NavigatorIOS
style={{flex:1}}
initialRoute={{
title: 'flex:1',
component: GiftedMessengerExample
}} />
);
}
}
and it has a invalid space at the bottom of listView
Is there a way to implement a scrollToTop
method? I can scrollTo(0) to get to the bottom but could you advice how to get to the top? Thanks.
ERROR in ./~/react-native-invertible-scroll-view/~/react-native-clone-referenced-element/cloneReferencedElement.js
Module build failed: SyntaxError: /path/to/custom-react-native-app/node_modules/react-native-invertible-scroll-view/node_modules/react-native-clone-referenced-element/cloneReferencedElement.js: Unexpected token (18:6)
16 | 'is not a function. Use a composable callback-style ref instead. ' +
17 | 'Ignoring ref: ' + originalRef,
> 18 | );
| ^
19 | }
20 | return React.cloneElement(element, config, ...children);
21 | }
at Parser.pp.raise (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.parseExprAtom (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
at Parser.pp.parseExprSubscripts (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
at Parser.pp.parseMaybeConditional (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:145:19)
at Parser.pp.parseMaybeAssign (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:112:19)
at Parser.pp.parseExprListItem (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:801:16)
at Parser.parseExprListItem (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:780:24)
at Parser.pp.parseExprList (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:789:20)
at Parser.pp.parseSubscripts (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:270:29)
at Parser.pp.parseExprSubscripts (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:240:17)
at Parser.pp.parseMaybeUnary (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/path/to/custom-react-native-app/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
@ ./~/react-native-invertible-scroll-view/InvertibleScrollView.js 15:29-77
webpack: bundle is now VALID.
trailing comma in line 17 is causing the issue..
As the view is inverted a tap on the status bar scrolls the user to the bottom of the view. This should ideally be inverted and you should scroll to the actual top of the view.
Is it possible to animate the scroll when a new item is added to the scroll view? as currently the new item just snaps in...
Thanks
It worked OK with ReactNative 0.38
Well, I cannot say what's exaclty wrong, but only one row renders if I use invertible ScrollView with ListView together:
https://github.com/JetBrains/youtrack-mobile/blob/master/src/components/query-assist/query-assist__suggestions-list.js#L81
<ListView
style={this.props.style}
dataSource={this.state.dataSource}
enableEmptySections={true}
renderRow={(suggestion) => this._renderRow(suggestion)}
renderScrollComponent={props => <InvertibleScrollView {...props} inverted/>}
keyboardShouldPersistTaps={true}/>
Adding flex: 1
to inverted styles here https://github.com/exponentjs/react-native-invertible-scroll-view/blob/master/InvertibleScrollView.js#L72 fixes it
verticallyInverted: {
flex: 1,
transform: [
{ scaleY: -1, scaleX: 1},
],
},
I've installed using
npm install react-native-invertible-scroll-view
And I've received this message:
Unable to resolve module react-native-invertible-scroll-view on react-native 0.16
invalid directory node_modules/react-native-invertible-scroll-view
When I copy the InvertibleScrollView.js inside my project, it works.
hey guys
i'm a beginner in react native and i'm trying to create a horizontal list in rtl direction
i read the documentation of react-native-invertible-scroll-view and i don't now where is the problem
this is my code:
invertible scrollview.pdf
can anyone tell me what's wrong with my code?
tnx
Hello everyone.
My app start in feed, i reversed with react-native-invertible-scroll-view.
But it starts bottom like whatsapp but I want to it starts on top like facebook homepage.
Please help me!
createDataSource({ studentsArray }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(studentsArray);
}
renderRow(ogrenci) {
return <ListItem ogrenci={ogrenci} />;
}
</View>
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
</View>
the listview's onEndReached doesn't work when add InvertibleScrollView.
This may work with smaller components, but with larger single components (in my case a graph that grows over time and is scrollable), the default position is still always left-justified.
https://github.com/facebook/react-native/releases/tag/v0.25.1
Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1
Also this will stop working in 0.26. So we had to rewrite imports to avoid warnings.
If I have sufficient items it displays fine, but if its just 2 or 3 items then the items are shown far at the bottom .
here's my styles
container: {
justifyContent: 'flex-start',
alignItems: 'stretch',
backgroundColor: 'white',
flex : 1,
padding : 20,
},
list :{
borderColor: 'gray',
borderWidth : 1,
margin : 20,
marginTop : 100
},
load_more : {
height : 100,
},
and the render
Load PreviousHi @ide
Thanks for the component!
You mentioned in the Readme:
NOTE: You need a patched version of React Native for this to work
Where can I get the patched version?
Thanks,
Ran
On latest Android 7 versions by Huawei, the views are not visible inside react-native-invertible-scroll-view.
Think it is related to these issues:
facebook/react-native#14560
facebook/react-native#13522
It worked before our react-native upgrade. Now with react native 0.37.0, the inverted list displays mirrored upside down, when using onRefresh property on the list. It looks fine on iOS, but looks like there were some changes on Android.
Anyone else having the same problem?
Section headers end up looking pretty strange with the transform, (upside down). I'm looking at the source code and I'm trying to figure out a way to render section headers at the end of a blob section and right-side up. Any suggestions?
Hi,
could you provide some example code how to scroll to the bottom?
When I'm trying this piece of code:
render: function () {
return (
<ListView
ref={(ref) => this._scrollView = ref}
dataSource={this.state.dataSource}
renderRow={this.renderMessage}
renderScrollView={
(props) => <InvertibleScrollView {...props} inverted />
}
/>
);
},
_scrollToTop() {
this._scrollView.scrollTo(0, 0);
},
so I am getting the error:
undefined is not a function (evaluating 'this._scrollView.scrollTo(0, 0)')
Thank you.
Hi guys, this is how it looks like:
I have a simple:
<ListView style={styles.listView}
dataSource={this.state.dataSource}
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
renderRow={(data) => <MessageRow navigator={this.props.navigator} {...data} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
Just following the docs.
I like this library, but feel like it could be more useful if it encapsulated more of the component setup.
I think the majority of those looking to use invertible scroll views are simply looking for a way to get a <ScrollView>
or <ListView>
component with reverse scrolling (e.g. for a chat application, terminal log, or any number of common use cases).
The best way to do this in react-native would be to simply expose a prop on those respective components so that scrolling can just be declared, e.g.
<ListView scrollDirection="reverse" ... />
<ScrollView scrollDirection="reverse" ... />
I would really like to see this in react-native as it solves a really common UX need in the most composable and declarative way without involving any (redundant) new components.
This library is an excellent stopgap. But it provides an incomplete solution because doesn't provide a simple component that just gets the job done: it requires developers to manually compose the inverted view using renderScrollComponent
, reversing the datasource, etc.
...simply provide a couple components which behave exactly like <ListView>
and <ScrollView>
, except with inverted scrolling? For example:
<ReverseScrollView>
, which extends ScrollView<ReverseListView>
, which extends ListView...these components would behave exactly like ScrollView and ListView, with the same props, dataSource, etc. Only the scroll direction would be reversed. No more need to worry about how renderScrollComponent
works, or how to deal with reversed data sources.
I think this would provide much better composability, learnability, and usability for developers. It would also provide a simple migration path in the future if react-native decides to offer something like a scrollDirection
prop, since developers would already have written to a consistent set of props, events, etc.
Hi,
When scrolling, I'd like to check if we are at the top-most because I'd like to load more messages when scroll to top-most. In original scroll view, I can check if the
onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)}
to see if the y
is less then 0. However, in inverted scroll view, the y is increasing when scrolling up. In such case, how can I tell if I've already scrolled to the top-most?
Thanks.
Hi,
I would like your help.
I have this setup:
render() {
return (
<View style={styles.container}>
<ListView style={styles.container}
dataSource={this.state.dataSource}
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
renderRow={(data) => <MessageRow navigator={this.props.navigator} {...data} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />} />
<Grid>
<Col size={70}>
<FormInput placeholderTextColor={placeholderColor} inputStyle={styles.input} placeholder="Add your comment"
onChangeText={(val) => this.setState({message : val})}
value={this.state.message}
multiline={true}
numberOfLines={4}
editable={true} />
</Col>
<Col size={30}>
<SubmitButton
buttonStyle={styles.addButton}
icon={{name: 'comment'}}
title=''
screen='Messages'
onSubmit={this._submitComment} />
</Col>
</Grid>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
commentContainer: {
flexDirection: 'row'
}
});
This produces:
As you can see, there's a bunch of void space down there!
If I remove the Grid element, then the listView gets in "full screen mode". I mean, it reaches the bottom of the app.
How can I do this to make room for the input in the end of the app's window ?
thank you
Thanks for putting this module together @ide . I'm seeing an issue where this code:
triggerScroll: function() {
this.setTimeout(() => {
this.refs.<ListView reference>.getScrollResponder().scrollTo(0);
}, 2000);
},
doesn't actually scroll all the way to the bottom, but rather to an item near the end of the list. On the other hand it does seem to scroll the view so that the topmost item shows up at the top of the view (previously it rendered the items starting ~20% down leaving some whitespace at the top).
Hi,
How do I check the end of list in InvertibleScrollView?
for example
if(this.InvertibleScrollView.scrollTo(0) === 0) {
...
...
}
Or
if(this.InvertibleScrollView.scrollTo(0) ) {
...
...
}
I need to check the end of the list
But I didn't find a solution.
I have an inverted listView that renders tiles on the screen, when I press one of the tiles I need to use the sectionID to do some re-rendering. What im doing is the following
<ListView style ={styles.scrollView}
renderScrollComponent={props =>
<InvertibleScrollView {...props} inverted />}
dataSource={this.state.dataSource}
renderRow={(rowData, rowID, sectionID) =>
<TouchableNativeFeedback
onPress={(sectionID)=>console.log(sectionID)}>
<View ref='item' style={this.keyColor(rowData)}>
<Text>{rowData}</Text>
</TouchableNativeFeedback>
}>
</ListView>
This does not give me the rowData, rowID, nor sectionID instead i get "proxy". If I don't use the invertible scrollview component however everything works fine. Any suggestions?
I'm getting an error "Unable to resolve module react", which is referenced by the "react-clone-referenced-element" package this package requires. That's because I have not installed react by itself, it's nested within react-native.
Changing the line in cloneReferencedElement.js
to let React = require("react-native");
solves this issue.
Is there any more structured way to resolve this, without having to change code in a third party package?
hello, help me find a solution to add content to scroll. When my content inside InvertibleScrollView becomes higher, the component will automatically moves scroll to this height. How to add content and save scroll position?
Hi James,
So I'm working on a comment functionality, when I invert the scroll view I'm able to automatically scroll at the bottom of the comments after posting them also I'm using unshift so the comments are added at the bottom. The only problem I have is that when there are not enough comments to fill the screen space, these appear at the bottom. Any ideas of how to fix this? I've been trying to use styles on each element.
Need to add support to section headers?
How can I do that?
I've just upgraded to React Native 0.56, which moved to Babel 7. And here the error I've got:
error: bundling failed: SyntaxError: /Users/..../Documents/work/.../node_modules/react-native-invertible-scroll-view/InvertibleScrollView.js: A trailing comma is not permitted after the rest element (45:14)
43 | inverted,
44 | renderScrollComponent,
> 45 | ...props,
| ^
46 | } = this.props;
47 |
On RN v0.40, iOS native headers have been moved. Imports of RN Headers should be changed from:
#import "RCTUtils.h"
to
#import <React/RCTUtils.h>
After reading through the discussion at #41 I'm left wondering if a deprecation warning should be added to the ReadMe.
This would be very useful for beginners as not all of them are aware of alternatives like the new inverted rendering capabilities added to RN's built-in Flatlist component.
Full disclaimer, I'm not familiar enough with this project to know if there are any extra features it offer which still make it relevant to green field apps. So please take this as a question more than as a suggestion.
I'm trying to use invertible scroll view inside another scrollview(https://github.com/brentvatne/react-native-scrollable-tab-view) and nothing gets inverted. Everything works fine if I don't nest inside another scrollview. Do you have any idea what could be the potential issue here?
This seems like a strange error and maybe it's something to do with my project as opposed to how you've setup your library, but here's the issue.
Including InvertibleScrollView
with brackets produces an error:
import { InvertibleScrollView } from 'react-native-invertible-scroll-view';
Will produce the following error:
Whereas by simply removing the brackets works just fine:
import InvertibleScrollView from 'react-native-invertible-scroll-view';
I know you don't include brackets in your sample README code but I thought it was optional and since all the other libraries I include work fine with the brackets, I thought I would do the same but ran into this obfuscated error.
If you could shed some light on this, that would be great.
Thanks!
Title ^. and if this isn't compatible, what needs to be done to make it compatible?
Hi I'm using this library for my messaging app. Is there or will there be support of the animation effect when I unshift an element to the list?
Currently the frame just re-renders and the list elements magically jumps to the new position. I tried to use layout animation but the result is not as expected.
Thanks!
Hi,
I'm using the invertible scroll view to render various chat messages. Some chat messages contain clickable text. I'm using Touchable*s to make parts of the text clickable, which is working fine in iOS. In Android, it seems that the Listview is infront of the individual rows (is this possible?!) and thus the onPress events are not even fired. Using the inspector, whenever I try to click on an individual row, the entire listview is selected and not the row.
Any idea what the reason might be?
Thanks!
I am trying to use Clipboard on an inverted list item. To simplify:
The list works great. I follow the examples and rendering and scrolling is as expected.
I use a RenderRow(data) function which returns a TouchableOpacity component with Clipboard feature on press:
renderMessage(data) {
return (
<TouchableOpacity onPress={()=>Clipboard.setString(`${data}`)} >{data} </TouchableOpacity>
);
}
Could that be due to the mirroring of the ListView ?? Have anyone tested with list item buttons ??
Issue Description
When scrolling enters in the "momentum" phase (after releasing finger) the chat view starts to scroll in the opposite direction
Steps to Reproduce / Code Snippets
Just scrolls the chat view using fast finger swipe
Additional Information
React Native version: 0.55.0
react-native-gifted-chat version: 0.4.3
react-native-invertible-scroll-view: 1.1.0
Platform(s): Android 9
When I use this plugin with ListView, the this.refs.listView.scrollTo
is undefined.
render() {
var ds = this.state.dataSource.cloneWithRows(this.props.messages);
return (
<ListView
dataSource={ds}
renderRow={this.renderRow}
ref="listView"
renderScrollView={
(props) => <InvertibleScrollView {...props} inverted />
}
/>
);
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.