🐛 Storybook Bottom Sheet Menu Not Opening When Stories Use React Native Reanimated

[rakeshsinha01]

Describe the bug
Storybook's bottom sheet menu becomes completely non-functional when displaying stories that contain components using React Native Reanimated. The menu icon appears at the bottom of the screen but is unresponsive - tapping it does nothing and the bottom sheet panel fails to open. This prevents access to controls, actions, and all other on-device addons.

Importantly, this issue only occurs when viewing stories with Reanimated-based components. Stories with plain React Native components work perfectly, and the bottom sheet menu functions normally.

To Reproduce
Steps to reproduce the behavior:

1. Create a React Native component that uses Reanimated APIs (useAnimatedStyle, useSharedValue, withTiming, etc.)
2. Create a Storybook story for this component
3. Launch Storybook in your React Native app
4. Navigate to the story containing the Reanimated component
5. Look at the bottom of the screen - the menu icon is visible
6. Tap the menu icon to open the addons/controls panel
7. Observe: Nothing happens - the bottom sheet doesn't slide up and remains unresponsive

Expected behavior
When tapping the bottom menu icon, Storybook should:

• Open a bottom sheet panel sliding up from the bottom of the screen
• Display the controls addon showing the component's props/argTypes
• Display the actions addon and other registered on-device addons
• Allow users to interact with story controls to test different component states

This behavior works correctly for stories that don't use Reanimated, but fails for stories with Reanimated components.

Screenshots
N/A - The issue is functional (touch interaction) rather than visual. The UI appears correct but the interaction is broken.

Storybook-Reanimated-Issue.mov

Code snippets

Component with Reanimated (triggers the bug)

// components/Button/Button.tsx
import React, { useEffect } from 'react';
import Animated, { 
  useAnimatedStyle, 
  useSharedValue, 
  withRepeat, 
  withTiming,
  cancelAnimation,
  Easing
} from 'react-native-reanimated';
import { Pressable, Text } from 'react-native';
import { Icon } from "../Icon/Icon";

interface ButtonProps {
  isLoading?: boolean;
}

