Utility Firstに生まれ変わったNativeBase 3.0つまみ食い

Installation

$ expo install native-base styled-components styled-system react-native-svg react-native-safe-area-context

• Utilityの仕組み
  • NativeBaseはstyled-systemを使っている模様
  • responsiveの仕組みもだいたい一緒っぽい
• Stack/VStack/HStack
  • ZStackはChakraにも無い部分
  • ちなみにChakraでは<Stack spacing={4}>だが、NativeBaseは<Stack space={4}>がちょっと罠
• Factory機能
  • chakara(Box)みたいなやつ
  • https://docs.nativebase.io/nativebase-factory/
• Default Theme カラー体系・サイズ数値
  • https://docs.nativebase.io/default-theme/
  • これはTailwind系の基本みたいな感じかも。
  • でもNativeBaseはサイズに0.5とかが無い
• コンポーネント関連はかなり近い
  • Avater / KBDとかはあまり見られないので、これは意識してそうに思える

Chakraとの違い中心の話

• BoxにonPressが出来ない
  • これはReactNativeの都合かも
  • Tapさせたい場合はPressableを利用する必要アリ
• Stackにdividerを設定出来ない
  • 地味に便利だったのでちょっと物足りなさある

正道: 気合で置き換える

• 量が少なくてそこそこテストがあればこれでいけそう
• とりあえずマイグレーションガイドはこのへんにある。コンポーネントごとにまとまってるのは嬉しい
  • https://docs.nativebase.io/migration/Guide/
• とはいえ、あまりに別物すぎて厳しい可能性ありそう
  • 自分の場合はそれほど多用してなかったのでちょっとで済みそうだった
• 一部名前や使い方だけ一緒で別物になってそうなコンポーネントとかもありそうな気配だったので、結構怖いかも

案1: webpackとかゴニョゴニョして3系と2系わけていく

• TypeScript考えると厳しそう
• というかRNのwebpackとかいじるのやばそうでは

案2: 一旦別のUIライブラリで置換して切り替える二段階方式

• 急がば回れ？
• react-magnus-uiとかは結構思想が近いのでこの対象には良いかも
  • https://magnus-ui.com/
• TypeScriptも入れてない状況だとこれぐらいしか安全にやっていく方法は無いかも・・・

https://github.com/th3rdwave/react-native-safe-area-context/pull/196/files

Listがかなり変化してる

• 2.0系のListは、LayoutとしてのListだったが、3.0系は<ul>``<li>のようなListと見たほうが近そう
  • 3.0系にListItemが消えているので、おそらく型で気づく気もしつつ・・・
  • 何も表示されなかったりしたら疑ったほうが良さげ
• マイグレーションガイドなさそう・・・

Toastがとてもよい

• https://docs.nativebase.io/toast
• hooksベースでナウい
• migrationガイド見ると差がわかりやすい
  • https://docs.nativebase.io/migration/Toast

• Themeがめっちゃ改善されてる
  • 2.0のThemeはほとんどモンキーパッチみたいなレベルで実質使えない印象だった
  • https://docs-v2.nativebase.io/Customize.html#theme-and-variables-headref
  • 3.0のThemeは今風に初期設定して上書きする形なので現実的に利用可能