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

React Native Storybook

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for AppFoundry AppFoundry
October 19, 2017
Programming
480
0

React Native Storybook

A brief presentation on React Native Storybook by Senne Van Cauwenberge

Avatar for AppFoundry

AppFoundry

October 19, 2017

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
130
Android in Practice (long)
Avatar for AppFoundry appfoundrybe
0
220
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
660
Android Accessibility at GDG Devfest Brussels 2016
Avatar for AppFoundry appfoundrybe
0
660
Cooking with Spek
Avatar for AppFoundry appfoundrybe
0
670

Other Decks in Programming

See All in Programming
Nuxt Server Components
Avatar for wattanx wattanx
0
240
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
130
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
160
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
320
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
2
480
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
440
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
430
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
110
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
120
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
310
Tamach-sre-3_ANDPAD-shimaison93
Avatar for shimaison93 mane12yurks38
0
240

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
Leo the Paperboy
Avatar for Maya Tellez mayatellez
6
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
300
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
250
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k

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