はじめに

自分用メモ
適宜増やします。

package.json

抜粋

{
    "react-native": "^0.62.2",
    "react-native-countdown-circle-timer": "^2.3.10",
    "react-native-svg": "^12.1.0",
    "react-native-youtube": "^2.0.1",
    "react-native-sound": "^0.11.0",
    "react-native-volume-control": "^1.0.1",
  }
}

react-native-countdown-circle-timer

ちょっとお洒落なカウントダウンタイマーコンポーネント

注意点

colorsは ["カラーコード", "表示する割合"]の配列として記載すること。
- サンプルでは最後の0.33が記載されていないため注意。
childに(remainingTime, animatedColor)を渡すことで、残り時間(秒)を外周の色と揃えた状態で表示することができる。
react-native-svgを共にインストールすること。

yarn add react-native-countdown-circle-timer
yarn add react-native-svg

<CountdownCircleTimer
    isPlaying
    duration={10}
    colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000", 0.33]]}
    onComplete={() => {
        this.timeupAlert()
        return [false, 1000] // タイマーのループをするかどうか
    }}
>
    {(info) => {    // 「※1 childrenについて」にて補足
        const { remainingTime, animatedColor } = info // animatedColorはTimePropsに存在しないが取得可能
        this.beforeAlert(remainingTime)
        return (
            <View style={{ alignItems: 'center' }}>
                <Text>残り時間</Text>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Animated.Text style={{ color: animatedColor, fontSize: 25 }}>
                        {Math.floor((remainingTime % 3600) / 60)}
                    </Animated.Text>
                    <Text>分</Text>
                    <Animated.Text style={{ color: animatedColor, fontSize: 25 }}>
                        {remainingTime % 60}
                    </Animated.Text>
                    <Text>秒</Text>
                </View>
            </View>
        )
    }
    }
</CountdownCircleTimer>

※1 childrenについて

React側の記事ですがこちらを参照

コンポジション vs 継承

react-native-volume-control

デバイス自身の音量を調整する。

react-native-volume-control

注意点

max音量を1とする。
類似パッケージが多いため注意すること。

import VolumeControl from "react-native-volume-control"

playSound = () => {
    VolumeControl.change(0.5);
}

タイムアップアラーム音を鳴らす

react-native-soundを利用。

import Sound from 'react-native-sound'
import VolumeControl from "react-native-volume-control"
const sound: Sound = new Sound('alarm.mp3', Sound.MAIN_BUNDLE)

playSound = () => {
    VolumeControl.change(VOLUME);  // 再生前にボリュームを上げる
    sound.setNumberOfLoops(-1)     // 効果音をループさせる
    sound.play()                   // 再生
    setTimeout(() => {             // 規定時間鳴らしたら再生を停止する
        sound.stop()
    }, PLAYBACK_TIME)
}

スヌーズをしたいときはsetIntervalを利用。

setIntervalの第一引数にはオブジェクトまたは無名関数を渡すこと
- undefined is not an object (evaluating 'func.apply')のエラーが発生する
- 参考）Why does the setInterval callback execute only once?
スヌーズを止める際にclearTimeout(id)を実行すること

const id = setInterval(this.snooze, SNOOZE.TIME)

snooze = () => {
    this.playSound()
    Alert.alert(SNOOZE.TITLE,SNOOZE.MESSAGE,[{
        text: 'OK',
        onPress: () => {
            sound.stop()
        }
    }])            
}

react-native-youtube

Youtubeを再生するコンポーネント

注意点

APIkeyはGoogleCloudPlatformの「APIとサービス」から作成すること。（無料）
APIkeyの作成方法は Youtube Data API Key の取得手順を参照のこと
Youtubeコンポーネントの上部に別のオブジェクトを配置しないこと。
- 干渉してコントローラーが動かなくなるなどのエラーが発生する
- 上部に別のオブジェクトを配置したい場合はViewを分けること。
playプロパティは効かない場合もあるため注意
fullscreenプロパティはiPadでは動作しない（コントローラーから手動でフルスクリーンモードにすることもできない）
再生の停止はplayプロパティのtrue/falseで制御可能
YoutubeAPI自体ではないため、再生画面のボリュームコントロールなどは実装されていない

_youTubeRef = React.createRef();
render() {
    return (
        <View style={{ backgroundColor: 'black', height: '50%' }}>
                <React.Fragment>
                    <YouTube
                        apiKey={'取得したAPIキー'}
                        ref={this._youTubeRef}
                        videoIds={videoIds}
                        play={this.state.isVideoPlay}
                        fullscreen={false}
                        loop={true}
                        showFullscreenButton={true}
                        showinfo={false}
                        rel={false}
                        style={{ alignSelf: 'stretch', height: '100%' }}
                        onError={(e) => console.log('onError: ', e.error)}
                    />
                </React.Fragment>
        </View>
        )
}