React Native Paperを使ったら、UIデザインの悩みから解放された話

はじめに

React Nativeでアプリを作り始めたものの、ボタン一つ、入力欄一つのデザインを整えるだけで何時間も溶けてしまった——そんな経験はありませんか。ネイティブの標準コンポーネントはプラットフォームごとに見た目がバラバラで、影のつけ方やタップ時のフィードバックまで自前で実装するのは想像以上に骨が折れます。

私自身、社内ツールのモバイル版を作っていたときにこの壁にぶつかりました。デザイナーからは「Material Designっぽくしてほしい」と言われたものの、細部を一つひとつ手作業で再現するのは非現実的でした。そこで導入したのがReact Native Paperです。結果として、UIの見た目や挙動に悩む時間が激減し、機能実装に集中できるようになりました。

React Native Paperとは

React Native Paperは、Callstackが開発・メンテナンスしているReact Native向けのUIコンポーネントライブラリです。Googleの Material Design ガイドラインに準拠したコンポーネント群を提供しており、iOSとAndroidの両方で一貫した見た目と操作感を実現できます。MITライセンスで公開されており、GitHub上でも多くの開発者に利用されている定番の選択肢です。

主な特徴

• Material Design準拠 - Button、Card、TextInput、Appbarなど、Material Designのガイドラインに沿ったコンポーネントがそのまま使えます。
• テーマ機能が充実 - ライト/ダークモードの切り替えや、ブランドカラーに合わせたカスタムテーマの適用がPaperProvider一つで完結します。
• アクセシビリティへの配慮 - スクリーンリーダー対応やタップ領域の確保など、アクセシビリティ面もあらかじめ考慮された設計になっています。
• Expo/CLIどちらにも対応 - Expo管理下のプロジェクトでもReact Native CLIのプロジェクトでも、追加のネイティブ設定なしに導入できます。

インストール

npmまたはyarnでパッケージを追加します。あわせてアイコン表示に必要なreact-native-vector-iconsも導入しておきましょう。

# npmの場合
npm install react-native-paper react-native-vector-icons

# yarnの場合
yarn add react-native-paper react-native-vector-icons

Expoプロジェクトの場合は、アイコンライブラリの代わりに@expo/vector-iconsがプリインストールされているため、追加設定なしでそのまま利用できます。

基本的な使い方

React Native Paperのコンポーネントを使うには、アプリのルートをPaperProviderでラップする必要があります。これによりテーマ情報がアプリ全体に行き渡ります。

// App.js
import * as React from 'react';
import { PaperProvider, Button, Text } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <PaperProvider>
      <View style={styles.container}>
        <Text variant="headlineMedium">こんにちは、Paper！</Text>
        <Button mode="contained" onPress={() => console.log('押されました')}>
          はじめる
        </Button>
      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
  },
});

Buttonのmodeプロパティを変えるだけで、塗りつぶし・アウトライン・テキストのみといったMaterial Design標準のバリエーションを簡単に切り替えられます。

実践的なユースケース

続いて、フォーム入力とカードレイアウトを組み合わせた、実務でよくある画面を作ってみます。

import * as React from 'react';
import { PaperProvider, TextInput, Card, Button, Appbar } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

function ProfileEditScreen() {
  const [name, setName] = React.useState('');
  const [bio, setBio] = React.useState('');

  return (
    <View style={styles.screen}>
      <Appbar.Header>
        <Appbar.Content title="プロフィール編集" />
      </Appbar.Header>

      <Card style={styles.card}>
        <Card.Content>
          <TextInput
            label="名前"
            value={name}
            onChangeText={setName}
            mode="outlined"
            style={styles.input}
          />
          <TextInput
            label="自己紹介"
            value={bio}
            onChangeText={setBio}
            mode="outlined"
            multiline
            numberOfLines={4}
            style={styles.input}
          />
        </Card.Content>
        <Card.Actions>
          <Button mode="contained" onPress={() => console.log({ name, bio })}>
            保存する
          </Button>
        </Card.Actions>
      </Card>
    </View>
  );
}

export default function App() {
  return (
    <PaperProvider>
      <ProfileEditScreen />
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  card: { margin: 16 },
  input: { marginBottom: 12 },
});

Appbarでヘッダーを、Cardで情報のまとまりを、TextInputのoutlinedモードで入力欄を構成するだけで、それらしいプロフィール編集画面が完成します。バリデーションエラーの表示もTextInputのerrorプロパティを使えば、赤枠とヘルパーテキストが自動で反映されるため、デザインの調整に悩む必要がありません。

ダークモード対応も簡単です。MD3LightThemeやMD3DarkThemeを切り替えてPaperProviderに渡すだけで、アプリ全体の配色を一括で反転できます。

import { PaperProvider, MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
import { useColorScheme } from 'react-native';

export default function App() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme;

  return (
    <PaperProvider theme={theme}>
      {/* アプリのコンテンツ */}
    </PaperProvider>
  );
}

まとめ

React Native Paperを導入したことで、Material Designに沿ったUIをゼロから組み立てる手間がなくなり、ボタンやフォームの見た目に悩む時間を機能開発に回せるようになりました。PaperProviderでテーマを一元管理できる点や、Card・Appbar・TextInputといった実務でよく使うコンポーネントが最初から揃っている点は、特にチーム開発において強力な武器になります。

これからReact Nativeアプリのデザインを整えたいと考えている方は、まずは小さな画面からReact Native Paperを取り入れてみてください。公式サイト（reactnativepaper.com）にはコンポーネントごとのデモも用意されているので、実装前にどんな見た目になるか確認しながら進められます。