search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.68k stars 1.27k forks source link

[Android + IOS] Run animated when app in background stop after long time (~ 5m) #4590

Open NgocNovus opened 1 year ago

NgocNovus commented 1 year ago

Description

I create 1 timer (15m) to show popup when timer update to 0. I use withTiming with duration 15 60 1000 to create the timer. After run about 10m, i go back the app. the timer stopped I think reanimated thread be killed by IOS

Steps to reproduce

  1. Turn on => IOS: low power mode, Android: battery optimization
  2. Create count value: 15 * 60
  3. Call timing for count value to 0 with 15 60 1000 mili seconds
  4. Press power button
  5. Waiting ~5 minutes
  6. Open device and open app

Update: IMPORTANT: Don't charger plugged in

Snack or a link to a repository

https://snack.expo.dev/@ngoc.le/timing-animated

Reanimated version

3.1.0

React Native version

0.71.8

Platforms

iOS Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

Iphone 11

Acknowledgements

Yes

piaskowyk commented 1 year ago

I have tried to reproduce it but it works for me 😯 Does it happen on real device also or just on simulator?

NgocNovus commented 1 year ago

I test on real device ios and release mode. i'll send video for you tomorrow

NgocNovus commented 1 year ago

@piaskowyk Hi, sorry for late reply. I tried to test on IOS 14.4.2 - Real device - Release Mode. My steps:

piaskowyk commented 1 year ago

Thanks for providing me this informations! It'll help a lot! I'll try it and let you know.

piaskowyk commented 1 year ago

All day I tried to reproduce it but without success 😕 I tested it on:

Do you have any suggestion how I can reproduce it?

ngocle2497 commented 1 year ago

All day I tried to reproduce it but without success 😕 I tested it on:

Do you have any suggestion how I can reproduce it?

Do you wait 5minutes after press lock button? After lock 5m, open your phone and open your app

ngocle2497 commented 1 year ago

Hi @piaskowyk , you can watch my video to see the issue: important: Don't charger plugged in Drive video: https://drive.google.com/file/d/1Dz1Q2qCGAi8UlhJo8PAETKs__15s8xdM/view?usp=sharing My code:

import React, {useEffect, useState} from 'react';
import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import {
  Easing,
  runOnJS,
  useAnimatedReaction,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const TIME = 15 * 60;

const App = () => {
  // state
  const [text, setText] = useState<string>('');
  const count = useSharedValue(TIME);

  // effect
  useAnimatedReaction(
    () => Math.round(count.value),
    v => {
      runOnJS(setText)(v.toString());
    },
  );

  useEffect(() => {
    count.value = withTiming(0, {duration: TIME * 1000, easing: Easing.linear});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // render
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.content}>
        <Text style={styles.text}>{text}</Text>
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 36,
    fontWeight: 'bold',
  },
});

export default App;

My package.json:

{
  "name": "Timer",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.11",
    "react-native-reanimated": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.10",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}
ngocle2497 commented 1 year ago

I think IOS killed reanimated thread

ngocle2497 commented 1 year ago

I'll try it on android, then send video for you

ngocle2497 commented 1 year ago

I know no charger is too hard to debug. i think reanimted should re-calculate shareValue when app will active. pause while app in background. inative we can keep update shareValue.

NgocNovus commented 1 year ago

i confirm that android too. Android: turn on battery optimization

ngocle2497 commented 9 months ago

any update?

bartlomiejbloniarz commented 7 months ago

Hi @masonle2x2 @NgocNovus, I've been trying to reproduce the issue. For me, when I reopened the app, the animation was still running. It however was displaying a wrong value (the timer moved about 30 seconds in those 10 minutes). Is this the issue you are facing, or does the animation stop completely? I cannot access the video you sent, so I unfortunately can't see for myself.

ngocle2497 commented 7 months ago

Hi @bartlomiejbloniarz , thank for the reply. In my case, animation stopped. I think in the save power mode, OS did something to kill animated process. if u turn on save power mode but u still plug the charging, animation still good.

bartlomiejbloniarz commented 7 months ago

@masonle2x2 Have you encountered a device that doesn't have this issue? I was testing it on iPhone 12 mini and couldn't get the animation to stop. I had it unplugged with Low Energy mode enabled.

ngocle2497 commented 7 months ago

@masonle2x2 Have you encountered a device that doesn't have this issue? I was testing it on iPhone 12 mini and couldn't get the animation to stop. I had it unplugged with Low Energy mode enabled.

Yeah. I cant check right now. I can provide in next week. Sorry about that