【React Native】「react-native-inset-shadow」を使って要素の内側に影を付ける

タイトル通り、React Native で要素の内側に影を追加する方法についてです。
最終的には別の方法を使ったため、実際にアプリでは使われてはいないのですが、折角なのでまとめ。

GitHub のページはこちらから。

rohailaltaf/react-native-inset-shadow: Inset shadows for react native components
https://github.com/rohailaltaf/react-native-inset-shadow

ライブラリをインストールは下記のコマンドで行います。

npm install react-native-inset-shadow --save

上記の実行が完了したら、あとはプロジェクトの任意の場所に実装していきます。

import { Text, View } from 'react-native'
import InsetShadow from 'react-native-inset-shadow';

<View style={{ height: 150 }}>
  <InsetShadow>
    <View style={{ flex: 1, justifyContent: 'center', alignSelf: 'center'}}>
      <Text>This view has an inset shadow!</Text>
    </View>
  </InsetShadow>
</View>

GitHub のサンプルコードをそのまま転載させて頂いています。
上記のように記載すると、<View /> の内側に影が追加されます！
Props も用意されていますが、よっぽど変わったデザインにしない限りはデフォルトのままで良さそうでした。

さて、上記のように実装が簡単なライブラリですが、私がこれを使わなかった理由は、borderRadius が使えなかったからです。
厳密に言えば、borderRadius は効くのですが、内影が丸くなるのではなく、上下左右の一部分を残して影が見えなくなる形で角丸になるので、今回私が実装したかったデザインとそぐわず…という感じでした。
そのため、以前紹介した「react-native-radial-gradient」ライブラリを使って、それらしい円形の影を実装しました。
もし、円形の要素の内側に影を付けたい場合は react-native-radial-gradient を使った円形グラデーションで実装すると良さそうです。

以上、React Native の「react-native-inset-shadow」ライブラリを使って要素の内側に影を付ける方法についてでした。
ご参考になれば幸いです。