[Android]Modal becomes invalid state when power button is pressed.

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 8.3.0
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: 4.7.0
  Xcode: Xcode 9.4.1 Build version 9F2000
  Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Description

This issue only confirmed in Android 7.x Pressing power button when Modal component is displayed causes invalid state of Modal. I see Modal contents disappears but its transparent background remains after Pressing power button again and screens turns on.

With Android 6.x or 8.x, Both modal contents won’t be hidden with the same operation.

Reproducible Demo

The code is almost same as Modal official document

https://github.com/satoshikumano/RN-Modal-Test

[satoshikumano]

Workaround Snippet:

import React, { Component } from 'react'
import { AppState, Platform, Modal } from 'react-native'

const isAndroid7 = Platform.OS === 'android' && (Platform.Version === 24 || Platform.Version === 25)

export default class ModalContainer extends Component<{}> {
  state = {
    appState: AppState.currentState
  }

  componentDidMount () {
    if (isAndroid7) {
      AppState.addEventListener('change', this.handleAppStateChange)
    }
  }

  componentWillUnmount () {
    if (isAndroid7) {
      AppState.removeEventListener('change', this.handleAppStateChange)
    }
  }

  handleAppStateChange = (nextAppState) => {
    this.setState({ appState: nextAppState })
  }

  render () {
    let { visible } = this.props
    const { appState } = this.state
    visible = isAndroid7 ? (visible && appState === 'active') : (visible)
    return (
      <Modal
       visible={visible}
        animationType='none'
        transparent={true}
      >
        {this.props.children}
      </Modal>
    )
  }
}

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.