Floating action button

Author: josydeleon

packages/react-native-query-devtool/assets/rqlogo.png

@@ -23,6 +23,10 @@
     "build": "tsup"
   },
   "type": "module",
+  "dependencies": {
+    "react-native-actions-sheet": "^0.9.3",
+    "react-native-json-tree":"^1.3.0"
+  },
   "devDependencies": {
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
@@ -37,6 +41,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": "*"
   }
 }

packages/react-native-query-devtool/package.json

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { Image, TouchableOpacity } from "react-native";
+
+import { styles } from "./styles";
+
+const FloatingButton: React.FC<{ onPress: () => void }> = ({ onPress }) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={styles.container}
+    >
+      <Image
+        style={styles.image}
+        source={require("../../../assets/rqlogo.png")}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default FloatingButton;

packages/react-native-query-devtool/src/components/FloatingButton/index.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    zIndex: 9999,
+    position: "absolute",
+    bottom: 50,
+    left: 30,
+    borderRadius: 100,
+  },
+  image: {
+    width: 40,
+    height: 40,
+    objectFit: "contain",
+  },
+});