Возможно ли использование 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, таймер не останавливался , а продолжал свою работу?