react-native-iinstall 0.2.11 → 0.2.12

package/lib/IInstallWrapper.d.ts

@@ -5,6 +5,8 @@ interface IInstallWrapperProps {
     children?: React.ReactNode;
     enabled?: boolean;
     showDebugButton?: boolean;
+    showFloatingButtonOnEmulator?: boolean;
+    floatingButtonLabel?: string;
 }
 export declare const IInstallWrapper: React.FC<IInstallWrapperProps>;
-export {};
+export default IInstallWrapper;

package/lib/IInstallWrapper.js

@@ -1,167 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IInstallWrapper = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-// Import from the local SDK files instead of the package
+const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
-const ShakeDetector_1 = require("./ShakeDetector");
-// Helper to detect simulator/emulator
-const isSimulator = () => {
-    // @ts-expect-error - __DEV__ is a React Native global
-    const isDev = typeof global !== 'undefined' && global.__DEV__ === true;
-    return (react_native_1.Platform.OS === 'ios' &&
-        (react_native_1.Platform.isPad || react_native_1.Platform.isTV || isDev)) || (react_native_1.Platform.OS === 'android' && isDev);
-};
-// Helper to detect if native sensors are available
-const hasNativeSensors = () => {
-    try {
-        // Check if we're in a simulator/emulator environment
-        if (isSimulator()) {
-            return false;
-        }
-        // Additional check for Android emulators
-        if (react_native_1.Platform.OS === 'android') {
-            // Android emulators typically don't have motion sensors
-            return false;
-        }
-        // iOS simulators don't have motion sensors
-        if (react_native_1.Platform.OS === 'ios' && react_native_1.Platform.isPad) {
-            return false;
-        }
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-};
-const IInstallWrapper = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true, showDebugButton = true }) => {
-    const shakeDetectorRef = (0, react_1.useRef)(null);
-    // Calculate sensor availability once to avoid state updates
-    const sensorsAvailable = enabled && hasNativeSensors();
-    const showManualButton = !sensorsAvailable && enabled;
-    (0, react_1.useEffect)(() => {
-        if (!enabled)
-            return;
-        // Only use shake detector if sensors are available
-        if (sensorsAvailable) {
-            shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(() => {
-                // This will trigger the IInstall modal
-                // The shake detector will handle the screenshot capture
-            });
-            shakeDetectorRef.current.start();
-        }
-        return () => {
-            shakeDetectorRef.current?.stop();
-        };
-    }, [enabled, sensorsAvailable]);
-    const handleManualReport = () => {
-        // Manually trigger the IInstall feedback modal
-        // This simulates a shake gesture
-        if (enabled) {
-            // The IInstall component will handle the screenshot and modal
-            // We can trigger it by simulating the shake event
-            console.log('[IInstall] Manual report triggered');
-        }
-    };
-    const handleDebugInfo = () => {
-        const debugMessage = [
-            `Platform: ${react_native_1.Platform.OS}`,
-            `Is Simulator: ${isSimulator() ? 'Yes' : 'No'}`,
-            `Native Sensors: ${sensorsAvailable ? 'Available' : 'Not Available'}`,
-            `Manual Button: ${showManualButton ? 'Visible' : 'Hidden'}`,
-            `Shake Detection: ${sensorsAvailable ? 'Enabled' : 'Disabled'}`,
-        ].join('\n');
-        react_native_1.Alert.alert('IInstall Debug Info', debugMessage, [{ text: 'OK' }]);
-    };
-    return (<index_1.IInstall apiKey={apiKey} apiEndpoint={apiEndpoint} enabled={enabled}>
+// Backward-compatible wrapper. The core IInstall component now handles:
+// - shake gesture on real devices
+// - floating manual trigger button on simulator/emulator
+const IInstallWrapper = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true, showDebugButton: _showDebugButton = false, showFloatingButtonOnEmulator = true, floatingButtonLabel = 'Report Issue', }) => {
+    return (<index_1.IInstall apiKey={apiKey} apiEndpoint={apiEndpoint} enabled={enabled} showFloatingButtonOnEmulator={showFloatingButtonOnEmulator} floatingButtonLabel={floatingButtonLabel}>
       {children}
-      
-      {showManualButton && (<react_native_1.View style={styles.manualButtonContainer}>
-          <react_native_1.TouchableOpacity style={styles.manualButton} onPress={handleManualReport}>
-            <react_native_1.Text style={styles.manualButtonText}>🐛 Report Issue</react_native_1.Text>
-          </react_native_1.TouchableOpacity>
-          
-          {showDebugButton && (<react_native_1.TouchableOpacity style={styles.debugButton} onPress={handleDebugInfo}>
-              <react_native_1.Text style={styles.debugButtonText}>ℹ️</react_native_1.Text>
-            </react_native_1.TouchableOpacity>)}
-        </react_native_1.View>)}
     </index_1.IInstall>);
 };
 exports.IInstallWrapper = IInstallWrapper;
