@lowdefy/shell 3.23.2 → 7.2.0

package/src/cache/createSqliteCacheStore.test.js

@@ -0,0 +1,93 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { jest } from '@jest/globals';
+
+import createSqliteCacheStore from './createSqliteCacheStore.js';
+
+// A stand-in for an expo-sqlite database over the two tables the store uses.
+function createFakeDb() {
+  const roots = new Map();
+  const pages = new Map();
+  return {
+    execAsync: jest.fn(async () => undefined),
+    getFirstAsync: jest.fn(async (sql, [cacheKey]) => roots.get(cacheKey) ?? null),
+    getAllAsync: jest.fn(async (sql, [cacheKey]) =>
+      [...pages.values()].filter((row) => row.cache_key === cacheKey)
+    ),
+    runAsync: jest.fn(async (sql, params) => {
+      if (sql.startsWith('INSERT OR REPLACE INTO roots')) {
+        const [cacheKey, root, rootEtag, user] = params;
+        roots.set(cacheKey, { root, root_etag: rootEtag, user });
+      } else if (sql.startsWith('INSERT OR REPLACE INTO pages')) {
+        const [cacheKey, pageId, page] = params;
+        pages.set(`${cacheKey}|${pageId}`, { cache_key: cacheKey, page_id: pageId, page });
+      } else if (sql.startsWith('DELETE FROM roots WHERE cache_key')) {
+        roots.delete(params[0]);
+      } else if (sql.startsWith('DELETE FROM pages WHERE cache_key = ? AND')) {
+        pages.delete(`${params[0]}|${params[1]}`);
+      } else if (sql.startsWith('DELETE FROM pages WHERE cache_key')) {
+        [...pages.keys()]
+          .filter((key) => pages.get(key).cache_key === params[0])
+          .forEach((key) => pages.delete(key));
+      } else if (sql.startsWith('DELETE FROM roots WHERE substr')) {
+        [...roots.keys()]
+          .filter((key) => key.startsWith(params[1]))
+          .forEach((key) => roots.delete(key));
+      } else if (sql.startsWith('DELETE FROM pages WHERE substr')) {
+        [...pages.keys()]
+          .filter((key) => pages.get(key).cache_key.startsWith(params[1]))
+          .forEach((key) => pages.delete(key));
+      }
+    }),
+  };
+}
+
+test('the SQLite cache keeps a root and its pages per cache key', async () => {
+  const db = createFakeDb();
+  const store = createSqliteCacheStore({ db });
+  expect(await store.read('field:c1:r1')).toBeNull();
+  await store.writeRoot({
+    cacheKey: 'field:c1:r1',
+    entry: { root: { homePageId: 'today' }, rootEtag: '"r1"', user: { id: 'u1' } },
+  });
+  await store.writePage({ cacheKey: 'field:c1:r1', pageId: 'today', page: { hash: 'h1' } });
+  await store.writePage({ cacheKey: 'field:c1:r1', pageId: 'jobs', page: { hash: 'h2' } });
+  await store.writePage({ cacheKey: 'field:c2:r1', pageId: 'today', page: { hash: 'other' } });
+  await store.removePages({ cacheKey: 'field:c1:r1', pageIds: ['jobs'] });
+  expect(await store.read('field:c1:r1')).toEqual({
+    root: { homePageId: 'today' },
+    rootEtag: '"r1"',
+    user: { id: 'u1' },
+    pages: { today: { hash: 'h1' } },
+  });
+  expect(db.execAsync).toHaveBeenCalledTimes(1);
+});
+
+test('the SQLite cache drops one caller, or every caller of one app', async () => {
+  const store = createSqliteCacheStore({ db: createFakeDb() });
+  const entry = { root: {}, rootEtag: null, user: null };
+  await store.writeRoot({ cacheKey: 'field:c1:r1', entry });
+  await store.writePage({ cacheKey: 'field:c1:r1', pageId: 'today', page: { hash: 'h1' } });
+  await store.writeRoot({ cacheKey: 'field:c2:r1', entry });
+  await store.writeRoot({ cacheKey: 'fieldwork:c1:r1', entry });
+  await store.removeEntry({ cacheKey: 'field:c2:r1' });
+  expect(await store.read('field:c2:r1')).toBeNull();
+  expect(await store.read('field:c1:r1')).not.toBeNull();
+  await store.removeApp({ appId: 'field' });
+  expect(await store.read('field:c1:r1')).toBeNull();
+  expect(await store.read('fieldwork:c1:r1')).not.toBeNull();
+});

