Возможно ли использование RNBackground timer или его аналогов в expo

Есть страничка таймера

 export default function Tabata({route}) {
    const [timeRemaining, setTimeRemaining] = useState(route.params.prepTime)
    const [phase, setPhase] = useState("Prep")
    const [numExercisesCompleted, setNumExercisesCompleted] = useState(0)
    const [roundsCompleted, setRoundsCompleted] = useState(0)

    useEffect(() => {
        if (numExercisesCompleted <= route.params.exerciseArr.length) {
            // in a round
            if(timeRemaining > 0)
                setTimeout(() => {
                    setTimeRemaining(timeRemaining - 1)
                }, 1000)
            else if (numExercisesCompleted === 0) {
                setNumExercisesCompleted(numExercisesCompleted + 1)
                setPhase("Round")
                setTimeRemaining(route.params.roundDuration)
            }
            else if (phase === "Break") {
                setPhase("Round")
                setTimeRemaining(route.params.roundDuration)
            } else if (phase === "Round") {
                setNumExercisesCompleted(numExercisesCompleted + 1)
                setPhase("Break")
                setTimeRemaining(route.params.breakDuration)
            }
        } else if (roundsCompleted <= route.params.numRounds) {
            // start a new round or end if all rounds complete
            if (roundsCompleted === route.params.numRounds - 1) {
                setPhase("end")
            } else {
                setRoundsCompleted(roundsCompleted + 1)
                setNumExercisesCompleted(0)
                setTimeRemaining(route.params.prepTime)
                setPhase("Prep")
            }
        } else {
            setPhase("end")
        }
    }, [timeRemaining])


    return (
        <Screen>
            <ScrollView>
                <View style={styles.navBar}>
                    <Image style={styles.logo} source={require("../assets/talog.jpg")} />
                </View>
                <View style={styles.timerContainer}>

                    {phase !== "end" &&
                        <>
                            <View style={styles.exercisesContainer}>
                                <Text style={styles.headerText}>Exercises: {numExercisesCompleted} / {route.params.exerciseArr.length}</Text>
                            <Text style={styles.headerText}>Rounds: {roundsCompleted} / {route.params.numRounds}</Text>
                            </View>
                            <Text style={styles.boldText}>{phase}</Text>
                            <Text style={styles.boldText}>{numExercisesCompleted === 0 ? route.params.exerciseArr[0] : route.params.exerciseArr[numExercisesCompleted - 1]}</Text>
                            <Text style={styles.timer}>{timeRemaining}</Text>
                        </>
                    }

                    {phase === "end" && <Text style={styles.done}>Done!</Text>}

                </View>

                <View style={styles.timesContainer}>
                    <View style={styles.timeTitleContainer}>
                        <Text style={styles.timeTitle}>Times</Text>
                    </View>
                    <View style={styles.timesSetContainer}>
                        <Text style={styles.text}>Prep: {route.params.prepTime}</Text>
                        <Text style={styles.text}>Round: {route.params.roundDuration}</Text>
                        <Text style={styles.text}>Break: {route.params.breakDuration}</Text>
                    </View>
                </View>
            </ScrollView>
        </Screen>
    )
}

app.js

  logger.start()

const Stack = createStackNavigator()
const StackNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Welcome" component={WelcomeScreen} options={{headerShown: false}}/>
    <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }}/>
    <Stack.Screen name="Tabata" component={TabataScreen}/>
  </Stack.Navigator>
)

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator/>
    </NavigationContainer>
  )
}

и логгер

import Bugsnag from "@bugsnag/expo"

const log = (error) => Bugsnag.notify(error)

const start = () => Bugsnag.start()

export default { log, start }

Возможно ли сделать так, чтобы при сворачивании приложения Expo, таймер не останавливался , а продолжал свою работу?


Ответы (0 шт):