refactor: reorganize imports and improve MenuView component structure

Author: sbaiahmed1

example/src/App.tsx

@@ -1,12 +1,12 @@
+import { useState } from 'react';
 import {
+  Alert,
   SafeAreaView,
+  ScrollView,
   StyleSheet,
   Text,
   View,
-  ScrollView,
-  Alert,
 } from 'react-native';
-import { useState } from 'react';
 import { MenuView } from 'react-native-menus';
 
 const App = () => {

src/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import type { ReactNode } from 'react';
-import NativeMenuView from './MenuViewNativeComponent';
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
 import type {
-  MenuViewProps as NativeMenuViewProps,
   MenuItem,
   MenuSelectEvent,
+  MenuViewProps as NativeMenuViewProps,
 } from './MenuViewNativeComponent';
+import NativeMenuView from './MenuViewNativeComponent';
 
 export type { MenuItem, MenuSelectEvent };
 
@@ -16,13 +17,37 @@ export interface MenuViewProps extends Omit<NativeMenuViewProps, 'children'> {
 export const MenuView = React.forwardRef<any, MenuViewProps>((props, ref) => {
   const { children, ...nativeProps } = props;
 
+  if (Platform.OS === 'ios') {
+    return (
+      <NativeMenuView ref={ref} {...nativeProps}>
+        {children}
+      </NativeMenuView>
+    );
+  }
+
   return (
-    <NativeMenuView ref={ref} {...nativeProps}>
-      {children}
-    </NativeMenuView>
+    <View style={styles.relative}>
+      <NativeMenuView
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            zIndex: 1,
+          },
+        ]}
+        ref={ref}
+        {...nativeProps}
+      />
+      <View>{children}</View>
+    </View>
   );
 });
 
 MenuView.displayName = 'MenuView';
 
+const styles = StyleSheet.create({
+  relative: {
+    position: 'relative',
+  },
+});
+
 export default MenuView;