package/src/cache/getCacheKey.js

@@ -0,0 +1,25 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// The cache a shell keeps for one app and caller. The server filters an app's pages, menus and
+// page index by the caller's roles, so pages are kept per app, per person and organisation (the
+// caller hash of the server's x-lowdefy-caller stamp) and per set of roles (its roles hash).
+// stamp is the parsed stamp of the root response; a response without one is the anonymous caller.
+function getCacheKey({ appId, stamp }) {
+  return [appId, stamp?.caller ?? '', stamp?.roles ?? ''].join(':');
+}
+
+export default getCacheKey;

package/src/cache/getLastCacheKeyName.js

@@ -0,0 +1,22 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// The device key holding the cache key an app last opened with, read on start to render at once.
+function getLastCacheKeyName(appId) {
+  return `lowdefy-shell:last-cache-key:${appId}`;
+}
+
+export default getLastCacheKeyName;

package/src/components/AppProvider.js

@@ -0,0 +1,118 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import * as SplashScreen from 'expo-splash-screen';
+
+import AuthGate from '../auth/AuthGate.js';
+import createShellApp from '../createShellApp.js';
+import DeviceHosts from '../device/DeviceHosts.js';
+import LoadingScreen from './LoadingScreen.js';
+import MessageScreen from './MessageScreen.js';
+import NoConnectionBanner from './NoConnectionBanner.js';
+import reportShellError from '../host/reportShellError.js';
+import ShellContext, { useSessionState } from '../ShellContext.js';
+import ShellThemeProvider from './ShellThemeProvider.js';
+import startAppServices from '../native/startAppServices.js';
+
+function AppGate({ children }) {
+  const { status, error } = useSessionState();
+  const value = React.useContext(ShellContext);
+  useEffect(() => {
+    if (status !== 'loading') SplashScreen.hideAsync();
+  }, [status]);
+  if (status === 'loading') {
+    return <LoadingScreen />;
+  }
+  if (status === 'error') {
+    return (
+      <MessageScreen
+        action={{ title: 'Try again', onPress: () => value.session.start() }}
+        body={error?.message}
+        testID="shell-app-error"
+        title="This app could not be opened"
+      />
+    );
+  }
+  return (
+    <View style={{ flex: 1 }}>
+      <NoConnectionBanner />
+      <ShellThemeProvider>{children}</ShellThemeProvider>
+    </View>
+  );
+}
+
+// Opens the shell's app (shell.app): builds its auth, session and host, renders its last pages from
+// the cache and syncs it with the app's server. A sign-out opens it afresh, with nothing of the
+// person's kept.
+function AppProvider({ children, shell }) {
+  const [value, setValue] = useState(null);
+  const [openError, setOpenError] = useState(null);
+  const [openings, setOpenings] = useState(0);
+  useEffect(() => {
+    let active = true;
+    let opened = null;
+    let services = null;
+    setValue(null);
+    setOpenError(null);
+    const onSignedOut = () => setOpenings((count) => count + 1);
+    createShellApp({ onSignedOut, shell })
+      .then((created) => {
+        if (!active) return;
+        const { auth, host, locale, session } = created;
+        opened = auth;
+        services = startAppServices({ app: { ...created, shell } });
+        setValue({ auth, host, locale, services, session, shell });
+        auth.start({ session });
+      })
+      .catch((error) => {
+        // Without this the app would wait on the loading screen for ever.
+        if (!active) return;
+        reportShellError({ error });
+        setOpenError(error);
+        SplashScreen.hideAsync();
+      });
+    return () => {
+      active = false;
+      services?.stop();
+      opened?.dispose();
+    };
+  }, [openings, shell]);
+  if (openError !== null) {
+    return (
+      <MessageScreen
+        action={{ title: 'Try again', onPress: () => setOpenings((count) => count + 1) }}
+        body={openError.message}
+        testID="shell-open-error"
+        title="This app could not be opened"
+      />
+    );
+  }
+  if (value === null) {
+    return <LoadingScreen />;
+  }
+  return (
+    <ShellContext.Provider value={value}>
+      <AuthGate>
+        <AppGate>{children}</AppGate>
+      </AuthGate>
+      <DeviceHosts />
+    </ShellContext.Provider>
+  );
+}
+
+export default AppProvider;

