From 3c3f8115ccdb7c632c8195f7ea7cc10b309b24df Mon Sep 17 00:00:00 2001
From: Shayan <shayanchatterjee7@gmail.com>
Date: Sun, 18 Jun 2023 12:52:19 +0530
Subject: [PATCH] chore: updated readme

---
 README.md           | 96 +++++++++++++++++++++++++++++++++++++++++++--
 example/src/App.tsx |  2 +-
 2 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index fc864cc..fc691c4 100644
--- a/README.md
+++ b/README.md
@@ -8,16 +8,106 @@ A library to detect any installed UPI apps on a user's device and get their info
 npm install react-native-upi-apps
 ```
 
+## Library Info
+In Android for your react-native app, if you want to know which UPI apps are installed on the device, make use of this library. Just install  the library using `npm` or `yarn` and add the below snippet in your `AndroidManifest.xml` file within the `manifest` tag -
+
+```js
+<queries>
+    <package android:name="com.phonepe.app" />   <!-- phonpe  -->
+    <package android:name="com.google.android.apps.nbu.paisa.user" /> <!-- gpay  -->
+    <package android:name="net.one97.paytm" />  <!-- paytm  -->
+    <package android:name="in.org.npci.upiapp" /> <!-- bhim  -->
+    <package android:name="in.amazon.mShop.android.shopping" />   <!-- amazonpay  -->
+    <package android:name="com.upi.axispay" />  <!-- axisbank  -->
+    <package android:name="com.dreamplug.androidapp" /> <!-- cred  -->
+    <package android:name="com.csam.icici.bank.imobile" /> <!-- icici  -->
+    <package android:name="com.myairtelapp" /> <!-- my airtel -->
+</queries>
+```
+You can add more upi apps with their package name if you want.
+
 ## Usage
 
 ```js
-import { multiply } from 'react-native-upi-apps';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, Text, Image } from 'react-native';
+import { getInstalledUPIAppList } from 'react-native-upi-apps';
+import type { UPIApp } from 'src/types';
+
+export default function App() {
+  const [result, setResult] = useState<UPIApp[]>([]);
+
+  useEffect(() => {
+    const getInstalledUPIApps = async () => {
+      const appList = await getInstalledUPIAppList();
+      setResult(appList);
+    };
+
+    getInstalledUPIApps();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {result?.map((app) => (
+        <View style={styles.listView}>
+          <Image
+            source={{ uri: `data:image/png;base64, ${app?.icon}` }}
+            resizeMode="contain"
+            style={styles.icon}
+          />
+          <Text>{app?.name}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+  listView: {
+    flexDirection: 'column',
+    flex: 1,
+  },
+  icon: {
+    width: 50,
+    height: 50,
+  },
+});
+
+```
+
+## Library methods - 
+
+```js
+1. getInstalledUPIAppList
+```
 
-// ...
+This method returns a promise with all the installed UPI apps in your device. The response will be an array of object of all the app list with. Each object will have the following 3 properties that can be used - 
 
-const result = await multiply(3, 7);
+```js
+name: string;
+packageName: string;
+icon: string;
 ```
 
+| Property | Detail |
+| --------------- | --------------- |
+| name | It denotes the name of the UPI app | 
+| packageName | It denotes the package name of the UPI app | 
+| icon | It is the base64 encoded string denoting the logo of the UPI app | 
+
+## Note
+This library is supported only for Android devices.
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
diff --git a/example/src/App.tsx b/example/src/App.tsx
index ed42969..0dc6efd 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -4,7 +4,7 @@ import { getInstalledUPIAppList } from 'react-native-upi-apps';
 import type { UPIApp } from 'src/types';
 
 export default function App() {
-  const [result, setResult] = useState<UPIApp[]>();
+  const [result, setResult] = useState<UPIApp[]>([]);
 
   useEffect(() => {
     const getInstalledUPIApps = async () => {