[Bug] EmulatorRenderer always being placed at the bottom of page

[marcosmko]

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

1. Create a Storybook story using @storybook/native-components.
2. Use EmulatorRenderer in an MDX or TSX file.
3. Attempt to intersperse Markdown or JSX documentation blocks before and after EmulatorRenderer.
4. 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.

Screenshots and/or logs

Screen.Recording.2024-01-29.at.12.02.49.mov

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.