export const Button: React.FC<ButtonProps> = ({ isLoading = false }) => {
  const rotation = useSharedValue(0);

  useEffect(() => {
    if (isLoading) {
      rotation.value = withRepeat(
        withTiming(360, { duration: 1000, easing: Easing.linear }),
        -1
      );
    } else {
      cancelAnimation(rotation);
      rotation.value = 0;
    }
  }, [isLoading]);

  const animatedLoaderStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${rotation.value}deg` }],
  }));

  return (
    <Pressable>
      {isLoading && (
        <Animated.View style={animatedLoaderStyle}>
          <Icon icon={faSpinner} />
        </Animated.View>
      )}
      <Text>Button</Text>
    </Pressable>
  );
};

Story Configuration

// components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-native';
import { Button } from './Button';

const meta = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    isLoading: { control: 'boolean' },
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Loading: Story = {
  args: {
    isLoading: true,
  },
};

export const Default: Story = {
  args: {
    isLoading: false,
  },
};

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

package.json (dependencies)

{
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.75.4",
    "react-native-reanimated": "3.16.7",
    "react-native-gesture-handler": "2.20.0",
    "react-native-svg": "^15.10.1",
    "styled-components": "^6.1.0"
  },
 "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@gorhom/bottom-sheet": "^5.2.3",
    "@react-native-async-storage/async-storage": "^2.2.0",
    "@react-native-community/cli": "^14.0.0",
    "@react-native-community/cli-platform-android": "^14.0.0",
    "@react-native-community/cli-platform-ios": "^14.0.0",
    "@react-native-community/datetimepicker": "^8.4.4",
    "@react-native-community/slider": "^4.5.7",
    "@react-native/babel-preset": "0.75.4",
    "@react-native/eslint-config": "0.75.4",
    "@react-native/gradle-plugin": "0.75.4",
    "@react-native/metro-config": "0.75.4",
    "@react-native/typescript-config": "0.75.4",
    "@storybook/addon-ondevice-actions": "^9.1.4",
    "@storybook/addon-ondevice-controls": "^9.1.4",
    "@storybook/react-native": "^9.1.4",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^8.4.1",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-dom": "18.3.1",
    "react-native-gesture-handler": "^2.28.0",
    "react-native-safe-area-context": "^5.6.0",
    "react-test-renderer": "18.3.1",
    "storybook": "^9.1.4",
    "typescript": "5.0.4"
  },
}

System:

Environment Info:

  Storybook: 9.1.4
  React Native: 0.75.4
  React Native Reanimated: 3.16.7
  React Native Gesture Handler: 2.20.0
  
  Addons:
    @storybook/addon-ondevice-controls: 9.1.4
    @storybook/addon-ondevice-actions: 9.1.4
  
  Platform: iOS/Android
  Package Manager: pnpm
  Project Type: Monorepo

Additional context

Key Observations

1. Works with non-Reanimated components: The bottom sheet menu functions perfectly when viewing stories that don't use Reanimated
2. Breaks only with Reanimated components: The issue occurs exclusively when displaying stories containing components that use Reanimated APIs
3. Component renders correctly: The Reanimated component itself displays and animates properly in the story
4. Menu icon is visible: The UI element appears at the bottom but has zero touch interaction
5. No console errors: In most cases, there are no error messages indicating the problem

Since React Native Reanimated is the recommended and most widely used animation library for React Native, this severely limits Storybook's utility for contemporary React Native development.

[dannyhw]

Thanks for raising an issue. Do you know if this happens on ios too? I did actually fix a bug like for android recently.

[dannyhw]

Best thing would be if you could privide a public reproduction i can easily debug this in. Otherwise it could take me a really long time to try and reproduce

[rakeshsinha01]

@dannyhw Yes, this is happening on iOS too.

Also let me check if I can set up a public reproduction. In the meantime, please try using the same Reanimated snippet I mentioned — I think you’ll be able to reproduce it that way.

[dannyhw]

Adding the same component to the example project doesn't cause that same issue, atleast it doesn't on ios in my example project

Maybe its your reanimated version or something?

reanimatedreproattempt.mp4

[rakeshsinha01]

@dannyhw
Just to give more context, we have a design system package for mobile that exports the Button component along with several other UI components. The Button in this package uses Reanimated internally, which might be why it’s interacting differently with the BottomSheet compared to other components.

"react": "18.3.1",
"react-native": "0.75.4",
"react-native-reanimated": "3.16.7",
"styled-components": "^6.1.0"

In the consumer app, I have:

"react": "18.3.1",
"react-native": "0.75.4",
"react-native-reanimated": "3.16.7",
"react-native-gesture-handler": "2.20.0",
"react-native-svg": "^15.10.1",
"styled-components": "^6.1.0"

And in devDependencies:

"@gorhom/bottom-sheet": "^5.2.3"

My hunch is it might be related to the versions of Reanimated, Gesture Handler, or Gorhom BottomSheet or am I missing something. All other components work smoothly, but the Reanimated Button seems to prevent the BottomSheet from opening.

Could you also share the versions you’re using for the example where it works?

[dannyhw]

Its the one in https://github.com/storybookjs/react-native/blob/cc20e5ee9d9e7584eaefe71cc76e25dec5110a94/examples/expo-example/package.json

 "dependencies": {
    "@babel/plugin-transform-class-static-block": "^7.27.1",
    "@expo/metro-runtime": "~6.1.2",
    "@gorhom/bottom-sheet": "^5.2.6",
    "@react-native-async-storage/async-storage": "2.2.0",
    "@react-native-community/datetimepicker": "8.4.4",
    "@react-native-community/slider": "5.0.1",
    "@storybook/addon-ondevice-actions": "^9.1.4",
    "@storybook/addon-ondevice-backgrounds": "^9.1.4",
    "@storybook/addon-ondevice-controls": "^9.1.4",
    "@storybook/addon-ondevice-notes": "^9.1.4",
    "@storybook/addon-react-native-server": "^1.0.0",
    "@storybook/global": "^5.0.0",
    "@storybook/react": "^9.1.8",
    "@storybook/react-native": "^9.1.4",
    "@storybook/react-native-theming": "^9.1.4",
    "@storybook/react-native-ui-lite": "^9.1.4",
    "@storybook/react-native-web-vite": "^9.1.8",
    "babel-plugin-react-compiler": "^19.1.0-rc.3",
    "expo": "^54.0.10",
    "expo-updates": "~29.0.11",
    "react": "19.1.0",
    "react-compiler-runtime": "^19.1.0-rc.3",
    "react-dom": "19.1.0",
    "react-native": "0.81.4",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-reanimated": "~4.1.1",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-svg": "15.12.1",
    "react-native-web": "^0.21.0",
    "react-native-worklets": "0.5.1",
    "storybook": "^9.1.8",
    "storybook-addon-deep-controls": "^0.9.5",
    "ws": "^8.18.0"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@testing-library/react-native": "14.0.0-alpha.1",
    "@types/react": "~19.1.10",
    "@types/ws": "^8.5.10",
    "babel-plugin-react-docgen-typescript": "^1.5.1",
    "jest": "^29.7.0",
    "jest-expo": "~54.0.12",
    "typescript": "~5.9.2",
    "universal-test-renderer": "^0.6.0",
    "vite": "^7.1.5"
  } 

[dannyhw]

are you using nativewind at all? because that was causing an issue like this recently and the fix was to update the react-native-css-interop package to the latest version

[rakeshsinha01]

@dannyhw I'm using react-native cli and on react native version 0.75.4, as per the your code snippet tells you're on reanimated 4, we cant go for 4 becuase it requires 0.78+ new architecutre.
And we don;t use nativewind anywhere.

[dannyhw]

ok well if you can send me a reproduction thats probably the best way to figure this out since I don't have any project like that to test with, though expo and rn cli both work as far as I know.

if you want to just move past this you could use the lite-ui as it doesn't use reanimated at all

You just install @storybook/react-native-ui-lite

and then update your project here:

import { view } from './storybook.requires';
import { LiteUI } from '@storybook/react-native-ui-lite';

const StorybookUIRoot = view.getStorybookUI({
  CustomUIComponent: LiteUI, // Lightweight alternative to full UI
  // ... other options
});

export default StorybookUIRoot;

[kevinvenisonowlpeach]

Hello, in my case it was caused by <Storybook/> being wrapped inside <StrictMode>...</StrictMode>.