0

I created a progress bar using react-native-reanimated and react-native-redash that is working fine but now I want to pause the progress or clock when the app is going to the background state and when the app comes to the active state it should be resume with the last position and the time.

clock config


const runTiming = (clock, quizDurationTiming) => {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    frameTime: new Value(0),
    time: new Value(0),
  }
  const config = {
    toValue: new Value(1),
    duration: quizDurationTiming * 10,
    easing: Easing.in(Easing.ease),
  }

  return block([
    cond(
      not(clockRunning(clock)),
      set(state.time, 0),
      timing(clock, state, config)
    ),
    cond(eq(state.finished, 1), stopClock(clock)),

    state.position,
  ])
}

const SpecialTestTimer = ({
  preparationTime,
  appState,
  quizDurationTiming,
}) => {
  const [isCompleted, setIsCompleted] = useState(false)
  const clock = useClock()
  const progress = useValue(0)
  const [play, setPlay] = useState(true)
  const isProgress = useValue(0)

  useEffect(() => {
    if (appState == "active") setPlay(true)
    else setPlay(false)
  }, [appState])

  useCode(() => set(isProgress, play ? 1 : 0), [play])

  useCode(
    () => [
      cond(and(progress, not(clockRunning(clock))), startClock(clock)),
      cond(and(not(progress), clockRunning(clock)), stopClock(clock)),

      set(progress, runTiming(clock, quizDurationTiming)),
    ],
    []
  )
}

I wrote this code but not working properly like which I want. when I go to the screen clock is not starting but when I came to the app after the background state then the clock is starting.

Denis Tsoi
  • 9,428
  • 8
  • 37
  • 56
Sk Sk
  • 21
  • 5
  • 1
    Please refer to App State doc here https://reactnative.dev/docs/appstate. You can attach listeners and start/stop your clock accordingly. – Sameer Kumar Jain Sep 18 '20 at 11:02
  • Thanks for the response but I already attached a listener in the `parent` component – Sk Sk Sep 18 '20 at 11:05
  • So what's your problem ? – BloodyMonkey Sep 18 '20 at 11:49
  • @BloodyMonkey the problem is that the `clock` is not stopping at the first time when the app is going to the `background` state. mean when the app is going to the `background` state then comes in `active` state then again goes to `background` state then the `clock` is stopping. – Sk Sk Sep 18 '20 at 12:17

0 Answers0