package/src/components/Frame.js

@@ -0,0 +1,116 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Platform } from 'react-native';
+import { router, Stack } from 'expo-router';
+import { NativeTabs } from 'expo-router/native-tabs';
+import { useTheme } from '@lowdefy/client-native';
+
+import FRAME_SLOTS from '../navigation/frameSlots.js';
+import getFrame from '../navigation/getFrame.js';
+import getTabIcons from '../navigation/getTabIcons.js';
+import TabIconImages from './TabIconImages.js';
+import { useSessionState, useShell } from '../ShellContext.js';
+
+// One tab's icon: its SF Symbol on iOS, else its Lucide icon drawn as an image once ready. It is
+// called, not rendered as a component: Expo Router reads a trigger's options from its direct
+// NativeTabs.Trigger.Icon and Label children only, and drops any other element, even one that
+// renders an Icon.
+function renderTabIcon({ icon, image }) {
+  if (icon.sf !== null) {
+    return <NativeTabs.Trigger.Icon sf={icon.sf} />;
+  }
+  if (image === undefined) {
+    return null;
+  }
+  return <NativeTabs.Trigger.Icon renderingMode="template" src={image} />;
+}
+
+// The tabs frame: a native tab bar, each tab a route group with its own stack. The selected tab
+// takes the theme's tint. iOS 26 draws the bar's glass itself; before it, the bar blurs in the
+// mode showing, and Android's bar takes the cell colour. A `role: search` item is iOS 26's search tab, set apart at the
+// right of the bar with a magnifier; elsewhere it is a tab with its search icon.
+function TabsFrame({ items }) {
+  const { isDark, tokens } = useTheme();
+  const icons = useMemo(() => getTabIcons({ items, platform: Platform.OS }), [items]);
+  const [images, setImages] = useState({});
+  const onImage = useCallback(
+    (pageId, source) => setImages((current) => ({ ...current, [pageId]: source })),
+    []
+  );
+  const imageItems = icons.filter((icon) => icon.iconData !== null);
+  return (
+    <>
+      <NativeTabs
+        backgroundColor={Platform.OS === 'ios' ? undefined : tokens.colorCell}
+        blurEffect={isDark ? 'systemChromeMaterialDark' : 'systemChromeMaterialLight'}
+        iconColor={{ selected: tokens.colorTint }}
+        labelStyle={{ selected: { color: tokens.colorTint } }}
+        tintColor={tokens.colorTint}
+      >
+        {FRAME_SLOTS.map((slot, index) => {
+          const item = items[index];
+          return (
+            <NativeTabs.Trigger
+              hidden={item === undefined}
+              key={slot}
+              name={`(${slot})`}
+              role={item?.role}
+            >
+              {item === undefined
+                ? null
+                : renderTabIcon({ icon: icons[index], image: images[item.pageId] })}
+              <NativeTabs.Trigger.Label>
+                {item?.title ?? item?.pageId ?? ''}
+              </NativeTabs.Trigger.Label>
+            </NativeTabs.Trigger>
+          );
+        })}
+      </NativeTabs>
+      {imageItems.length > 0 ? <TabIconImages items={imageItems} onImage={onImage} /> : null}
+    </>
+  );
+}
+
+// The app's frame from its mobile menus: native tabs, one stack per tab, or one stack (with a menu
+// button for a drawer). Each tab is a route group of app/(t0,t1,t2,t3,t4); tabs past the menu's
+// items are hidden.
+function Frame() {
+  const { session } = useShell();
+  const state = useSessionState();
+  const frame = getFrame(state.root.menus);
+
+  // After a caller change the shell starts again from the home page.
+  useEffect(() => {
+    if (!session.takeHomeRequest()) return;
+    if (router.canDismiss()) router.dismissAll();
+    router.replace('/');
+  }, [session, state.homeRequests]);
+
+  if (frame.kind === 'tabs') {
+    return <TabsFrame items={frame.items} />;
+  }
+  return (
+    <Stack initialRouteName="(t0)" screenOptions={{ headerShown: false }}>
+      {FRAME_SLOTS.map((slot) => (
+        <Stack.Screen key={slot} name={`(${slot})`} />
+      ))}
+    </Stack>
+  );
+}
+
+export default Frame;