-const styles = react_native_1.StyleSheet.create({
-    manualButtonContainer: {
-        position: 'absolute',
-        bottom: 40,
-        right: 20,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    manualButton: {
-        backgroundColor: '#FF6B6B',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderRadius: 25,
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 4,
-        marginRight: 10,
-    },
-    manualButtonText: {
-        color: 'white',
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    debugButton: {
-        backgroundColor: '#4ECDC4',
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 4,
-    },
-    debugButtonText: {
-        color: 'white',
-        fontSize: 16,
-    },
-});
+exports.default = exports.IInstallWrapper;

package/lib/index.d.ts

@@ -4,6 +4,8 @@ interface IInstallProps {
     apiEndpoint?: string;
     children?: React.ReactNode;
     enabled?: boolean;
+    showFloatingButtonOnEmulator?: boolean;
+    floatingButtonLabel?: string;
 }
 export declare const IInstall: React.FC<IInstallProps>;
 export default IInstall;

package/lib/index.js

@@ -43,11 +43,13 @@ const react_native_view_shot_1 = require("react-native-view-shot");
 const ShakeDetector_1 = require("./ShakeDetector");
 const FeedbackModal_1 = require("./FeedbackModal");
 const react_native_record_screen_1 = __importDefault(require("react-native-record-screen"));
-const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true }) => {
+const react_native_device_info_1 = __importDefault(require("react-native-device-info"));
+const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enabled = true, showFloatingButtonOnEmulator = true, floatingButtonLabel = 'Report Issue', }) => {
     const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
     const [screenshotUri, setScreenshotUri] = (0, react_1.useState)(null);
     const [videoUri, setVideoUri] = (0, react_1.useState)(null);
     const [isRecording, setIsRecording] = (0, react_1.useState)(false);
+    const [isEmulator, setIsEmulator] = (0, react_1.useState)(false);
     const shakeDetectorRef = (0, react_1.useRef)(null);
     // Refs for stable access in shake callback
     const isRecordingRef = (0, react_1.useRef)(isRecording);
@@ -56,6 +58,23 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         isRecordingRef.current = isRecording;
         modalVisibleRef.current = modalVisible;
     }, [isRecording, modalVisible]);
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        react_native_device_info_1.default.isEmulator()
+            .then((value) => {
+            if (mounted) {
+                setIsEmulator(value);
+            }
+        })
+            .catch(() => {
+            if (mounted) {
+                setIsEmulator(false);
+            }
+        });
+        return () => {
+            mounted = false;
+        };
+    }, []);
     const handleShake = async () => {
         if (modalVisibleRef.current || isRecordingRef.current)
             return;
@@ -80,7 +99,7 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         handleShakeCallback.current = handleShake;
     });
     (0, react_1.useEffect)(() => {
-        if (!enabled)
+        if (!enabled || isEmulator)
             return;
         // Use a wrapper to call the current handleShake
         shakeDetectorRef.current = new ShakeDetector_1.ShakeDetector(() => handleShakeCallback.current());
@@ -88,7 +107,15 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
         return () => {
             shakeDetectorRef.current?.stop();
         };
-    }, [enabled]);
+    }, [enabled, isEmulator]);
+    const handleFloatingButtonPress = async () => {
+        await handleShakeCallback.current();
+    };
+    const shouldShowFloatingButton = enabled &&
+        isEmulator &&
+        showFloatingButtonOnEmulator &&
+        !modalVisible &&
+        !isRecording;
     const normalizeVideoUri = (value) => {
         if (react_native_1.Platform.OS === 'ios' && value.startsWith('/')) {
             return `file://${value}`;
@@ -173,6 +200,12 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
       <react_native_1.View style={react_native_1.StyleSheet.absoluteFill}>
         {children}
       </react_native_1.View>
+
+      {shouldShowFloatingButton && (<react_native_1.View style={styles.floatingButtonContainer} pointerEvents="box-none">
+          <react_native_1.TouchableOpacity accessibilityRole="button" accessibilityLabel="Open feedback menu" onPress={handleFloatingButtonPress} style={styles.floatingButton}>
+            <react_native_1.Text style={styles.floatingButtonText}>{floatingButtonLabel}</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>)}
       
       {isRecording && (<react_native_1.SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
               <react_native_1.View style={styles.recordingContainer}>
@@ -193,6 +226,30 @@ const IInstall = ({ apiKey, apiEndpoint = 'https://iinstall.app', children, enab
 };
 exports.IInstall = IInstall;
 const styles = react_native_1.StyleSheet.create({
+    floatingButtonContainer: {
+        position: 'absolute',
+        right: 16,
+        bottom: 28,
+        zIndex: 9998,
+        elevation: 20,
+    },
+    floatingButton: {
+        backgroundColor: '#0f172a',
+        borderColor: '#2563eb',
+        borderWidth: 1,
+        borderRadius: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 4,
+    },
+    floatingButtonText: {
+        color: '#FFF',
+        fontWeight: '700',
+        fontSize: 13,
+    },
     recordingOverlay: {
         position: 'absolute',
         top: 50,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-iinstall",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "🎯 IInstall React Native SDK - The ultimate beta testing & QA feedback tool. Shake-to-report with voice recordings, screen recordings, and screenshots. Zero-config setup with TypeScript support. Perfect for beta testing, QA teams, and user feedback collection.",
   "author": "TesterFlow Team",
   "license": "MIT",

package/src/IInstallWrapper.tsx

@@ -1,178 +1,40 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, Platform, Alert } from 'react-native';
-// Import from the local SDK files instead of the package
+import React from 'react';
 import { IInstall } from './index';
-import { ShakeDetector } from './ShakeDetector';
 
 interface IInstallWrapperProps {
   apiKey: string;
   apiEndpoint?: string;
   children?: React.ReactNode;
   enabled?: boolean;
+  // Backward compatibility only. No longer used.
   showDebugButton?: boolean;
+  showFloatingButtonOnEmulator?: boolean;
+  floatingButtonLabel?: string;
 }
 
-// Helper to detect simulator/emulator
-const isSimulator = () => {
-  // @ts-expect-error - __DEV__ is a React Native global
-  const isDev = typeof global !== 'undefined' && global.__DEV__ === true;
-  
-  return (
-    Platform.OS === 'ios' && 
-    (Platform.isPad || Platform.isTV || isDev)
-  ) || (
-    Platform.OS === 'android' && isDev
-  );
-};
-
-// Helper to detect if native sensors are available
-const hasNativeSensors = () => {
-  try {
-    // Check if we're in a simulator/emulator environment
-    if (isSimulator()) {
-      return false;
-    }
-    
-    // Additional check for Android emulators
-    if (Platform.OS === 'android') {
-      // Android emulators typically don't have motion sensors
-      return false;
-    }
-    
-    // iOS simulators don't have motion sensors
-    if (Platform.OS === 'ios' && Platform.isPad) {
-      return false;
-    }
-    
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-export const IInstallWrapper: React.FC<IInstallWrapperProps> = ({ 
-  apiKey, 
-  apiEndpoint = 'https://iinstall.app', 
+// Backward-compatible wrapper. The core IInstall component now handles:
+// - shake gesture on real devices
+// - floating manual trigger button on simulator/emulator
+export const IInstallWrapper: React.FC<IInstallWrapperProps> = ({
+  apiKey,
+  apiEndpoint = 'https://iinstall.app',
   children,
   enabled = true,
-  showDebugButton = true
+  showDebugButton: _showDebugButton = false,
+  showFloatingButtonOnEmulator = true,
+  floatingButtonLabel = 'Report Issue',
 }) => {
-  const shakeDetectorRef = useRef<ShakeDetector | null>(null);
-  
-  // Calculate sensor availability once to avoid state updates
-  const sensorsAvailable = enabled && hasNativeSensors();
-  const showManualButton = !sensorsAvailable && enabled;
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    // Only use shake detector if sensors are available
-    if (sensorsAvailable) {
-      shakeDetectorRef.current = new ShakeDetector(() => {
-        // This will trigger the IInstall modal
-        // The shake detector will handle the screenshot capture
-      });
-      shakeDetectorRef.current.start();
-    }
-
-    return () => {
-      shakeDetectorRef.current?.stop();
-    };
-  }, [enabled, sensorsAvailable]);
-
-  const handleManualReport = () => {
-    // Manually trigger the IInstall feedback modal
-    // This simulates a shake gesture
-    if (enabled) {
-      // The IInstall component will handle the screenshot and modal
-      // We can trigger it by simulating the shake event
-      console.log('[IInstall] Manual report triggered');
-    }
-  };
-
-  const handleDebugInfo = () => {
-    const debugMessage = [
-      `Platform: ${Platform.OS}`,
-      `Is Simulator: ${isSimulator() ? 'Yes' : 'No'}`,
-      `Native Sensors: ${sensorsAvailable ? 'Available' : 'Not Available'}`,
-      `Manual Button: ${showManualButton ? 'Visible' : 'Hidden'}`,
-      `Shake Detection: ${sensorsAvailable ? 'Enabled' : 'Disabled'}`,
-    ].join('\n');
-
-    Alert.alert('IInstall Debug Info', debugMessage, [{ text: 'OK' }]);
-  };
-
   return (
-    <IInstall 
-      apiKey={apiKey} 
-      apiEndpoint={apiEndpoint} 
+    <IInstall
+      apiKey={apiKey}
+      apiEndpoint={apiEndpoint}
       enabled={enabled}
+      showFloatingButtonOnEmulator={showFloatingButtonOnEmulator}
+      floatingButtonLabel={floatingButtonLabel}
     >
       {children}
-      
-      {showManualButton && (
-        <View style={styles.manualButtonContainer}>
-          <TouchableOpacity 
-            style={styles.manualButton} 
-            onPress={handleManualReport}
-          >
-            <Text style={styles.manualButtonText}>🐛 Report Issue</Text>
-          </TouchableOpacity>
-          
-          {showDebugButton && (
-            <TouchableOpacity 
-              style={styles.debugButton} 
-              onPress={handleDebugInfo}
-            >
-              <Text style={styles.debugButtonText}>ℹ️</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      )}
     </IInstall>
   );
 };
 
-const styles = StyleSheet.create({
-  manualButtonContainer: {
-    position: 'absolute',
-    bottom: 40,
-    right: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  manualButton: {
-    backgroundColor: '#FF6B6B',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 25,
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    marginRight: 10,
-  },
-  manualButtonText: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  debugButton: {
-    backgroundColor: '#4ECDC4',
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-  },
-  debugButtonText: {
-    color: 'white',
-    fontSize: 16,
-  },
-});
+export default IInstallWrapper;

package/src/index.tsx

@@ -4,24 +4,30 @@ import { captureScreen } from 'react-native-view-shot';
 import { ShakeDetector } from './ShakeDetector';
 import { FeedbackModal } from './FeedbackModal';
 import RecordScreen from 'react-native-record-screen';
+import DeviceInfo from 'react-native-device-info';
 
 interface IInstallProps {
   apiKey: string;
   apiEndpoint?: string; // e.g. https://iinstall.app
   children?: React.ReactNode;
   enabled?: boolean;
+  showFloatingButtonOnEmulator?: boolean;
+  floatingButtonLabel?: string;
 }
 
 export const IInstall: React.FC<IInstallProps> = ({ 
   apiKey, 
   apiEndpoint = 'https://iinstall.app', 
   children,
-  enabled = true 
+  enabled = true,
+  showFloatingButtonOnEmulator = true,
+  floatingButtonLabel = 'Report Issue',
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
   const [screenshotUri, setScreenshotUri] = useState<string | null>(null);
   const [videoUri, setVideoUri] = useState<string | null>(null);
   const [isRecording, setIsRecording] = useState(false);
+  const [isEmulator, setIsEmulator] = useState(false);
   
   const shakeDetectorRef = useRef<ShakeDetector | null>(null);
   
@@ -34,6 +40,26 @@ export const IInstall: React.FC<IInstallProps> = ({
     modalVisibleRef.current = modalVisible;
   }, [isRecording, modalVisible]);
 
+  useEffect(() => {
+    let mounted = true;
+
+    DeviceInfo.isEmulator()
+      .then((value) => {
+        if (mounted) {
+          setIsEmulator(value);
+        }
+      })
+      .catch(() => {
+        if (mounted) {
+          setIsEmulator(false);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
   const handleShake = async () => {
     if (modalVisibleRef.current || isRecordingRef.current) return;
 
@@ -59,7 +85,7 @@ export const IInstall: React.FC<IInstallProps> = ({
   });
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled || isEmulator) return;
 
     // Use a wrapper to call the current handleShake
     shakeDetectorRef.current = new ShakeDetector(() => handleShakeCallback.current());
@@ -68,7 +94,18 @@ export const IInstall: React.FC<IInstallProps> = ({
     return () => {
       shakeDetectorRef.current?.stop();
     };
-  }, [enabled]);
+  }, [enabled, isEmulator]);
+
+  const handleFloatingButtonPress = async () => {
+    await handleShakeCallback.current();
+  };
+
+  const shouldShowFloatingButton =
+    enabled &&
+    isEmulator &&
+    showFloatingButtonOnEmulator &&
+    !modalVisible &&
+    !isRecording;
 
   const normalizeVideoUri = (value: string) => {
     if (Platform.OS === 'ios' && value.startsWith('/')) {
@@ -181,6 +218,19 @@ export const IInstall: React.FC<IInstallProps> = ({
       <View style={StyleSheet.absoluteFill}>
         {children}
       </View>
+
+      {shouldShowFloatingButton && (
+        <View style={styles.floatingButtonContainer} pointerEvents="box-none">
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel="Open feedback menu"
+            onPress={handleFloatingButtonPress}
+            style={styles.floatingButton}
+          >
+            <Text style={styles.floatingButtonText}>{floatingButtonLabel}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
       
       {isRecording && (
           <SafeAreaView style={styles.recordingOverlay} pointerEvents="box-none">
@@ -212,6 +262,30 @@ export const IInstall: React.FC<IInstallProps> = ({
 };
 
 const styles = StyleSheet.create({
+    floatingButtonContainer: {
+        position: 'absolute',
+        right: 16,
+        bottom: 28,
+        zIndex: 9998,
+        elevation: 20,
+    },
+    floatingButton: {
+        backgroundColor: '#0f172a',
+        borderColor: '#2563eb',
+        borderWidth: 1,
+        borderRadius: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.35,
+        shadowRadius: 4,
+    },
+    floatingButtonText: {
+        color: '#FFF',
+        fontWeight: '700',
+        fontSize: 13,
+    },
     recordingOverlay: {
         position: 'absolute',
         top: 50,