React Native での elevation 活用術

はじめに

Androidでもelevationを使用して画像のように綺麗な影を設定する方法

問題

elevationプロパティを指定すると、画像のような不自然な見た目になることがあります。

ts

style={{
  width: 100,
  height: 100,
  borderWidth: 3,
  borderRadius: 10,
  borderColor: 'blue',
  shadowColor: 'red',
  elevation: 10,
}}

解決方法

elevationと合わせてbackgroundColorも指定しましょう

ts

style={{
  width: 100,
  height: 100,
  borderWidth: 3,
  borderRadius: 10,
  borderColor: 'blue',
  shadowColor: 'red',
  elevation: 10,
+  backgroundColor: 'white' // 白背景を追加
}}

おわりに

elevationはbackgroundColorとセットで使用するといいかもしれません

参考

• https://reactnative.dev/docs/view-style-props#elevation-android
• https://developer.android.com/training/material/shadows-clipping?hl=ja#Elevation