fix: package.json and readme file updated

Author: sosog

README.md

@@ -21,74 +21,89 @@ Then, if you didn't install `react-native-linear-gradient` before: Enter command
 #Basic usage
 
 ```
-import React from 'react';
-import {View, Text, Dimensions} from 'react-native';
+import React, { useState } from 'react';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 
 import DynamicallySelectedPicker from 'react-native-dynamically-selected-picker';
 
-export default class Example extends React.Component {
-  state = {
-    selectedItemIndex: 0,
-  };
-
-  updateSelectedItem(index) {
-    this.setState({selectedItemIndex: index});
-  }
-
-  render() {
-    const windowWidth = Dimensions.get('window').width;
-
-    return (
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-        <DynamicallySelectedPicker
-          items={[
-            {
-              value: 1,
-              label: 'Item 1',
-            },
-            {
-              value: 2,
-              label: 'Item 2',
-            },
-            {
-              value: 3,
-              label: 'Item 3',
-            },
-            {
-              value: 4,
-              label: 'Item 4',
-            },
-            {
-              value: 5,
-              label: 'Item 5',
-            },
-          ]}
-          onScroll={({index, item}) => {
-            this.updateSelectedItem(index);
-          }}
-          height={300}
-          width={windowWidth}
-        />
-        <View style={{marginTop: 50}}>
-          <Text>Selected item index {this.state.selectedItemIndex}</Text>
-        </View>
+export default function App() {
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number>(0);
+  const initialSelectedIndex = 1;
+  const windowWidth = Dimensions.get('window').width;
+  const height = 300;
+
+  return (
+    <View style={styles.container}>
+      <DynamicallySelectedPicker
+        items={[
+          {
+            value: 1,
+            label: 'Item 1',
+          },
+          {
+            value: 2,
+            label: 'Item 2',
+          },
+          {
+            value: 3,
+            label: 'Item 3',
+          },
+          {
+            value: 4,
+            label: 'Item 4',
+            itemColor: 'blue',
+          },
+          {
+            value: 5,
+            label: 'Item 5',
+          },
+        ]}
+        onScroll={({ index }) => setSelectedItemIndex(index)}
+        onMomentumScrollBegin={({ index }) => setSelectedItemIndex(index)}
+        onMomentumScrollEnd={({ index }) => setSelectedItemIndex(index)}
+        onScrollBeginDrag={({ index }) => setSelectedItemIndex(index)}
+        onScrollEndDrag={({ index }) => setSelectedItemIndex(index)}
+        initialSelectedIndex={initialSelectedIndex}
+        height={height}
+        width={windowWidth}
+      />
+      <View style={styles.selectedItemWrapper}>
+        <Text>Selected item index {selectedItemIndex}</Text>
       </View>
-    );
-  }
+    </View>
+  );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+  gradientWrapper: {
+    position: 'absolute',
+    width: '100%',
+  },
+  selectedItemWrapper: { marginTop: 50 },
+});
+
 ```
 
 ## Properties
 
 | Prop           |     Default     |   Type   | Description                                                                                                 |
 | :------------- | :-------------: | :------: | :---------------------------------------------------------------------------------------------------------- |
 | items     |     [{value: 0, label: 'No items', itemColor: 'black'}]       |  `Array<object>` | - |
-| onScroll     |      -       |  `func` | Returns selected item object and selected index  |
-| onMomentumScrollBegin     |      -       |  `func` | Returns selected item object and selected index  |
-| onMomentumScrollEnd     |      -       |  `func` | Returns selected item object and selected index  |
-| onScrollBeginDrag     |      -       |  `func` | Returns selected item object and selected index  |
-| onScrollEndDrag     |      -       |  `func` | Returns selected item object and selected index  |
+| onScroll     |      -       |  `func` | Returns selected selected index  |
+| onMomentumScrollBegin     |      -       |  `func` | Returns selected selected index  |
+| onMomentumScrollEnd     |      -       |  `func` | Returns selected selected index  |
+| onScrollBeginDrag     |      -       |  `func` | Returns selected selected index  |
+| onScrollEndDrag     |      -       |  `func` | Returns selected selected index  |
 | initialSelectedIndex          |        0        | `number` | Set index number of initial item.                                                                              |
 | transparentItemRows   |     3      |  `number`  | Set number of items at top and bottom of selected index.                                                                |
 | width   |     300      |  `number`  | -                                                                |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-dynamically-selected-picker",
   "version": "3.0.0",
-  "description": "test",
+  "description": "React Native Custom Picker for Android and IOS with onScroll change selected items",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",