Dimensions does not emit change event when iPad first enters split view (multitasking)

[robertying]

Dimensions does not emit change event when iPad first enters split view (multitasking).

This only happens when you first move an app beside React Native app and they share each half of the screen. And Dimensions event listener does not get fired at this moment.

When you start to swipe the splitting border in the middle, after you drop the touch, it works properly.

React Native version:

System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
    Memory: 101.40 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.11.1 - ~/.n/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - ~/.n/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2

Steps To Reproduce

1. react-native init App
2. react-native run-ios
3. Add listener in App.js:

    useEffect(() => {
      Dimensions.addEventListener('change', ({window, screen}) => {
        console.log('window.width ' + window.width);
        console.log('screen.width ' + screen.width);
      });
    }, []);

4. Swipe another app to make the App into multitasking.

Describe what you expected to happen:

Dimensions should fire an event when iPad goes into multitasking and the App shrinks its size to the half.

Reproduce repo

https://github.com/robertying/dimensions-ipad-multitasking

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the React Native version: section?

If you believe this information is irrelevant to the reported issue, you may write `[skip envinfo]` alongside an explanation in your Environment: section.

[KazatoUematsu]

Exactly the same.

The behavior is like this video (on my tweet).

App.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';

const App = class extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      windowWidth: Dimensions.get('window').width,
      windowHeight: Dimensions.get('window').height,
      changeCount: 0,
    };

    Dimensions.addEventListener("change", (dims) => {
      this.setState((prevState) => ({
        windowWidth: dims.window.width,
        windowHeight: dims.window.height,
        changeCount: prevState.changeCount + 1,
      }));
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View
          style={[
            styles.box,
            { width: this.state.windowWidth * 0.5, height: this.state.windowHeight * 0.5 }
          ]}
        >
          <Text>window : {this.state.windowWidth} × {this.state.windowHeight}</Text>
          <Text>change count : {this.state.changeCount}</Text>
        </View>
      </View>
    );
  }
}

export default function App() {
  return (
    <App />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    backgroundColor: 'yellow',
    alignItems: 'center',
    alignSelf: 'center',
    justifyContent: 'center',
  },
});