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
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
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
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
200
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
170
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
7
3.2k
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
200
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
560
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.4k
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
AI 開発合宿を通して得た学び
Avatar for ニフティ株式会社 niftycorp
PRO
0
180
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
430
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
300
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
120
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
420
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
89
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
230
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
89
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.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