IOS Keyboard dismisses in control section

[LouisGrdn]

Describe the bug
When I open the control section and try to enter a value with the keyboard, it instantly dismiss.
The only way I found is to open entirely the section but a black square above the keyboard avoid me to see the section.

To Reproduce
Steps to reproduce the behavior:

1. Go to a component

2. Open the control section

3. Try tp enter a data like number or text

4. See keyboard dismisses

5. Open the entire section

6. Try to enter a data which open the keykoard

7. See a black square above the IOS keyboard

Expected behavior
The keyboard appears under the control section and allow to see the data while entering it.

Screenshots

ScreenRecording_02-03-2025_16-03-52_1.mov

Additional context
I'm in the 8.3.5 version of storybook

"@storybook/addon-ondevice-controls": "^8.3.5",
"@storybook/react-native": "^8.3.5",

[dannyhw]

@LouisGrdn please check with the latest version 8.5.3, I've never seen this behaviour before

[dannyhw]

here what I see on the current version

Clipboard-20250203-201052-621.mp4

[LouisGrdn]

I only have the bug after building the app not with the emulator.

Still the same with 8.5.3

ScreenRecording_02-03-2025_21-18-18_1.mov

[dannyhw]

On my iphone its working normally, are you referring to a release build version? Could you provide as many details as possible about how i could reproduce this?

For example:

Steps you took to create the build
What phone you are using
Expo/Rncli
Etc

If you're able to create a reproduction where i can easily follow steps to recreate the bug that would be ideal.

[LouisGrdn]

Sure,
I'm building the app with Expo and had the bug with an iPhone 13 and someone else also had the bug on his iPhone 13.
The version of expo I use is 52.0.23.

Here is a similar test to one I have on my application where I have the bug when I want to enter a size :

const meta: Meta<typeof IconButton> = {
  title: 'Components/IconButton',
  component: IconButton,
  decorators: [CenteredStory],
  render: ({ size }) => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <IconButton size={size} setState={setOpen} />
        <Text testID={'openWitness'}>{open ? 'Open' : 'Close'}</Text>
      </>
    );
  },
  argTypes: {
    size: {
      type: 'number',
    },
  },
};

export const Default: StoryObj<typeof IconButton> = { args: { size: 50 } };

With a decorator :

export const CenteredStory = (Story: any) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Story />
  </View>
);

Let me know if you need anything else :)

[dannyhw]

@LouisGrdn please describe exactly the commands you are running in the terminal, how you are running the app. I also have an iphone13 and I had no issues so i'm going to need the exact process you went through to cause the problem since you're saying it doesn't happen on the emulator

The most useful thing you could provide is a minimal project reproducing the problem with detailed instructions on how to do it, including full details on what kind of build/start commands you are using to launch the app and any other details that could be relevant.

Also please let me know if this happens for all stories or just some, does it happen on a fresh project or only on your project?

[LouisGrdn]

For now, I can tell you that to access the storybook screen, I use a env variable to switch between the app and the storybook in the provider only with a button.

I don't have time now, but I'll be able to provide you a minimal project reproducing the problem at the end of the week for you to test it.

Moreover, it also happens for all stories which has data that can be entered with the phone keyboard. Actually, i didn't try on other project but I'll see with the minimal project I'll do soon.