[Bug] EmulatorRenderer always being placed at the bottom of page
Describe the bug
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
EmulatorRendererin an MDX or TSX file. - Attempt to intersperse Markdown or JSX documentation blocks before and after
EmulatorRenderer. - Observe that
EmulatorRendereralways 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.
Screenshots and/or logs
https://github.com/storybookjs/native/assets/9013995/1b4a3d3e-b008-4b29-bc7a-b9231c9478e0
Environment
- OS: MacOS Sonoma 14.2.1
- Node.js version: v18.16.0
- NPM version: 9.5.1
- Browser (if applicable): Chrome
- Browser version (if applicable): 120.0.6099.234
- Device (if applicable): Any
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.