MDX doc doesn't work with react-native installation

[renanbronchart]

Describe the bug I followed this doc: https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

But after all configurations, MDX files can't be resolved. And I have this error on my simulator.

And I can't follow some issues about that because I haven't the same directory generated. I have /storybook/index.js and not /.storybook/main.js. I don't know why, but that have been generated by the command: npx -p @storybook/cli sb init --type react_native

To Reproduce I've followed the react-native doc with storybook, and I've just added a storyloader file.

// storybook/storyLoader.js

// Auto-generated file created by react-native-storybook-loader
// Do not edit.
//
// https://github.com/elderfo/react-native-storybook-loader.git

function loadStories() {
  require('../src/uikit/badge/badge.stories');
}

const stories = ['../src/uikit/badge/badge.stories'];

module.exports = {
  loadStories,
  stories,
};

// storybook/index.js

// if you use expo remove this line
import { AppRegistry } from 'react-native';

import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import { loadStories } from './storyLoader';

import './rn-addons';

// enables knobs for all stories
addDecorator(withKnobs);

// import stories
configure(() => {
  loadStories();
}, module);

// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);

export default StorybookUIRoot;

// storybook/rn-addons.js

import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';

// storybook/addons.js

import '@storybook/addon-essentials';
import '@storybook/addon-docs';
import '@storybook/preset-typescript';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';

// src/uikit/badge/badge.stories.mdx

import { View, Text } from 'react-native';
import Badge from './Badge';
import colors from '../colors';
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta
  title="MDX/Badge"
  component={Badge}
  argTypes={{
    style
    radius
    backgroundColor
    rounded

    radius: {
      name: 'Badge radius',
      description: 'radius number on the Badge',
      control: {
        type: 'range'
      },
      table: {
        defaultValue: {
          summary: '0'
        },
        type: {
          summary: 'number',
        },
      },
    },
    rounded: {
      name: 'Badge rounded boolean',
      description: 'If Badge is rounded',
      control: {
        type: 'boolean'
      },
      table: {
        defaultValue: {
          summary: true
        },
        type: {
          summary: 'boolean',
        },
      },
    },
    backgroundColor: {
      name: 'background color',
      description: 'The background color Badge',
      control: {
        type: 'color'
      },
      table: {
        defaultValue: {
          summary: colors.shades.white
        },
        type: {
          summary: 'hex color',
        },
      },
    },
  }}
/>

# Badge

<ArgsTable of={Badge} />

Here the `Badge` component:

<Story name="primary">
  <Badge radius={13} backgroundColor={colors.primary}>
    <Text style={{
      fontSize: 14,
      color: colors.secondary,
      fontWeight: 600
    }}>10</Text>
  </Badge>
</Story>


## Basics usages

<Canvas>
  <Story name="primary">
    <Badge radius={13} backgroundColor={colors.primary}>
      <Text style={{
        fontSize: 14,
        color: colors.secondary,
        fontWeight: 600
      }}>10</Text>
    </Badge>
  </Story>
  <Story name="secondary">
    <Badge radius={24} backgroundColor={colors.secondary}>
      <Text style={{
        fontSize: 18,
        color: colors.primary,
        fontWeight: 600
      }}>50</Text>
    </Badge>
  </Story>
</Canvas>

System Environment Info:

System: OS: macOS 11.5.2 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.3.1 - /usr/local/bin/npm Browsers: Chrome: 99.0.4844.51 Safari: 14.1.2 npmPackages: @storybook/addon-actions: ^5.3 => 5.3.21 @storybook/addon-docs: ^5.3 => 5.3.21 @storybook/addon-essentials: ^5.3 => 5.3.21 @storybook/addon-knobs: ^5.3 => 5.3.21 @storybook/addon-links: ^5.3 => 5.3.21 @storybook/addon-ondevice-actions: ^5.3.23 => 5.3.23 @storybook/addon-ondevice-knobs: ^5.3.25 => 5.3.25 @storybook/addon-storysource: ^5.3 => 5.3.21 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react-native: ^5.3.25 => 5.3.25 @storybook/react-native-server: ^5.3.23 => 5.3.23

[dannyhw]

@renanbronchart I've moved this over to the react native repo since its separate.

MDX is not yet supported in react native so this isn't a bug it's just a missing feature.

However MDX on react native is not necessarily easy. I looked into it once before and I didn't find any well maintained libraries. However its been a while.

If you know of any good way to support MDX in react native I'm open to it.

On another note you can use MDX with addon-react-native-web already so you might be interested in that addon for web storybook.

[dannyhw]

It may be possible to use MDX with storybook via this project from @danieldunderfelt and probably soon I will experiment with it.

https://github.com/danieldunderfelt/rn-mdx

talk about it here: https://portal.gitnation.org/contents/mdx-in-react-native

I think that you could already get it working in your own project if you are willing to experiment a bit. I'm not sure if it could be made more automatic for storybook however maybe someone has ideas?

[chococrypto]

so, were you able to create the documentation?

[dannyhw]

@di1606 as I mention above it should be possible to do manually but I haven't had time to work on a guide or anything unfortunately