State Updates Not Reflected in PIP Mode with New Architecture enabled
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
I’ve encountered an issue with state updates not reflecting in Picture-in-Picture (PIP) mode starting from React Native 0.76, which I believe is related to the new architecture (Fabric) being enabled by default.
To demonstrate the issue, I created a simple counter using the react-native-background-timer library.
The code is a simplified example created solely to replicate the issue. In my actual use case, I am not using react-native-background-timer. Instead, I perform state updates, such as resizing the video player when switching to Picture-in-Picture (PIP) mode. However, these state updates stop working once the app enters PIP mode, and this behavior only occurs in React Native 0.76 and above.
Steps to reproduce
import BackgroundTimer from 'react-native-background-timer';
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = BackgroundTimer.setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => BackgroundTimer.clearInterval(intervalId);
}, []);
return (
<View style={styles.container}>
<Text style={styles.counter}>{count}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
counter: {
fontSize: 48,
fontWeight: 'bold',
},
});
export default App;
This example works perfectly fine in React Native 0.75 and below. However, in version 0.76 and above (with the new architecture enabled), the state does not update once the app goes into PIP mode.
React Native Version
0.76.0 onwards or when newArch in enabled
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
-
Stacktrace or Logs
-
Reproducer
Screenshots and Videos
Video Links
You can access the following videos:
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从提供的 Android 计数器示例开始,比较其在启用 New Architecture 时 React Native 0.75 与 0.76+ 上的行为。检查报告所涉及的 Fabric/PIP 路径,并参考链接中的测试视频。当应用处于 PIP 模式时状态更新仍能继续显示,且不依赖 react-native-background-timer,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100