Boolean controls not responding to tap on iOS

[Koleckoo]

Description
When using @storybook/addon-ondevice-controls v10.1.1 with @storybook/react-native v10.1.1 on iOS, boolean controls in the controls panel do not respond to taps. The Switch UI does not toggle and the value is not updated.

This issue only occurs on iOS - the same controls work correctly on Android.

Behavior
Tapping on the boolean Switch control in the controls panel does nothing
The Switch UI does not visually toggle
The component's prop is not updated
Other control types (select, text, number) work correctly on iOS

Environment
@storybook/react-native: 10.1.1
@storybook/addon-ondevice-controls: 10.1.1
@storybook/addon-ondevice-actions: 10.1.1
@storybook/react: 10.1.9
storybook: 10.1.9
react-native: 0.81.4
react: 19.1.0
@gorhom/bottom-sheet: 5.2.6
react-native-gesture-handler: 2.28.0
Node.js: 22.14.0
iOS: Simulator/Device (both affected)

Steps to Reproduce
Set up Storybook for React Native with the Controls addon
Create a story with a boolean control:

Story file example:

import { Meta, StoryFn } from '@storybook/react-native';
import { MyComponent, MyComponentProps } from './MyComponent';
export default {
  title: 'MyComponent',
  component: MyComponent,
  argTypes: {
    showStatus: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
  },
} as Meta;
export const Default: StoryFn<MyComponentProps> = (props) => (
  <MyComponent {...props} />
);
Default.args = {
  showStatus: true,
  disabled: false,
};

.rnstorybook/main.ts:

const main = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
};
export default main;

Run the app on iOS
Navigate to the story in Storybook
Open the controls panel (tap the edit icon)
Try to tap on any boolean Switch control
Expected: Switch toggles and component updates
Actual: Nothing happens - Switch does not respond to tap
Investigation
Looking at the boolean control implementation in
@storybook/addon-ondevice-controls/dist/types/Boolean.js
:

const BooleanType = ({ arg, onChange }) => (
  (0, jsx_runtime_1.jsx)(Container, { 
    children: (0, jsx_runtime_1.jsx)(react_native_1.Switch, { 
      testID: arg.name, 
      onValueChange: () => onChange(!arg.value), 
      value: arg.value 
    }) 
  })
);

The Switch component uses React Native's native Switch. The issue appears to be a gesture handler conflict with @gorhom/bottom-sheet that Storybook uses for the controls panel. The bottom sheet's pan/tap gesture handlers intercept touch events intended for the Switch on iOS.

This is a known pattern of gesture conflicts documented in react-native-gesture-handler and @gorhom/bottom-sheet issues.

Possible Solutions
Wrap the Switch in a TouchableOpacity or Pressable that handles the tap and calls onChange, with the Switch having pointerEvents="none"
Use gesture handler configuration to prevent the bottom sheet from intercepting Switch touches
Replace the native Switch with a custom toggle component that doesn't rely on native gesture handling

Workarounds
Use boolean controls on Android (they work correctly)
Use select control type with ['true', 'false'] options as a temporary workaround

[dannyhw]

Does this reproduce on a fresh project setup?

[Koleckoo]

I did not have time to try on fresh project yet.

[dannyhw]

without a reproduction theres nothing I can do so im closing the issue until it can be reproduced.

Screen.Recording.2026-01-06.at.13.08.13.mov

[lukisrac]

Hi, I'm joining in because I have exactly the same problem. I can't click on the toggles. It's only an iOS problem, it works fine on Android.

Environment:
"storybook": "^10.2.0",
"@storybook/addon-ondevice-actions": "^10.1.11",
"@storybook/addon-ondevice-controls": "^10.1.11",
"@storybook/react-native": "^10.1.11",
"react": "19.1.0",
"react-native": "0.81.4",
"@gorhom/bottom-sheet": "^5.2.8",
"react-native-gesture-handler": "^2.30.0",

Story example:

export const Default: Story = {
	storyName: 'Playground',
	render: (args) => {
		const [, updateArgs] = useArgs();

		const leftElement: SafeRenderOutput = args.leftElement ? (
			<PbkIcon name={PbkIconNameEnum.bulbLight} size={'tiny'} />
		) : null;
		const rightElement: SafeRenderOutput = args.rightElement ? (
			<PbkIcon name={PbkIconNameEnum.moon} size={'tiny'} />
		) : null;

		const onChange = (newValue: PbkToggleValue) => {
			updateArgs({ value: newValue });
			action('onChange')(newValue);
		};

		return (
			<PbkToggle
				{...args}
				onChange={onChange}
				leftElement={leftElement}
				rightElement={rightElement}
			/>
		);
	},
	argTypes: {
		value: {
			control: {
				options: { true: true, false: false, indeterminate: 'indeterminate' },
				type: 'radio',
			},
		},
		disabled: {
			control: {
				type: 'boolean',
			},
		},
		disabledWithOpacity: {
			control: {
				type: 'boolean',
			},
		},
		leftElement: {
			control: {
				type: 'boolean',
			},
		},
		rightElement: {
			control: {
				type: 'boolean',
			},
		},
	},
	args: {
		value: false,
		disabled: false,
		disabledWithOpacity: false,
	},
};

[dannyhw]

Im not sure use args will
Work here

I think you might be better just doing use state instead of

Or entirely control the state from the arg

Looks to me like you intercepted the onchange and yet always pass false in the arg

[lukisrac]

I only followed the instructions in the official documentation https://storybook.js.org/docs/writing-stories/args#setting-args-from-within-a-story, because otherwise the state switching did not work for me.

But even if I use another approach as you suggest, the UI problem with switching toggles persists.

I would say that it is more likely some problem with the bottom sheet that @Koleckoo points out.

I will try to see if I can solve it with some package patch.

[dannyhw]

@lukisrac yes but those docs don't take into account that its possible the use args hooks don't work on react native.
we had to implement another solution for RN since the global storybook hooks don't work yet, so im not sure how that interacts with those hooks.

if you think its the bottomsheet then please try the lite ui and see if it works better

import { LiteUI } from "@storybook/react-native-ui-lite";

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },

  CustomUIComponent: LiteUI,
});

[lukisrac]

Ah, okay, I understand.

So I tried LiteUI and the problem is still the same 😕

[dannyhw]

@lukisrac can you please create a project that reproduces this issue and share it with me? I would be able to fix it much easier if I can see the issue.

[lukisrac]

This is happening in our company project, which I unfortunately can't share. It's a pure React Native project (no Expo) with a custom dev client.

I'll try to set it up on a clean project in my free time to see if it works as it should. It's possible that it's just some specifics in our monorepo (but idk which) 😕

@Koleckoo Did you manage to find any working solution?

[dannyhw]

first thing I would try is making sure that all your storybook dependency versions are aligned

[lukisrac]

So it turned out that this issue in React Native was the cause.

And it's already fixed in this PR. So in my case it was enough to upgrade RN to new version (>= 0.81.5).

[dannyhw]

thanks for the update @lukisrac appreciate it 🙏