react-native-universal-list
v1.0.1
Published
[![Travis branch](https://img.shields.io/travis/mordaha/react-native-universal-list/master.svg)](https://travis-ci.org/mordaha/react-native-universal-list)
Downloads
2
Maintainers
Readme
react-native-universal-list
A wrapper around react-native/SectionList with swipe from right ability on every list item.
Installation
yarn add react-native-universal-list
Usage:
export default class App extends React.Component {
render() {
const data = Array.from(new Array(50)).map((x, i) => ({ key: `item ${i}` }));
// console.log(data);
return (
<View style={styles.container}>
<UniversalList
data={data}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => console.log('item press', item)}>
<View style={{ padding: 16, backgroundColor: '#ffc' }}>
<Text>{item.key || 'undefined'}</Text>
</View>
</TouchableWithoutFeedback>
)}
renderRight={({ item }) => (
<View style={{ flexDirection: 'row' }}>
<TouchableWithoutFeedback onPress={() => console.log('view press', item)}>
<View style={{ width: 80, padding: 16, backgroundColor: '#009' }}>
<Text style={{ color: '#fff' }}>View</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => console.log('delete press', item)}>
<View style={{ width: 80, padding: 16, backgroundColor: '#f00' }}>
<Text style={{ color: '#fff' }}>Delete</Text>
</View>
</TouchableWithoutFeedback>
</View>
)}
/>
</View>
);
}
}
Example
Try out Expo snack