React Native で要素に影をつける

React Native でアプリを作る際に、要素に影をつける時の指定方法とその属性の解説です。

StyleSheet を使って簡単に影を表現できますが、OS で実装が異なるのでその部分についてのメモです。 とはいえ簡単に実装できるので、一度やってみたら簡単に覚えられるはずです。

ドキュメント

公式のドキュメントにも詳細書いてあります。

https://reactnative.dev/docs/shadow-props

OS ごとに影の Style の指定方法が異なる部分は要注意です。 異なる OS の指定については無視されるので、OS を指定しての Style 分岐は必要なく両方指定しておけば問題ありません。

iOS の場合

要素に渡せる Style Props として以下のものが用意されています。

shadowColor

影の色を指定できます。web で指定する時の box-shadow の color プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowColor: "#333",
  },
});

shadowOffset

影のオフセットを指定できます。 影の位置みたいなものですが、どの方向に伸びるのかという指定になります。 width が横方向、height が縦方向です。マイナスの値を指定できます。

web で指定する時の box-shadow の offset-x, offset-y プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowOffset: { width: 4, height: 4 },
  },
});

shadowOpacity

影の不透明度を指定できます。 shadowColor にて不透明度を指定するのと同じです。両方で指定した場合掛け合わせた数値が表示に反映されます。

const styles = StyleSheet.create({
  button: {
    shadowOpacity: 2,
  },
});

shadowRadius

影のぼかしの大きさを指定できます。 0 を指定した場合はぼかしのないくっきりした影、大きい値を指定するほどぼかしが強くなります。

web で指定する時の box-shadow の blur-radius プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowRadius: 4,
  },
});

Android の場合

Android の場合はelevation を使います。 web でいう z-index も同時に指定されます。

const styles = StyleSheet.create({
  button: {
    elevation: 4,
  },
});

React Native での影の表現を試せる Web ページを自作しました

上記実際にアプリ作って試せばすぐわかるのですが、簡単に影のStyleを調べたい時があったので、Web 上で React Native の影の表現を試せるページを自作しました。

React Native U-tools / React Native Shadow Simulator

React Native Web で作っているので、React Native のコードが Web の表現に置き換えられて表示されてます。 完全にアプリのものと一致するわけではないですが、影に関するパラメータの挙動確認に役立っています。

おわりに

Web の CSS と似た形での指定になるのでわかりやすいです。この辺が React Native のいいところですね。

OS によって変えないといけない部分は少し厄介ですが、そこさえ理解しておけばいろんな表現ができます。