Logo
    ExpoにReact Native Paperの導入

    ExpoにReact Native Paperの導入

    はじめに

    ゆとり世代の中野です。

    今回チャレンジした内容は【React Native Paperの導入】です。

    さっそくチャレンジについて書いていきます。

    チャレンジする背景

    • マテリアルデザインのデザインが使いたい
    • Storybookでも動くようにしたい

    チャレンジ内容

    • React Native Paperの導入

    やり方

    packageの追加

    yarn add react-native-paper
yarn add -D @expo/webpack-config

    storybookでreact-native-paperを使うために

    • storybookで動作させるために設定が別途必要のため下記の設定ファイルを作成する
      • .storybook/webpack.config.js
    const { resolve } = require('path');
const { withUnimodules } = require('@expo/webpack-config/addons');

module.exports = ({ config }) => {
  return withUnimodules(config, { projectRoot: resolve(__dirname, '../') });
};

    まとめ

    • packageの追加すればすぐに使えます
    • storybookでも使えるようにするには設定ファイルを作成する必要があります

    さいごに

    導入自体は簡単に出来ました

    関連記事

    ExpoにStorybookを導入する

    ゆとり世代の中野です。

    yutanakano.com

    ExpoにStorybookを導入する

    yutanakano

    WEBエンジニア

    大阪生まれのゆとり世代です

    趣味はバイクでツーリングに行くこと

    愛車は Ninja ZX-25R SE KRT EDITION

    Expoでプロダクトを作っています

    image

    ©ゆとりちゃれんじ

    GitHubXInstagram