From 119e53e75e0e297f51c2bea2c24a9769cabf3932 Mon Sep 17 00:00:00 2001
From: saheenshoukath <saheenshoukath@gmail.com>
Date: Sun, 9 Oct 2022 23:07:04 +0530
Subject: [PATCH 1/2] update readme with functional component example

---
 README.md | 91 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 5f41e41..0727ef7 100644
--- a/README.md
+++ b/README.md
@@ -23,28 +23,33 @@ npm install react-native-actionsheet --save
 ## Usage
 
 ```js
-import ActionSheet from 'react-native-actionsheet'
+import ActionSheet from "react-native-actionsheet";
+import { useRef } from "react";
+
+const Demo = () => {
+  const actionSheetRef = useRef();
 
-class Demo extends React.Component {
   showActionSheet = () => {
-    this.ActionSheet.show()
-  }
-  render() {
-    return (
-      <View>
-        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
-        <ActionSheet
-          ref={o => this.ActionSheet = o}
-          title={'Which one do you like ?'}
-          options={['Apple', 'Banana', 'cancel']}
-          cancelButtonIndex={2}
-          destructiveButtonIndex={1}
-          onPress={(index) => { /* do something */ }}
-        />
-      </View>
-    )
-  }
-}
+    actionSheetRef.current.show();
+  };
+
+  return (
+    <View>
+      <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
+      <ActionSheet
+        ref={actionSheetRef}
+        title={"Which one do you like ?"}
+        options={["Apple", "Banana", "cancel"]}
+        cancelButtonIndex={2}
+        destructiveButtonIndex={1}
+        onPress={(index) => {
+          /* do something */
+        }}
+      />
+    </View>
+  );
+};
+
 ```
 
 
@@ -63,26 +68,34 @@ const options = [
   <Text style={{color: 'red'}}>Durian</Text>
 ]
 
-class Demo extends React.Component {
+const Demp = () => {
+  const actionSheetRef = useRef();
+  
   showActionSheet = () => {
-    this.ActionSheet.show()
-  }
-  render() {
-    return (
-      <View>
-        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
-        <ActionSheet
-          ref={o => this.ActionSheet = o}
-          title={<Text style={{color: '#000', fontSize: 18}}>Which one do you like?</Text>}
-          options={options}
-          cancelButtonIndex={0}
-          destructiveButtonIndex={4}
-          onPress={(index) => { /* do something */ }}
-        />
-      </View>
-    )
-  }
-}
+    actionSheetRef.current.show();
+  };
+
+  return (
+    <View>
+      <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
+      <ActionSheet
+        ref={actionSheetRef}
+        title={
+          <Text style={{ color: "#000", fontSize: 18 }}>
+            Which one do you like?
+          </Text>
+        }
+        options={options}
+        cancelButtonIndex={0}
+        destructiveButtonIndex={4}
+        onPress={(index) => {
+          /* do something */
+        }}
+      />
+    </View>
+  );
+};
+
 ```
 
 ### How to redesign style ?

From 06ac4741168aef88ca96520ee609b7c127ad4a7d Mon Sep 17 00:00:00 2001
From: saheenshoukath <saheenshoukath@gmail.com>
Date: Sun, 9 Oct 2022 23:10:03 +0530
Subject: [PATCH 2/2] remove this from button onPress

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0727ef7..d6a8cfd 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ const Demo = () => {
 
   return (
     <View>
-      <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
+      <Text onPress={showActionSheet}>Open ActionSheet</Text>
       <ActionSheet
         ref={actionSheetRef}
         title={"Which one do you like ?"}
@@ -77,7 +77,7 @@ const Demp = () => {
 
   return (
     <View>
-      <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
+      <Text onPress={showActionSheet}>Open ActionSheet</Text>
       <ActionSheet
         ref={actionSheetRef}
         title={