react / react/react-native

State Updates Not Reflected in PIP Mode with New Architecture enabled

Open
#50,820 11 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Issue: Author Provided Repro Needs: Attention Needs: Version Info Type: New Architecture
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

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:

  1. Video 1 - Test 75
  2. Video 2 - Test 76

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Android counter example and compare its behavior on React Native 0.75 versus 0.76+ with the New Architecture enabled. Inspect the Fabric/PIP path implicated by the report and use the linked test videos as reference. Done means state updates continue to appear while the app is in PIP mode, without relying on react-native-background-timer.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.