Does nesting of stories work in React Native?

[janmarsicek]

Hello everyone, just wondering if this feature https://storybook.js.org/basics/writing-stories/#nesting-stories works in React Native apps? The story is nested in web preview but in the app drawer the string is just rendered with hierarchy separator.

Please compare web version:

and RN drawer:

Thanks 🚀

[igor-dv]

I think it does. What is the version of Storybook do you use? Can you please share you config.js?

[janmarsicek]

@igor-dv Thanks for quick reply.

I think I don't have any specific config.js file.

Here is my main file:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

const stories = require.context('../../src/', true, /stories(\.(ios|android|native))?\.js$/);
configure(() => stories.keys().forEach(stories), module);

const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

class StorybookUIHMRRoot extends Component {
    render() {
        return <StorybookUIRoot />;
    }
}

AppRegistry.registerComponent('storybook', () => StorybookUIHMRRoot);

export default StorybookUIHMRRoot;

[igor-dv]

I was under impression that hierarchySeparator is set to / by default, but maybe it's not how it works for RN. You can try adding it with the options addons:

import { setOptions } from '@storybook/addon-options';
...

setTimeout(
  () =>
    setOptions({
      hierarchySeparator: /\//,
    }),
  100
);

[janmarsicek]

Sorry, I forgot to mention that I use version 3.3.10

Thanks for the hint. I will try it.

I briefly looked at the components for stories tree and I don't see anything related to creating hierarchy tree in RN part (see StoryListView). For web UI there is quite complex logic for handling this (see StoriesPanel container and component).

[igor-dv]

Ah 🤦‍♂️ , Sorry @janmarsicek , I've misunderstood your questions. Indeed, hierarchy is implemented only for web Storybook manager. Not for the RN view.

[janmarsicek]

@igor-dv Thanks for your support! Is there a plan to implement similar feature also for RN also in the future?

[igor-dv]

I think there is already a similar feature request somewhere. Maybe @Gongreg knows more about this.

[Gongreg]

Hey, @janmarsicek, @igor-dv. Right now as far as I know there no plans to implement it (correct me if I'm wrong) but it should be implemented in the future, since we want to maintain feature parity between different projects (react, angular, ...). So it makes sense to do it.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[Gongreg]

Closing in favour of #3905

[cloud-walker]

The new issue link shared by @Gongreg is: storybookjs/react-native#12