website

Javascript/Typescript ReactNative Tech

【ReactNative】StorybookでModalを扱う方法

2022年2月20日

「ロナえる」の夫です。

今回はReactNativeのStorybookでModalを扱う上でのTipsを共有します

前提

  • エミュレータでしかStorybookを表示できない
  • previewで表示したい

単純にStorybookでModalを表示しようとすると

まずは、Modalを表示するために、Modal.stories.jsを次のように作成してみます。

通常だと、「NAVIGATOR」で、Storyを選択すると、「PREVIE」に対象のUIが表示されます。

しかし、Modalの場合、選択と同時に、全面にModalが表示されます。

しかも、Modalが全面に表示されているため、他の操作を受け付けなくなります。

1. Modalを表示する「test」を選択すると

2. Modalが全面に表示されます

Modalを確認できるようにするにはどうしたら良いか

今回のTipsは、完璧な方法ではなく、「PREVIEW」で表示する方法になります。

具体的には、

  1. PREVIEWでボタンを設置
  2. ボタンを押すとModalを表示
  3. Modalは一定期間で非表示

のように対応します。

では、Modal.stories.tsxを書き換えてみましょう。

Modalの表示非表示を切り替えるには、useStateで状態を切り替えてあげる必要があります。

そのため、レンダリングするコンポーネントだけでなく、いくつか制御するコードも記述できる書き方が必要です。

上の要件を満たすためには、

を利用します。

これにより、useStateを利用することができます。

実際に、Buttonを制御してあげるとこんな感じになります。

1. PREVIEWではボタンが表示

2. ボタンをクリックすると、Modalが表示

3. 2秒後にModalが非表示

最後に

今回は、時間制御でModalを非表示にしました。

Modal自身にボタン等が付いていれば、それで非表示でもOKだと思います。

-Javascript/Typescript, ReactNative, Tech,