State Updates Not Reflected in PIP Mode with New Architecture enabled
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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:
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el ejemplo de contador de Android proporcionado y compara su comportamiento en React Native 0.75 frente a 0.76+ con la New Architecture habilitada. Inspecciona la ruta de Fabric/PIP implicada por el informe y utiliza los vídeos de prueba enlazados como referencia. Se considera terminado cuando las actualizaciones de estado siguen apareciendo mientras la aplicación está en modo PIP, sin depender de react-native-background-timer.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100