package/src/components/Frame.test.js

@@ -0,0 +1,101 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { render } from '@testing-library/react-native';
+import { ThemeContext } from '@lowdefy/client-native';
+
+import Frame from './Frame.js';
+
+// The native tabs as plain elements that keep their props, so a test reads the tab bar. A trigger
+// keeps only its direct Icon and Label children, as Expo Router's convertTabPropsToOptions reads a
+// trigger's options: any other element, even one that renders an Icon, is dropped.
+jest.mock('expo-router/native-tabs', () => {
+  const { Children, createElement, isValidElement } = jest.requireActual('react');
+  const element = (name) => (props) => createElement(name, props, props.children);
+  const NativeTabs = element('NativeTabs');
+  const Icon = element('TriggerIcon');
+  const Label = ({ children }) => createElement('TriggerLabel', { label: children });
+  NativeTabs.Trigger = (props) =>
+    createElement(
+      'Trigger',
+      props,
+      Children.toArray(props.children).filter(
+        (child) => isValidElement(child) && (child.type === Icon || child.type === Label)
+      )
+    );
+  NativeTabs.Trigger.Icon = Icon;
+  NativeTabs.Trigger.Label = Label;
+  return { NativeTabs };
+});
+
+jest.mock('expo-router', () => ({ router: {}, Stack: () => null }));
+
+const mockState = {};
+jest.mock('../ShellContext.js', () => ({
+  useSessionState: () => mockState,
+  useShell: () => ({ session: { takeHomeRequest: () => false } }),
+}));
+
+function findAll(node, predicate, found = []) {
+  if (node === null || typeof node === 'string') return found;
+  if (predicate(node)) found.push(node);
+  (node.children ?? []).forEach((child) => findAll(child, predicate, found));
+  return found;
+}
+
+const inbox = { node: [['path', { d: 'M1 1' }]] };
+const tokens = { colorCell: '#FFFFFF', colorLabel: '#000000', colorTint: '#0A72D8' };
+
+test('native tab bar items take SF Symbols, the search role and the theme tint', async () => {
+  mockState.homeRequests = 0;
+  mockState.root = {
+    menus: {
+      tabs: [
+        { pageId: 'my-work', title: 'My work', icon: 'Inbox', iconData: inbox },
+        { pageId: 'tasks', title: 'Tasks', icon: 'SquareCheck', sfSymbol: 'checklist' },
+        { pageId: 'search', title: 'Search', icon: 'search', role: 'search' },
+      ],
+    },
+  };
+  const view = await render(
+    <ThemeContext.Provider value={{ isDark: false, preference: 'system', tokens }}>
+      <Frame />
+    </ThemeContext.Provider>
+  );
+  const tabBar = findAll(view.root, (node) => node.type === 'NativeTabs')[0];
+  expect(tabBar.props.tintColor).toBe('#0A72D8');
+  expect(tabBar.props.iconColor).toEqual({ selected: '#0A72D8' });
+  expect(tabBar.props.blurEffect).toBe('systemChromeMaterialLight');
+  const triggers = findAll(view.root, (node) => node.type === 'Trigger');
+  expect(triggers.map((trigger) => [trigger.props.name, trigger.props.hidden])).toEqual([
+    ['(t0)', false],
+    ['(t1)', false],
+    ['(t2)', false],
+    ['(t3)', true],
+    ['(t4)', true],
+  ]);
+  expect(triggers[2].props.role).toBe('search');
+  const labels = findAll(view.root, (node) => node.type === 'TriggerLabel');
+  expect(labels.slice(0, 3).map((label) => label.props.label)).toEqual([
+    'My work',
+    'Tasks',
+    'Search',
+  ]);
+  const icons = findAll(view.root, (node) => node.type === 'TriggerIcon');
+  expect(icons.map((icon) => icon.props.sf)).toEqual(['tray', 'checklist', 'magnifyingglass']);
+});

