When using @storybook/native-components with Storybook, the EmulatorRenderer component consistently renders at the bottom of the documentation page, regardless of its position in the MDX or TSX file. This behavior persists even when trying to intersperse the emulator with documentation blocks, limiting the ability to structure interactive documentation effectively.
Steps to reproduce the behavior
Create a Storybook story using @storybook/native-components.
Use EmulatorRenderer in an MDX or TSX file.
Attempt to intersperse Markdown or JSX documentation blocks before and after EmulatorRenderer.
Observe that EmulatorRenderer always renders at the bottom of the page in the Storybook UI.
Expected behavior
The expected behavior is for the EmulatorRenderer to respect its position within the MDX or TSX file, allowing it to be placed between documentation blocks or in specific sections of the documentation page.
Code
import { Meta } from '@storybook/addon-docs/blocks';
import { EmulatorRenderer } from "@storybook/native-components";
<Meta title="Components/POC" />
# POC Component
This section introduces the POC component, providing context and overview information.
## POC Emulator Example
Below is the POC component rendered in the emulator:
<EmulatorRenderer
apiKey="--------------------------"
platform="ios"
storyParams={{ component: "poc" }}
deepLinkBaseUrl="sb-native://deep.link"
/>
## Detailed Explanation
After experiencing the POC component in the emulator, here's a detailed explanation of its features, usage guidelines, and other relevant information.
This issue significantly impacts the ability to create structured and interactive documentation using Storybook with native components, particularly when trying to provide a guided experience that integrates interactive elements with explanatory text.
Describe the bug
When using
@storybook/native-components
with Storybook, theEmulatorRenderer
component consistently renders at the bottom of the documentation page, regardless of its position in the MDX or TSX file. This behavior persists even when trying to intersperse the emulator with documentation blocks, limiting the ability to structure interactive documentation effectively.Steps to reproduce the behavior
@storybook/native-components
.EmulatorRenderer
in an MDX or TSX file.EmulatorRenderer
.EmulatorRenderer
always renders at the bottom of the page in the Storybook UI.Expected behavior
The expected behavior is for the
EmulatorRenderer
to respect its position within the MDX or TSX file, allowing it to be placed between documentation blocks or in specific sections of the documentation page.Code
Screenshots and/or logs
https://github.com/storybookjs/native/assets/9013995/1b4a3d3e-b008-4b29-bc7a-b9231c9478e0
Environment
Additional context
This issue significantly impacts the ability to create structured and interactive documentation using Storybook with native components, particularly when trying to provide a guided experience that integrates interactive elements with explanatory text.