should render all checkboxes checked/unchecked state

__tests__/MenuEdit.test.tsx

@@ -21,6 +21,18 @@ describe('Menu Edit Page', () => {
       expect(allItemNames[index].props.children).toEqual(item.name);
     });
   });
+
+  test('should render all checkboxes checked/unchecked state', () => {
+    const checkedItems = MOCK_MENU_ITEMS.filter(item => item.isActive);
+    const uncheckedItems = MOCK_MENU_ITEMS.filter(item => !item.isActive);
+    render(<MenuEdit menus={MOCK_MENU_ITEMS} />);
+
+    const checkedBoxes = screen.queryAllByTestId('checked');
+    expect(checkedBoxes).toHaveLength(checkedItems.length);
+
+    const unCheckedBoxes = screen.queryAllByTestId('unChecked');
+    expect(unCheckedBoxes).toHaveLength(uncheckedItems.length);
+  });
 });
 
 export const MOCK_MENU_ITEMS: IMenuItem[] = [

app/tabs/menuEdit/MenuEditItem.tsx

@@ -1,19 +1,49 @@
-import {StyleSheet, Text} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import React from 'react';
 import {IMenuItem} from '.';
 
 interface IMenuEditItemProps {
   item: IMenuItem;
 }
 
+const CheckBox = ({isActive}: {isActive: boolean}) => {
+  return (
+    <View
+      testID={isActive ? 'checked' : 'unChecked'}
+      style={styles.checkboxContainer}>
+      {isActive && <Text>✅</Text>}
+    </View>
+  );
+};
+
 export default function MenuEditItem({item}: IMenuEditItemProps) {
-  return <Text style={styles.label}>{item.name}</Text>;
+  return (
+    <View style={styles.container}>
+      <CheckBox isActive={item.isActive} />
+      <Text style={styles.label}>{item.name}</Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+  },
   label: {
     fontSize: 14,
     fontWeight: '400',
     color: '#000',
   },
+  checkboxContainer: {
+    width: 30,
+    height: 30,
+  },
+  checkedBoxBackground: {
+    backgroundColor: '#fff',
+  },
+  unCheckedBoxBackground: {
+    backgroundColor: '#000',
+  },
 });