【React Native】Animatedを使って画像をフェードインさせる

React Native アプリで、画像を徐々に表示させる方法についてです。
全く方法が分からず、ライブラリを追加する必要があるのかと思いきや、React Native に標準で用意されている Animated を使えば一発解決でした！

今回参考にさせていただいたサイトはこちらから。

【React Native】Animatedを使ったアニメーションの実装方法 | プログラマーを目指す 「中卒」 男のブログ
https://chusotsu-program.com/react-native-animated/

実装方法ですが、まず Animated をインポートして、フェードインさせたい要素を置き換えます。

import { Animated, View } from 'react-native';

<View>
  <Animated.Text
    style={{...styles.title, opacity: this.state.opacity }}>テキスト</Animated.Text>
  <Animated.Image
    source={require('[画像パス]')}
    style={{...styles.logo, opacity: this.state.opacity }}
    resizeMode='contain' />
</View>

なお、style や props は、React Native 標準の <Text> や <Image> と同じ指定方法で大丈夫です。

次に、state に opacity を追加し、初期値に new Animated.Value(0) を指定します。

this.state = {
  opacity: new Animated.Value(0),
}

あとは、画像の不透明度を徐々に 0 から 1 に変更していく処理を追加すれば完了です！
コードは下記のとおりです。

Animated.timing(this.state.opacity, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,
}).start();

私は componentDidMount() 内に上記を記述し、ページを開いたら画像とテキストが徐々に表示するようにしました。
追加するコードは以上です！
duration の値を変更すれば、フェードインの時間を変更できるので、素早く表示させたり、逆にゆっくりと表示させたりできます。
こちらは実際に動かしながら調整するのがいいと思います。

予想していたよりもはるかに簡単に実装出来ました！

以上、React Native アプリで画像やテキストをフェードイン表示させる方法でした。
ご参考になれば幸いです。