Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native Storybook

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for AppFoundry AppFoundry
October 19, 2017
Programming
0
480

React Native Storybook

A brief presentation on React Native Storybook by Senne Van Cauwenberge

Avatar for AppFoundry

AppFoundry

October 19, 2017
Tweet

More Decks by AppFoundry

See All by AppFoundry
Introductie iOS - Jens
Avatar for AppFoundry appfoundrybe
0
110
Android In Practice
Avatar for AppFoundry appfoundrybe
0
150
Android Introduction 3.0 by Siebe
Avatar for AppFoundry appfoundrybe
0
120
Android in Practice (long)
Avatar for AppFoundry appfoundrybe
0
210
React Native - cross-platform mobile app development
Avatar for AppFoundry appfoundrybe
0
190
the ionic crash course
Avatar for AppFoundry appfoundrybe
1
190
View based apps with Conductor
Avatar for AppFoundry appfoundrybe
0
650
Android Accessibility at GDG Devfest Brussels 2016
Avatar for AppFoundry appfoundrybe
0
650
Cooking with Spek
Avatar for AppFoundry appfoundrybe
0
660

Other Decks in Programming

See All in Programming
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
470
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
1
610
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
370
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
100
Unity6.3 AudioUpdate
Avatar for Cova8bitdots cova8bitdots
0
120
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
780
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
340
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
550
AIコーディングの理想と現実 2026 | AI Coding: Expectations vs. Reality 2026
Avatar for Tomohisa Takaoka tomohisa
0
1.2k
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
130
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
400
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
260
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
140
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
270
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
140
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180

Transcript

  1. React Native Storybook

  2. Why?

  3. Why? We create a lot of UI components

  4. Why? We create a lot of UI components These components

    have multiple states Reusable Componen

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

    states Reusable Components

  6. What?

  7. Getting Started

  8. Getting Started $getstorybook

  9. Getting Started

  10. Getting Started

  11. Getting Started

  12. Addons

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

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

  15. Links With links you can link stories together.
 (And make

    prototypes)

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

    Storybook UI.

  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.

  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.

  19. Storyshots

  20. Fin