Skip to content

Instantly share code, notes, and snippets.

@cooperka
Last active August 1, 2017 04:40
Show Gist options
  • Save cooperka/031d5e5b6bbcd314681e644632a494c6 to your computer and use it in GitHub Desktop.
Save cooperka/031d5e5b6bbcd314681e644632a494c6 to your computer and use it in GitHub Desktop.
Migrating from ListView to ImmutableListView in React Native.
-import { Text, View, ListView } from 'react-native';
+import { Text, View } from 'react-native';
+import { ImmutableListView } from 'react-native-immutable-list-view';
import style from './styles';
import listData from './listData';
class App extends Component {
- constructor(props) {
- super(props);
-
- const dataSource = new ListView.DataSource({
- rowHasChanged: (r1, r2) => r1 !== r2,
- sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
- });
-
- const mutableData = listData.toJS();
-
- this.state = {
- dataSource: dataSource.cloneWithRowsAndSections(mutableData),
- };
- }
-
- componentWillReceiveProps(newProps) {
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(newProps.listData),
- });
- }
-
renderRow(rowData) {
return <Text style={style.row}>{rowData}</Text>;
}
renderSectionHeader(sectionData, category) {
return <Text style={style.header}>{category}</Text>;
}
render() {
return (
<View style={style.container}>
<Text style={style.welcome}>
Welcome to React Native!
</Text>
- <ListView
- dataSource={this.state.dataSource}
+ <ImmutableListView
+ immutableData={listData}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment