$30 off During Our Annual Pro Sale. View Details »

React Native Storybook

AppFoundry
October 19, 2017

React Native Storybook

A brief presentation on React Native Storybook by Senne Van Cauwenberge

AppFoundry

October 19, 2017
Tweet

More Decks by AppFoundry

Other Decks in Programming

Transcript

  1. React Native
    Storybook

    View Slide

  2. Why?

    View Slide

  3. Why?
    We create a lot of UI components

    View Slide

  4. Why?
    We create a lot of UI components
    These components have multiple states
    Reusable Componen

    View Slide

  5. Why?
    ate a lot of UI components
    mponents have multiple states
    Reusable Components

    View Slide

  6. What?

    View Slide

  7. Getting Started

    View Slide

  8. Getting Started
    $getstorybook

    View Slide

  9. Getting Started

    View Slide

  10. Getting Started

    View Slide

  11. Getting Started

    View Slide

  12. Addons

    View Slide

  13. Links Knobs
    Notes Info Options
    Storyshots Console Readme
    Addons
    Actions

    View Slide

  14. Actions
    Allow you to inspect events related to your
    components.

    View Slide

  15. Links
    With links you can link stories together.

    (And make prototypes)

    View Slide

  16. Knobs
    Allow you to edit React props dynamically
    using the Storybook UI.

    View Slide

  17. Notes
    Allows you to write notes for each story in your
    component.
    Info
    Allows you to build a nice-looking style guide
    with docs, automatic sample source code with a
    PropType explorer.

    View Slide

  18. Options
    Allows you to customise the Storybook webapp UI.
    Console
    Redirects console output (logs, errors, warnings)
    into Action Logger Panel.
    Readme
    Allows you to add docs in markdown format for
    each story.

    View Slide

  19. Storyshots

    View Slide

  20. Fin

    View Slide