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

React Native Storybook

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
140
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
180
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
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
310
MUSUBIXとは
Avatar for Hisaho nahisaho
0
100
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.7k
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
200
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
270
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
1.3k
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
130
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
0
980
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
210
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
260
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
5.9k

Featured

See All Featured
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
48
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
750
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
2
200
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
160
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
97
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
36
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k

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