react-native-immutable-listview-datasource
v1.3.2
Published
React Native Immutable ListView DataSource
Downloads
8
Maintainers
Readme
Deprecated Project I recommend using FlatList
https://facebook.github.io/react-native/docs/flatlist.html
React Native Immutable ListView DataSource
Why
If you are using ImmutableJS in your app and don't want to convert back toJS.
Install
npm install --save react-native-immutable-listview-datasource
Usage
const ds = new ImmutableDataSource()
this.state = {
dataSource: ds.cloneWithRows(rows)
}
Full example
/* @flow */
import React, {Component} from 'react'
import {
AppRegistry,
StyleSheet,
ListView,
Text,
View
} from 'react-native'
import immutable from 'immutable'
import ImmutableDataSource from 'react-native-immutable-listview-datasource'
const styles = StyleSheet.create({
list: {
flex: 1,
padding: 30,
backgroundColor: 'rgb(39, 174, 96)'
},
row: {
margin: 8,
flexDirection: 'row',
justifyContent: 'space-between'
},
title: {
fontSize: 20,
color: 'white'
}
})
const countries = immutable.fromJS([
{name: 'China', population: '1,393,783,836'},
{name: 'India', population: '1,267,401,849'},
{name: 'U.S.A.', population: '322,583,006'},
{name: 'Indonesia', population: '252,812,245'},
{name: 'Brazil', population: '202,033,670'}
])
const Title = ({children}) => (
<Text style={styles.title}>{children}</Text>
)
const Row = ({name, population}) => (
<View style={styles.row}>
<Title>{name}</Title>
<Title>{population}</Title>
</View>
)
const renderRow = (rowData) => (
<Row name={rowData.get('name')}
population={rowData.get('population')} />
)
export default class CountiesByPopulation extends Component {
constructor() {
super()
const ds = new ImmutableDataSource()
this.state = {
dataSource: ds.cloneWithRows(countries)
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(countries.pop())
})
}, 3000)
}
render() {
return (
<ListView style={styles.list}
dataSource={this.state.dataSource}
renderRow={renderRow} />
)
}
}