Overview

Your tab is part of the app, so it can use whatever the app can. Import your store and read it. When that state changes, the tab updates with it, because it is the same state and not a copy of it. A button in the tab calls your real function.

No fork of the DevTools frontend, no browser extension, no second window, and no bundler: you describe what the tab shows and this renders it.

npm install @axonpack/react-native-devtools-tab

A tab is a component

import { ReactNativeDevtoolsPanel } from '@axonpack/react-native-devtools-tab';

function Session() {
  const { user } = session.use();

  return (
    <div style={{ padding: 12 }}>
      <p>signed in as {user}</p>
      <button onClick={() => auth.signOut()}>sign out</button>
    </div>
  );
}

ReactNativeDevtoolsPanel.registerTab({ name: 'Session', component: Session });

registerTab is the one call. Call it once per tab, wherever in the app you like.