react-native-gc-list-view
v1.0.24
Published
The component is react native list which fast than recycler list and flat list
Downloads
7
Readme
react-native-gc-list-view
Getting started
$ npm install react-native-gc-list-view --save
Mostly automatic installation
$ react-native link react-native-gc-list-view
Usage
import GCListView from 'react-native-gc-list-view';
// TODO: What to do with the module?
<GCListView
renderItem={this.renderItem}
data={this.state.data}
itemLayouts={this.state.itemLayouts}>
</GCListView>
renderItem = (item: any, index: number) => {
return (
<TouchableOpacity onPress={this.onPress}
style={{ flex: 1 }}>
<View style={styles.itemStyle}>
<Text style={styles.itemTitle}>{item.title}</Text>
<Image
style={{ width: 45, height: 45 }}
source={{ uri: item.url }}></Image>
</View>
</TouchableOpacity>);
}
The component need pass itemLayouts for each item. The code mock up to create item layouts
calcItemLayout(data: any[]): number[] {
data = data || [];
const itemLayouts: number[] = [];
let lastOffset = 0;
let height = 50;
for (let i = 0; i < data.length; i++) {
lastOffset += height;
itemLayouts.push(lastOffset);
}
return itemLayouts;
}