update example

computerjazz · Jul 16, 2018 · be4afb7 · be4afb7
1 parent c8226f0
commit be4afb7
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -31,17 +31,30 @@ import DraggableFlatList from 'react-native-draggable-flatlist'
 class Example extends Component {
 
   state = {
-    data:  [0, 1, 2, 3, 4, 5]
+    data: [...Array(20)].map((d, index) => ({
+      key: `item-${index}`,
+      label: index,
+      backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index * 5}, ${132})`,
+    }))
   }
 
   renderItem = ({ item, index, move, moveEnd, isActive }) => {
     return (
       <TouchableOpacity
-        style={{ height: 100, backgroundColor: isActive ? 'red' : 'blue' }}
+        style={{ 
+          height: 100, 
+          backgroundColor: isActive ? 'blue' : item.backgroundColor,
+          alignItems: 'center', 
+          justifyContent: 'center' 
+        }}
         onLongPress={move}
         onPressOut={moveEnd}
       >
-        <Text>{item}</Text>
+        <Text style={{ 
+          fontWeight: 'bold', 
+          color: 'white',
+          fontSize: 32,
+        }}>{item.label}</Text>
       </TouchableOpacity>
     )
   }
@@ -52,8 +65,7 @@ class Example extends Component {
         <DraggableFlatList
           data={this.state.data}
           renderItem={this.renderItem}
-          keyExtractor={(item, index) => `draggable-item-${item}`}
-          contentContainerStyle={{ padding: 10 }}
+          keyExtractor={(item, index) => `draggable-item-${item.key}`}
           scrollPercent={5}
           onMoveEnd={({ data }) => this.setState({ data })}
         />
@@ -63,7 +75,5 @@ class Example extends Component {
 }
 
 export default Example
-
-
 ```