@lowdefy/shell 0.0.0-experimental-20261019052246

package/src/auth/usesBiometricUnlock.js

@@ -0,0 +1,23 @@
+/*
+  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.
+*/
+
+// Biometric unlock is on when the app asks for it, except on a shared device, which signs out on
+// every close instead.
+function usesBiometricUnlock(settings) {
+  return settings?.unlock === 'biometric' && settings.sharedDevice !== true;
+}
+
+export default usesBiometricUnlock;

package/src/auth/watchSession.js

@@ -0,0 +1,47 @@
+/*
+  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 { parseCallerStamp } from '@lowdefy/helpers';
+
+function sentToken(headers) {
+  return Object.keys(headers ?? {}).some((name) => name.toLowerCase() === 'authorization');
+}
+
+/**
+ * The fetch the app's session and core call the server with, watching what the server says of
+ * the session token a call carried:
+ * - a 401, or an answer as the signed-out caller (an empty x-lowdefy-caller stamp): the session is
+ *   gone (signed out elsewhere, ended by an admin, expired), so onSessionEnded;
+ * - a 403: this organisation refused the person (removed, or no longer allowed), so onRefused.
+ * A call that carried no token says nothing about a session.
+ */
+function watchSession({ fetch, onRefused, onSessionEnded }) {
+  return async function watchedFetch(url, init = {}) {
+    const res = await fetch(url, init);
+    if (!sentToken(init.headers)) {
+      return res;
+    }
+    const stamp = parseCallerStamp(res.headers.get('x-lowdefy-caller'));
+    if (res.status === 401 || stamp?.caller === '') {
+      onSessionEnded();
+    } else if (res.status === 403) {
+      onRefused();
+    }
+    return res;
+  };
+}
+
+export default watchSession;

package/src/auth/withoutCookies.js

@@ -0,0 +1,26 @@
+/*
+  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.
+*/
+
+// Every call a shell makes leaves cookies alone. React Native's fetch keeps a cookie jar unless
+// told not to, and a request carrying a Cookie is not a native one to the server: it would get
+// no set-auth-token on sign-in. The session travels only as the bearer token.
+function withoutCookies(fetch) {
+  return function cookielessFetch(url, init = {}) {
+    return fetch(url, { ...init, credentials: 'omit' });
+  };
+}
+
+export default withoutCookies;

package/src/cache/createSqliteCacheStore.js

@@ -0,0 +1,113 @@
+/*
+  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 page cache in SQLite: per cache key (getCacheKey), the mobile root with its ETag and the
+// caller, and each page with its index hash and ETag. All of it is the server's answers kept as
+// JSON; nothing here is shared between callers.
+const SCHEMA = `
+CREATE TABLE IF NOT EXISTS roots (
+  cache_key TEXT PRIMARY KEY NOT NULL,
+  root TEXT NOT NULL,
+  root_etag TEXT,
+  user TEXT
+);
+CREATE TABLE IF NOT EXISTS pages (
+  cache_key TEXT NOT NULL,
+  page_id TEXT NOT NULL,
+  page TEXT NOT NULL,
+  PRIMARY KEY (cache_key, page_id)
+);
+`;
+
+/**
+ * @param {Object} params
+ * @param {Object} params.db An expo-sqlite database (openDatabaseSync).
+ */
+function createSqliteCacheStore({ db }) {
+  let ready = null;
+  function init() {
+    if (ready === null) {
+      ready = db.execAsync(SCHEMA);
+    }
+    return ready;
+  }
+
+  return {
+    async read(cacheKey) {
+      await init();
+      const row = await db.getFirstAsync(
+        'SELECT root, root_etag, user FROM roots WHERE cache_key = ?',
+        [cacheKey]
+      );
+      if (row === null) {
+        return null;
+      }
+      const pageRows = await db.getAllAsync('SELECT page_id, page FROM pages WHERE cache_key = ?', [
+        cacheKey,
+      ]);
+      return {
+        root: JSON.parse(row.root),
+        rootEtag: row.root_etag,
+        user: JSON.parse(row.user),
+        pages: Object.fromEntries(pageRows.map((page) => [page.page_id, JSON.parse(page.page)])),
+      };
+    },
+    async writeRoot({ cacheKey, entry }) {
+      await init();
+      await db.runAsync(
+        'INSERT OR REPLACE INTO roots (cache_key, root, root_etag, user) VALUES (?, ?, ?, ?)',
+        [cacheKey, JSON.stringify(entry.root), entry.rootEtag ?? null, JSON.stringify(entry.user)]
+      );
+    },
+    async writePage({ cacheKey, pageId, page }) {
+      await init();
+      await db.runAsync(
+        'INSERT OR REPLACE INTO pages (cache_key, page_id, page) VALUES (?, ?, ?)',
+        [cacheKey, pageId, JSON.stringify(page)]
+      );
+    },
+    // One caller's cache: an organisation that refused the person.
+    async removeEntry({ cacheKey }) {
+      await init();
+      await db.runAsync('DELETE FROM roots WHERE cache_key = ?', [cacheKey]);
+      await db.runAsync('DELETE FROM pages WHERE cache_key = ?', [cacheKey]);
+    },
+    // Every caller's cache of one app (getCacheKey starts each key with the app id): sign-out.
+    async removeApp({ appId }) {
+      await init();
+      const prefix = `${appId}:`;
+      await db.runAsync('DELETE FROM roots WHERE substr(cache_key, 1, length(?)) = ?', [
+        prefix,
+        prefix,
+      ]);
+      await db.runAsync('DELETE FROM pages WHERE substr(cache_key, 1, length(?)) = ?', [
+        prefix,
+        prefix,
+      ]);
+    },
+    async removePages({ cacheKey, pageIds }) {
+      await init();
+      for (const pageId of pageIds) {
+        await db.runAsync('DELETE FROM pages WHERE cache_key = ? AND page_id = ?', [
+          cacheKey,
+          pageId,
+        ]);
+      }
+    },
+  };
+}
+
+export default createSqliteCacheStore;

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,90 @@
+/*
+  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 LoadingScreen from './LoadingScreen.js';
+import MessageScreen from './MessageScreen.js';
+import NoConnectionBanner from './NoConnectionBanner.js';
+import ShellContext, { useSessionState } from '../ShellContext.js';
+import ShellThemeProvider from './ShellThemeProvider.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 [openings, setOpenings] = useState(0);
+  useEffect(() => {
+    let active = true;
+    let opened = null;
+    setValue(null);
+    const onSignedOut = () => setOpenings((count) => count + 1);
+    createShellApp({ onSignedOut, shell }).then(({ auth, host, locale, session }) => {
+      if (!active) return;
+      opened = auth;
+      setValue({ auth, host, locale, session, shell });
+      auth.start({ session });
+    });
+    return () => {
+      active = false;
+      opened?.dispose();
+    };
+  }, [openings, shell]);
+  if (value === null) {
+    return <LoadingScreen />;
+  }
+  return (
+    <ShellContext.Provider value={value}>
+      <AuthGate>
+        <AppGate>{children}</AppGate>
+      </AuthGate>
+    </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']);
+});