React Nativeでのスタイリング方法を比較 ~ 2024年冬 ~

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！

React NativeではStyleSheet APIが提供されており、CSSに近い形でスタイリングを行うことが出来ます。
それ以外にも、NativeWindやTamaguiなどのスタイリングライブラリが存在します。
今回はそれらを比較しながら、それぞれのメリットなどをご紹介したいと思います。

スタイリング方法の比較

StyleSheet API

React Native標準のStyleSheet APIは、次のようにStyleSheet.create()でスタイルを定義してViewにスタイルを設定できます。

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Hello = () => (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native</Text>
    </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'lightgray',
  },
  title: {
    backgroundColor: 'yellow',
    borderRadius: 8,
    paddingHorizontal: 16,
    paddingVertical: 8,
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

export default Hello;

実行結果

標準的なCSS-in-JSスタイルでこれだけでも十分ではありますが、WebでTailwindやChakra UIなどでスタイリングを行っている方は同じように行いたいかもしれません。
また、標準のStyleSheet APIの場合はレスポンシブスタイルやテーマ機能を実現するには独自に実装が必要です。
それを解消するために、他のスタイリングライブラリの利用を検討する価値があります。

NativeWind

https://www.nativewind.dev/

NativeWindはTailwindと同じようにUtility-FirstなReact Nativeのスタイリングライブラリです。
WebのTailwind同様に、テーマ機能やレスポンシブにも対応し、プラットフォームごとのスタイリングも可能です。

例えばiOS、Android、それ以外（Web等）でのスタイルを変える場合、次のように指定できます。

<Text className="text-black ios:text-red-500 android:text-blue-500 text-5xl font-bold">
  Hello, React Native!
</Text>

またUIコンポーネントとして、shadcn/uiをベースにして作られたReact Native Reusablesも活発に開発されています。こちらも組み合わせて使うと良さそうです。
https://rnr-docs.vercel.app/getting-started/introduction/

Tamagui

https://tamagui.dev/

TamaguiはChakra UIのようにコンポーネントのインラインでスタイルを設定できるスタイリングフレームワークです。
ビルド時に最適化されるため、高パフォーマンスであることも売りになっています。

スタイリングは次のように行うことが出来ます。

<Text
  color="black"
  bg="$yellow1"
  borderRadius="$1"
  p="$5"
  w="100%"
  // Smallサイズ以上の場合は横幅を自動にする
  $gtSm={{
    w: 'auto',
  }}
  // iOSのときは赤色
  $platform-ios={{
    color: '$red10',
  }}
  // Androidのときは青色にする
  $platform-android={{
    color: '$blue10',
  }}
>
  Hello, React Native!
</Text>

また多くのUIコンポーネントも提供されているため、それらを組み合わせて簡単にアプリケーションを作成できます。
https://tamagui.dev/ui/intro?subpath=intro

react-native-unistyles

https://www.unistyl.es/

react-native-unistylesはStyleSheet APIのスーパーセットと称されています。
実際、StyleSheet APIとほぼ同じAPIでスタイルを定義できますが、レスポンシブ、テーマなどの機能を提供されます。
またC++で実装されていて、パフォーマンスに重点を置いているため、標準のStyleSheet APIとほぼ変わらないパフォーマンスとなっています。

次のように、importを react-native-unistyles に変えるだけなので、標準のStyleSheet APIからの移行が簡単に行えます。

- import { StyleSheet } from 'react-native'
+ import { StyleSheet } from 'react-native-unistyles'

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello world from Unistyles</Text>
    </View>
  )
}

const styles = StyleSheet.create({
   container: {
     backgroundColor: 'red'
   }
})

React Native標準のStyleSheet APIで機能的に足りない場合に検討するとよいでしょう。

トレンド比較

今回比較した3つのスタイリングライブラリをnpm trendsで見てみましょう。

npm trends nativewind vs react-native-unistyles vs tamagui

直近でNativeWindが大きく伸びており、react-native-unistylesも徐々に増えてきてTamaguiと同等になってきているようです。

機能比較

各スタイリング方法の機能比較を行いました。
標準のStyleSheet API以外は機能的な差分はほぼ無いと思います。

ライブラリ	スタイル方法	レスポンシブ	テーマ機能	プラットフォームごとのスタイル指定	Web対応	パフォーマンス
StyleSheet API	StyleSheet	⚠️[1]	⚠️[1:1]	⚠️[1:2]	⚠️[2]	✅
NativeWind	TailWind	✅	✅	✅	✅	✅
Tamagui	styled-component / inline props	✅	✅	✅	✅	✅
react-native-unistyles	StyleSheet	✅	✅	✅	✅	✅

まとめ

NativeWind/Tamagui/react-native-unistylesの3つはどれも活発に開発が行われているため、導入することは比較的安心できると思います。

ただし、一度導入したスタイリングライブラリを別のものに置き換えるにはかなり苦労する^[3]ので、導入前によく検討したうえで決定するとよいでしょう。

それでは良いReact Nativeライフを！

脚注

1. 標準では提供されていないが、独自に実装することで可能

2. スタイル自体は可能だが、Web用のスタイル（z-index や :hover や :active などの擬似クラス）が利用できない

3. 筆者はNativeBaseを利用しているプロジェクトをどうやって移行するか悩んでいる…