React NativeでHStack・VStackが使えるレイアウト・ライブラリ6選

SwiftUIのHStack/VStackは画面全体のレイアウトをわかりやすくしてくれて便利ですね。React Nativeでも同じようなレイアウト・システムを使えないか、探してみました。

export const HomeScreen = () => (
  <VStack space={4} >
    <HStack space={8}>
      <Cell />
      <Cell />
      <Cell />
    </HStack>
    <HStack>
      <Cell />
      <Cell />
      <Cell />
    </HStack>
  </VStack> 
);

(2021.11.19) SwiftUI React Native を追加しました。

React NativeでStackが使えるレイアウト・ライブラリ

React Native Stacks(react-native-stacks)

SwiftUI inspired Stack and Spacer components

提供しているコンポーネントが限られていて(VStack、HStack、ZStack、Spacer)シンプルな構成です。逆にこれくらいの方が導入しやすいという気もします。レイアウト時に「ストレッチ」を使いたいことが結構ありますが、そのためのSpacerが用意されているのが良いと思いました。

https://github.com/andrew-levy/react-native-stacks

Stacks(@mobily/stacks)

Margin considered harmfulをモチベーションとしたレイアウト全般をカバーしたライブラリです。コンポーネント数は多め。ドキュメントがだいぶしっかりしています。Gridがサポートされています。

https://mobily.github.io/stacks/

Native Layout Stack(native-layout-stack)

Idea This library recreates SwiftUI components in React Native

とあるので、こちらもSwiftUIのレイアウト・コンポーネントを目指したもののようです。小規模なライブラリです。Expo Snackのサンプルがあります。

https://github.com/native-ly/native-layout-stack

NativeBase(native-base)

こちらはReact Native向けのUIライブラリ、NativeBaseです。レイアウト系のコンポーネントが充実しています。中の人がHStack・VStackはSwiftUIからヒントを得たと言っていました。レイアウト・コンポーネントだけを利用するには少しライブラリのサイズが大きいのが難点でしょうか。

https://nativebase.io/

Chakra UI

React向けUIコンポーネント・ライブラリとして人気のChakraもBox, Grid, Stackなどのレイアウト・コンポーネントを提供しています。今後React Native版を提供する予定とのことなのでリストに加えてみました。

https://chakra-ui.com/

SwiftUI React Native (2021.11.19追加)

SwiftUI is awesome. So is React Native! This library aims to recreate some of the best SwiftUI features in React Native applications.

SwiftUIをReact Nativeで再現しようというなかなか野心的なプロジェクトです。VStack、HStack、ZStack、Spacerもサポートされています。

https://github.com/andrew-levy/swiftui-react-native

まとめ

React Nativeで使えるレイアウト・ライブラリについて調べてみました。

HStack、VStackはReact NativeのViewコンポーネントを使えば簡単に実装できますが、コンポーネントとして機能を共通化するメリット、名前をつけることで様々な画面レイアウトをぱっと見で把握しやすくなるメリットがあり、チーム開発でのDX向上が見込めると思います。

コンテナとなるこれらのコンポーネントで「space」「spacing」をつかって間隔を調整することで、子コンポーネントのマージン指定を排除することを強制できるのも良いですね。

はじめてこのブログを読んだ方へ: U-motionとは？

U-motionは牛の首につけたセンサーを使って活動内容を記録、AIの力で健康状態を解析して畜産農家さんをサポートするモニタリング・システムです。

U-motion開発部は、

• センサーから集めたデータを処理するバックエンド・システム
• データをグラフ化するReactベースのウェブ・アプリケーション
• 牛の健康状態の変化をプッシュ通知のアラートでお知らせするReact Nativeベースのスマホ・アプリケーション

などを開発中。こちらのアカウントでは、開発時に得た知見を公開しています。

https://www.desamis.co.jp/product/

https://www.youtube.com/watch?v=6Bw1wXX0i3s