package/src/components/LoadingScreen.js

@@ -0,0 +1,35 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import styles from './styles.js';
+import useSurfaceTokens from './useSurfaceTokens.js';
+
+function LoadingScreen() {
+  const tokens = useSurfaceTokens();
+  return (
+    <View
+      style={[styles.centered, { backgroundColor: tokens.colorGroupedBackground }]}
+      testID="shell-loading"
+    >
+      <ActivityIndicator color={tokens.colorSecondaryLabel} />
+    </View>
+  );
+}
+
+export default LoadingScreen;

package/src/components/MenuButton.js

@@ -0,0 +1,121 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { router } from 'expo-router';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Icon } from '@lowdefy/client-native';
+
+import { useSessionState } from '../ShellContext.js';
+import useSurfaceTokens from './useSurfaceTokens.js';
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  backdrop: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  sheet: {
+    width: '80%',
+    maxWidth: 360,
+  },
+  item: {
+    alignItems: 'center',
+    columnGap: 16,
+    flexDirection: 'row',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+  },
+  itemText: {
+    fontSize: 17,
+  },
+});
+
+// The drawer frame: a header button that opens the app's drawer menu over the screen, each item
+// with its icon drawn from the icon data the root carries. Picking an item replaces the stack with
+// that page.
+function MenuButton({ items }) {
+  const [open, setOpen] = useState(false);
+  const { root } = useSessionState();
+  const insets = useSafeAreaInsets();
+  const tokens = useSurfaceTokens();
+  function openPage(pageId) {
+    setOpen(false);
+    const path = root.pageIndex.find((entry) => entry.pageId === pageId)?.path;
+    if (router.canDismiss()) router.dismissAll();
+    router.replace(`/${path}`);
+  }
+  return (
+    <>
+      <Pressable
+        accessibilityLabel="Menu"
+        accessibilityRole="button"
+        onPress={() => setOpen(true)}
+        style={styles.button}
+        testID="shell-menu"
+      >
+        <Text style={[styles.buttonText, { color: tokens.colorTint }]}>Menu</Text>
+      </Pressable>
+      <Modal animationType="fade" onRequestClose={() => setOpen(false)} transparent visible={open}>
+        <View style={styles.backdrop}>
+          <ScrollView
+            style={[
+              styles.sheet,
+              { backgroundColor: tokens.colorGroupedBackground, paddingTop: insets.top },
+            ]}
+          >
+            {items.map((item) => (
+              <Pressable
+                accessibilityRole="button"
+                key={item.pageId}
+                onPress={() => openPage(item.pageId)}
+                style={styles.item}
+                testID={`menu-${item.pageId}`}
+              >
+                {item.iconData ? (
+                  <Icon
+                    color={tokens.colorLabel}
+                    data={item.iconData}
+                    size={22}
+                    testID={`menu-${item.pageId}-icon`}
+                  />
+                ) : null}
+                <Text style={[styles.itemText, { color: tokens.colorLabel }]}>
+                  {item.title ?? item.pageId}
+                </Text>
+              </Pressable>
+            ))}
+          </ScrollView>
+          <Pressable
+            accessibilityLabel="Close menu"
+            onPress={() => setOpen(false)}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+export default MenuButton;