@storybook/addon-ondevice-controls theme context not provided to PropForm component

[alexshadie]

Description

When using @storybook/addon-ondevice-controls v10.1.0 with @storybook/react-native v10.1.0, the Controls addon fails with a theme context error when trying to render the controls panel.

Error

TypeError: Cannot read property 'size' of undefined
at theme.typography.size.s2
in PropForm.js

The error occurs because the PropForm component uses styled components from @storybook/react-native-theming which expect the theme to come from a ThemeProvider context, but theme.typography is undefined when accessed.

Environment

• @storybook/react-native: 10.1.0
• @storybook/addon-ondevice-controls: 10.1.0
• @storybook/addon-ondevice-actions: 10.1.0
• react-native: 0.76.1
• react: 18.3.1

Steps to Reproduce

1. Set up React Native Storybook with the Controls addon:

.storybook/main.ts:

import type { StorybookConfig } from "@storybook/react-native"

const config: StorybookConfig = {
    stories: ["../src/components-ui/**/*.stories.?(ts|tsx|js|jsx)"],
    addons: [
        "@storybook/addon-ondevice-controls",
        "@storybook/addon-ondevice-actions",
    ],
}

export default config

.storybook/Storybook.tsx:

import AsyncStorage from "@react-native-async-storage/async-storage"
import { view } from "./storybook.requires"

const StorybookUI = view.getStorybookUI({
  storage: AsyncStorage,
})

export default StorybookUI

2. Create a story with args
3. Run the app and navigate to Storybook
4. Tap the edit icon (bottom right) to open the Controls panel
5. Error appears: TypeError: Cannot read property 'size' of undefined

Investigation

The PropForm component in @storybook/addon-ondevice-controls/dist/PropForm.js uses styled components that reference theme properties:

const Label = styled.Text(({ theme }) => ({
    fontSize: theme.typography.size.s2 - 1,  // <- Error here
    fontWeight: 'bold',
    color: theme.color.defaultText,
}));

The FullUI component in @storybook/react-native-ui does wrap everything with ThemeProvider:

const FullUI = ({ storage, theme, storyHash, story, children }) => {
  return (
    <ThemeProvider theme={theme}>
      {/* ... */}
    </ThemeProvider>
  );
};

However, the theme context is not reaching the PropForm component, causing theme.typography to be undefined.

Attempted Solutions

1. Passing theme via getStorybookUI - Did not resolve the issue
2. Adding theme to preview.tsx parameters - Did not resolve the issue
3. Using default theme (no custom theme config) - Still fails with the same error

Workaround

Temporarily disable the Controls addon in main.ts:

const config: StorybookConfig = {
    stories: ["../src/components-ui/**/*.stories.?(ts|tsx|js|jsx)"],
    addons: [
        // "@storybook/addon-ondevice-controls", // Disabled due to theme bug
        "@storybook/addon-ondevice-actions",
    ],
}

Expected Behavior

The Controls addon should render without errors, allowing users to interactively modify component props through the controls panel.

Additional Context

This appears to be a regression or incompatibility between the addon and the theming system in v10.1.0. The theme is being passed to FullUI but not propagating correctly to the addon panels.

[dannyhw]

Can you provide a public repro with those versions of react and react native? That would save a lot of time on my side. I don't have this issue on any example project so the only thing i can think of is if you have storybook dependency thats not aligned to the same version as the others.

[alexshadie]

Hi @dannyhw! I will doublecheck on my side, will report my findings after that. Let's deprioritize or close this issue for now. Thank you.