listview


react-native listview some rows not displaying


I have a modal with 3 tabs. Each tab has a listview, any dataset larger than 10 rows does not work properly. What happens is on initial load it is displaying correctly. however when more rows are being displayed they are all empty. Not sure what is going on. Using latest React-Native. Here are a couple of screenshots if it helps.
<View style={{flex:1, height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}>
{
(this.state.isSubdivisions) ? <Subdivisions model={this.props.model.subdivisions}/>
: (this.state.isProspects) ? <LandProspects model={this.props.model.landProspects}/>
: (this.state.isFavorites) ? <Favorites model={this.props.model.favorites}/>
: null}
</View>
Tab
class ListLandProspects extends Component {
constructor(props) {
super(props);
const foo = this.props.model.slice(0,10)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
this.state = {
dataSource: ds.cloneWithRows(foo),
deviceHeight: Dimensions.get('window').height,
deviceWidth: Dimensions.get('window').width
}
}
componentDidUpdate(prevProps) {
if (this.props.model != prevProps.model)
this._updateLandProspects()
}
_updateLandProspects(){
const clone = this.props.model.slice()
this.setState({
dataSource: this.state.dataSource.cloneWithRows(clone)
})
}
render() {
return (
<Row>
<Col>
<List>
<ListView
style={{ height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}
enableEmptySections={true}
initialListSize={10}
pageSize={10}
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)} />
</List>
</Col>
</Row>
)
}
_renderRow(rowData) {
return (
<ListItem style={styles.listItem}>
<View style={styles.rowWrapper}>
<Row>
<Col>
<Text style={styles.labelMain}>{rowData.fullAddress}</Text>
</Col>
</Row>
<Row style={styles.toolbarRow}>
<View style={styles.toolbarDetail}>
<TouchableOpacity>
<Icon
name='ios-information-circle'
style={{color: colors.blue}}/>
</TouchableOpacity>
</View>
<View style={styles.toolbarMarker}>
<TouchableOpacity>
<Icon
name='ios-pin'
style={{color: colors.green}}/>
</TouchableOpacity>
</View>
<View style={styles.toolbarFavorite}>
<TouchableOpacity>
<Icon
name={rowData.isFavorite ? 'ios-star' : 'ios-star-outline'}
style={{color: colors.orange}}/>
</TouchableOpacity>
</View>
</Row>
</View>
</ListItem>
)
}
}
ListLandProspects.propTypes = {
model: React.PropTypes.array
}
export default connect(null, null)(ListLandProspects)
Styles
const styles = StyleSheet.create({
label: {
color: '#000',
fontWeight: 'bold'
},
labelMain: {
color: '#000',
fontWeight: 'bold',
fontSize: 15
},
rowWrapper: {
padding: 5,
paddingLeft: 10,
paddingRight: 10
},
listItem: {
padding: 0,
marginLeft: 0,
paddingLeft: 0,
borderBottomWidth: 0,
borderColor: 'transparent'
},
toolbarRow: {
height: 38,
marginTop: 5,
backgroundColor: '#f2f2f2'
},
toolbarFavorite: {
position: 'absolute',
margin: 5,
left: 110
},
toolbarMarker: {
position: 'absolute',
margin: 5,
left: 60
},
toolbarDetail: {
position: 'absolute',
margin: 5
}
})
any dataset larger than 10 rows does not work properly
Almost certainly related to this line:
const foo = this.props.model.slice(0,10)
EDIT:
I think your componentDidUpdate is flawed. this.props.model != prevProps.model will always be true, because you can't compare arrays like that. So _updateLandProspects will be called on every update, which will re-set your state and since you have an initialListSize of 10 you'll probably never see more than that number since it will cause another render over and over again.
Try changing initialListSize to a bigger number and remove the slice(0, 10) above and see if it behaves the same as now but with that bigger number. This should show if the problem is with the componentDidUpdate flaw or not.

Related Links

understanding cellFactories and CallBack
how to set image to ImageView inside ListView in Xamarin?
Sencha Touch consecutive listviews double back buttons issue
Listview loaded twice
Different height in ListView
How to set selected item of ListView without scrolling the view
Can't update data from Kendo DataSource
Closed or circular Vertical ListView Android
How to set layout for topEmptyRegion in WearablListView?
How to disable groupedlist i.e. SemanticZoom+ListView virtualization in WP8.1 WinRT?
Listview item with NM_CUSTOMDRAW is flickering
How to stretch ListView items width to fill parent container?
POSH: Export Listview to CSV
Unable to receive all NM_CUSTOMDRAW dwDrawStage for a ListView
Custom ListView in SharePoint 2013 app
How to adjust size of Horizontal ListView in Xamarin.Forms?

Categories

HOME
hive
jsrender
umd
datastax-java-driver
onelogin
mouse
portia
synchronization
applepay
here-api
volttron
jsprit
django-simple-history
pugjs
google-cloud-speech
swingx
immutable.js
one-hot-encoding
tapestry
pass-by-reference
zurb-foundation-6
java-7
p-value
tdd
django-storage
neo4j-spatial
compatibility
facebook-apps
windows-server-2000
vision
javascriptcore
oracle-fusion-middleware
openoffice.org
bytecode-manipulation
android-ble
jquery-bootgrid
scaffold
libraries
xenforo
grid.mvc
dynamic-reports
google-closure
.net-4.6.2
google-datalayer
worksheet
dropbox-php
nstextview
elgg
colorama
knockout-components
crypt
media-player
nbconvert
webdriverjs
pycaffe
word-vba-mac
infix-notation
ctest
merge-conflict-resolution
connect-by
lttng
holder.js
pagedlist
rvest
pickadate
bluegiga
hsv
tmuxinator
drawbitmap
ionic
unity3d-gui
iiviewdeckcontroller
proj4js
qcodo
device-manager
terminfo
contenttype
phpthumb
hyprlinkr
concurrent-collections
html5-notifications
pyhdf
opcache
dotnetnuke-5
sqlperformance
mqx
android-hardware
delphi-6
free-variable
mt
funscript
broken-links
manchester-syntax
propertyeditor
pysimplesoap
code-cleanup
bigcouch
nsdatecomponents
php-parser
locationlistener
subviews
infrastructure
web-architecture
putchar
ugc
.net-1.0

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App