React Native for Web で Flexbox をデフォルトにする

React Native に慣れていると React Native for Web のデフォルトが Flexbox でないことに違和感を覚えるでしょう。書き味を同じようにする設定を紹介します。

なお、 React Native for Web の環境を作る際は次の記事を参考にしてください。

https://dev.classmethod.jp/articles/introduce-react-native-for-web/

追記

公式ドキュメントにやり方が載っていることを教えてもらいました。 HTML ファイルに直でスタイル指定する方法ですね。どの手法ともマッチしそうです。

@janus_wel
公式ドキュメントでわかりづらい場所に書いてあるのが悪いのですが、Guides > Client-sideにも該当の問題についての設定方法が言及されていますhttps://t.co/oNXhGIs75K pic.twitter.com/WlnMhYmZqP

— なかざん (@Nkzn) May 12, 2020

TL;DR

次の CSS を適用させましょう。

html {
  display: flex;
  height: 100%;
}
body {
  display: flex;
  flex: 1;
}
#root {
  display: flex;
  flex: 1;
}

#root セレクターは React ルートコンポーネントのマウントポイントです。実際の環境に合わせて変更してください。

適用した例は次です。参考にしてください。

https://github.com/januswel/apply-flexbox-globally

実験用のコンポーネント定義

Flexbox 用の最低限のコンポーネント定義です。

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

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>centerized</Text>
    </View>
  );
}

これを表示すると、横方向はセンタリングされますが、縦方向は画面の一番上となってしまいます。

スタイルを当てる

素直に Flexbox を適用する CSS を当てていきましょう。 html 、 body 、 ルートコンポーネントのマウントポイントそれぞれに display: flex; を指定し、 body とマウントポイントに対して親要素の縦幅いっぱいとするため、 flex: 1; を指定します。

html {
  display: flex;
}
body {
  display: flex;
  flex: 1;
}
#root {
  display: flex;
  flex: 1;
}

ここまでのスタイル指定でも意図通りになっていません。その理由は縦方向の高さが画面の高さとなっていないことです。 html 要素に height を指定しましょう。

html {
  height: 100%;
  display: flex;
}

うまくいきました。

まとめ

create-react-app を使わない場合、 webpack と css-loader の組み合わせなど、バンドルツールを使いましょう。