-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Has <ListView> infinite scroll and pull to refresh? #502
Comments
I believe the answer is NO 😞 Possible duplicate of: #121 ? |
OMG It is a basic component :S |
Which is open source and available for improvement! |
It does have infinite scrolling (look at the data source code) but a refresh control is separate. ++@colinramsay, it's all open source so build what you need. |
IIRC, refreshControl is somewhat tricky to get working correctly outside of a UITableViewController. |
Please see #502 for pull to request |
Pull to refresh https://gist.github.com/jsdf/6930c0211e0dc5bf0227 |
Is it correct to use the event onEndReached for infinite scroll? I don't like because I need to have an array in js memory. :S A good example about how I can paginate the listview? @vjeux |
If I use this onEndReached in iOS simulator works great but in iPhone 4 the scroll sometimes causes a lazy/strange effect. It is posible a memory problem? Look this video with simulator iphone 4S iOS 7.1: And this with physical iphone 4 iOS 7.1: My code is the following: /**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TextInput,
Image,
TouchableHighlight,
TabBarIOS,
SwitchIOS,
VibrationIOS,
DatePickerIOS,
SliderIOS
} = React;
var AwesomeProject = React.createClass({
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
movies: [],
loaded: false,
input: "kk",
selectedTab: "Tab1",
switchValue: false,
date: new Date(),
timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
sliderValue: 0
}
},
componentDidMount: function() {
this.fetchData();
},
fetchData: function() {
var movies = this.state.movies;
for (var i=0; i < 10; i++) {
var movie = {};
movie.name = "name" + i;
movie.detail = "detail" + i;
movies.push(movie);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(movies),
movies: movies,
loaded: true,
});
},
_onPressButton: function () {
VibrationIOS.vibrate();
alert(this.state.input);
},
onDateChange: function(date) {
this.setState({date: date});
},
onEndReached: function (argument) {
this.fetchData();
},
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item
name="Tab1"
title="Tab1"
selected={this.state.selectedTab === 'Tab1'}
icon={{uri:'favorites'}}
onPress={() => {
this.setState({
selectedTab: 'Tab1',
});
}}>
<View style={styles.container}>
<TextInput
style={{height: 40, borderColor: 'red', borderWidth: 1}}
onChangeText={(text) => this.setState({input: text})}>
</TextInput>
<Text>{'user input: ' + this.state.input}</Text>
<TouchableHighlight onPress={this._onPressButton}>
<Image
style={{height: 40, width: 40}}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}>
</Image>
</TouchableHighlight>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
onEndReached={this.onEndReached}>
</ListView>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
name="Tab2"
title="Tab2"
selected={this.state.selectedTab === 'Tab2'}
icon={{uri:'favorites'}}
onPress={() => {
this.setState({
selectedTab: 'Tab2',
});
}}>
<View style={styles.container}>
<Text style={styles.welcome}>
Tab2
</Text>
<SwitchIOS
onValueChange={(value) => this.setState({switchValue: value})}
style={{marginBottom: 10}}
value={this.state.switchValue}>
</SwitchIOS>
<SliderIOS
style={styles.slider}
onValueChange={(value) => this.setState({sliderValue: value})}>
</SliderIOS>
<DatePickerIOS
date={this.state.date}
mode="datetime"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}>
</DatePickerIOS>
</View>
</TabBarIOS.Item>
</TabBarIOS>
);
},
renderMovie: function(movie) {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js{'\n'}
Press Cmd+R to reload
</Text>
<Text style={styles.instructions}>
{movie.name}
{movie.detail}
</Text>
<Image style={{height: 40, width: 40}}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}>
</Image>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
paddingTop: 50
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
listView: {
flex: 1,
paddingTop: 20,
backgroundColor: '#F5FCFF'
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); Could you reopen the issue? @vjeux |
@danicomas check it out, it may help you #499 |
+1 , @danicomas I also found the problem. and did you fix it ? |
I have been disconnected in React the last month I can't help you sorry @bluemsn but I will try it again soon. |
I'm late to this, but it may help others, I created a demo project for pull-to-refresh and endless scrolling here https://github.com/CodeLinkIO/ReactNative-Endless-Scrolling |
If the answer is YES. Anyone can give me an example?
The text was updated successfully, but these errors were encountered: