Spinner を作って学ぶ React Native アニメーション

React Native の View と StyleSheet を使って Spinner (ローディングアニメーション) を作って、React Native のアニメーションに親しむ。

コードはここにある
https://github.com/ishikawa/react-native-simple-spinner-example

実装方針は以下の通り

• boarderRadius で円を描き、
• borderColor, borderTopColor で別々の色を指定して、Spinner の見た目を作る
• transform: [{ rotate: rotateValue }] で回転アニメーションを追加

ただし、React Native のバグにより、Android の場合、borderRadius と borderXXXColor を組み合わせると一部の色のみを変更できないので、背景を別の View で描画する

https://github.com/ishikawa/react-native-simple-spinner-example/pull/1

アニメーションのループには Animated.loop()

    Animated.loop(
      Animated.timing(spinValue, {
        toValue: 360,
        duration,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();

Animated.Value の変換 (transform に渡すのは 180deg のような値) には interpolate メソッドを使う。

  const rotateValue = spinValue.interpolate({
    inputRange: [0, 360],
    outputRange: ['0deg', '360deg'],
  });

ActivityIndicator · React Native が既にある。

• Platform ごとに異なる見た目。Web だと SVG による Spinner

props も合わせる？

ActivityIndicator のソースコード
https://github.com/facebook/react-native/blob/ff9c8cdac9b1734ad5f193116880b7b91e08bc6e/Libraries/Components/ActivityIndicator/ActivityIndicator.js

React Native Web のソースコード
https://github.com/necolas/react-native-web/blob/2d9dca42fa67d09de8ff2de323c622b47a820354/packages/react-native-web/src/exports/ActivityIndicator/index.js

アニメーションを一時停止して再開する場合は setValue(n) で初期化しないとうまく動かない。

• react native - Restarting animation with callback values - Stack Overflow

React Native では number も色指定に使えるのか。0xff00ff00 みたいな 16 進数表記が使える。

Android の場合、View を重ねても、メインの色を指定したのと逆側の border に薄っすらとメインの色がついてしまう。OS バージョン依存もありそうだし、やっぱり Android は厳しいかな...。