画面を離れてもアニメーションが回り続ける — Rork(Expo)アプリのフォーカス連動でバッテリーを守る

import { useEffect, useState } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
 
/**
 * 画面が前面にあり、かつアプリがアクティブなときだけ true を返す。
 * これを使ってアニメーションの再生・停止を一元化する。
 */
export function useShouldAnimate(): boolean {
  const isFocused = useIsFocused();
  const [appActive, setAppActive] = useState(
    AppState.currentState === 'active'
  );
 
  useEffect(() => {
    const sub = AppState.addEventListener('change', (state: AppStateStatus) => {
      setAppActive(state === 'active');
    });
    return () => sub.remove();
  }, []);
 
  return isFocused && appActive;
}

import { useEffect } from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  cancelAnimation,
  Easing,
} from 'react-native-reanimated';
 
export function BreathingGlow() {
  const shouldAnimate = useShouldAnimate();
  const progress = useSharedValue(0);
 
  useEffect(() => {
    if (shouldAnimate) {
      progress.value = withRepeat(
        withTiming(1, { duration: 4000, easing: Easing.inOut(Easing.ease) }),
        -1,   // 無限
        true  // 往復
      );
    } else {
      cancelAnimation(progress);
      // 落とし穴: cancelAnimation は「その瞬間の値」で止まる。
      // 中途半端なスケールで固まらないよう、静止状態へ戻す。
      progress.value = withTiming(0, { duration: 300 });
    }
    return () => cancelAnimation(progress);
  }, [shouldAnimate]);
 
  const style = useAnimatedStyle(() => ({
    transform: [{ scale: 1 + progress.value * 0.06 }],
    opacity: 0.7 + progress.value * 0.3,
  }));
 
  return <Animated.View style={[styles.glow, style]} />;
}

import { useRef, useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
 
export function AmbientLottie() {
  const ref = useRef<LottieView>(null);
 
  useFocusEffect(
    useCallback(() => {
      ref.current?.play();
      return () => ref.current?.pause(); // フォーカスを失ったら必ず止まる
    }, [])
  );
 
  // autoPlay は付けない。再生制御は useFocusEffect に一本化する。
  return <LottieView ref={ref} source={require('../assets/ambient.json')} loop />;
}

const visibleIds = useSharedValue<string[]>([]);
 
const onViewableItemsChanged = useRef(({ viewableItems }) => {
  visibleIds.value = viewableItems.map((v) => v.item.id);
}).current;
 
const viewabilityConfig = useRef({
  itemVisiblePercentThreshold: 50, // 半分以上見えたら可視扱い
}).current;
 
// 各セル側で visibleIds に自分の id が含まれるかでループの on/off を切り替える