chore: add example usage

Author: Stringsaeed

example/babel.config.js

@@ -17,6 +17,7 @@ module.exports = function (api) {
           },
         },
       ],
+      'react-native-reanimated/plugin',
     ],
   };
 };

example/package.json

@@ -9,14 +9,16 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "expo": "~46.0.16",
     "expo-status-bar": "~1.4.0",
     "react": "18.0.0",
-    "react-native": "0.69.6"
+    "react-native": "0.69.6",
+    "react-native-reanimated": "~2.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "babel-plugin-module-resolver": "^4.1.0"
   },
   "private": true
-}
+}

example/src/App.tsx

@@ -1,31 +1,75 @@
-import * as React from 'react';
+import React from 'react';
+import Tooltip from 'react-native-tooltiplize';
+import { PortalProvider } from '@gorhom/portal';
+import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-tooltiplize';
+const App = () => {
+  const [isVisible, toggle] = React.useReducer((state) => !state, false);
 
-export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
+  const renderContent = React.useCallback(() => {
+    return (
+      <TouchableOpacity style={styles.tooltipContainer} onPress={toggle}>
+        <Text style={styles.tooltipText}>
+          Welcome to React Native Tooltiplize 🥳
+        </Text>
+      </TouchableOpacity>
+    );
   }, []);
 
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <PortalProvider>
+      <View style={styles.container}>
+        <Tooltip
+          position="top"
+          offset={8}
+          renderContent={renderContent}
+          isVisible={isVisible}
+          withOverlay
+          onDismiss={toggle}
+          pointerStyle={styles.pointer}
+          pointerColor="pink"
+        >
+          <TouchableOpacity onPress={toggle} style={styles.newFeature}>
+            <Text style={styles.newFeatureText}>This is new cool feature</Text>
+          </TouchableOpacity>
+        </Tooltip>
+      </View>
+    </PortalProvider>
   );
-}
+};
+
+export default App;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tooltipContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    backgroundColor: 'pink',
+  },
+  tooltipText: {
+    fontSize: 12,
+    color: 'black',
+  },
+  pointer: { width: 16, height: 8 },
+  newFeature: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderRadius: 8,
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+  newFeatureText: {
+    fontSize: 16,
   },
 });