React-native: Modal component on Android is not underneath a translucent StatusBar, inconsistent with iOS

[calebmer]

When you set translucent to true in a StatusBar component in Android, then open a Modal component, the Modal children are not underneath the status bar like the main content. This is inconsistent to the behavior on iOS where Modal children are underneath the status bar. Therefore as a workaround you need to add a style that looks something like this to the body of a modal:

marginTop: Platform.OS === 'android' ? -StatusBar.currentHeight : 0

• Minimal code snippet: https://rnplay.org/apps/0ppHZw
• Version of React Native is 0.29.0
• The error only occurs in Android (but if it occurred in both would it be a feature and not a bug?)
• I’m developing on a Mac.

…and here is the code snippet copy/pasted from RNPlay (works on both iOS and Android):

import React, { Component } from 'react'
import { AppRegistry, View, Text, TouchableOpacity, StatusBar, Modal } from 'react-native'

class SampleApp extends Component {
  state = {
    isModalOpen: false,
  }

  handleModalOpen = () => this.setState({ isModalOpen: true })
  handleModalClose = () => this.setState({ isModalOpen: false })

  render () {
    return (
      <View>
        <StatusBar
            translucent
            barStyle="light-content"
            backgroundColor="rgba(0, 0, 0, 0.2)"
        />
        <Text>I’m underneath the status bar</Text>
        <TouchableOpacity onPress={this.handleModalOpen}>
            <Text style={{ marginTop: 50 }}>Press me to open the modal</Text>
        </TouchableOpacity>
        <Modal
            animationType="slide"
              transparent={false}
            visible={this.state.isModalOpen}
            onRequestClose={this.handleModalClose}
        >
            <View style={{ flex: 1, backgroundColor: 'white' }}>
            <Text>I should be underneath the status bar</Text>
            <TouchableOpacity onPress={this.handleModalClose}>
              <Text style={{ marginTop: 50 }}>Press me to close the modal</Text>
            </TouchableOpacity>
            </View>
          </Modal>
      </View>
    )
  }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp)

iOS Modal closed

iOS Modal opened

Android Modal closed

Android Modal opened (ERROR HERE)

[lacker]

Is this still a problem? I seem to recall @satya164 discussing some fix here but I could be mistaken.

[mvf4z7]

As far as I can tell, yes this is still a problem, as I believe I am dealing with something similar.

My situation is that I have set the status bar to hidden at the root of my app, but when I am on android and display a modal the status bar becomes visible. On iOS the status bar remains invisible in this situation (the desired behavior for my application).

Furthermore, I have my app in Immersive mode, and as such the soft navigation buttons (ie back, home, multitasking) are also hidden throughout the app. When a modal is displayed the navigation keys become visible, similar to the status bar.

[kevinresol]

Furthermore, I have my app in Immersive mode, and as such the soft navigation buttons (ie back, home, multitasking) are also hidden throughout the app. When a modal is displayed the navigation keys become visible, similar to the status bar.

I can confirm this behaviour.

[nascode]

0.43.0 here. I can confirm that there is still a bug when using modal with translucent status bar on android

[PestiB9]

Yep, if i set my StatusBar to translucent its background just become black (my app don fit his space), and hidden it's not working (the background still green and StatusBar always visible)

[dantman]

It's not a direct fix for this, but I fixed the related bug that causes the translucent StatusBar to darken when the Modal is opened on android. #13629

Wathever the fix for this bug is, it'll probably apply to the two files I was looking at while fixing that issue.
ReactAndroid/src/main/res/views/modal/values/themes.xml and ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[alexmngn]

This is still an issue for me, RN 0.49

[firatakandere]

Still an issue, 0.52.2

[AnyGong]

+1

[firatakandere]

+1

[sound2gd]

+1

[edo1493]

+1

[mderrick]

I still have this issue and the -StatusBar.currentHeight trick no longer works for me.

[tinisky]

+1

[byunghyunpark]

+1

[arsal-wal]

+1

[lihxhit]

+1

There seems to be a pr which deal with the hidden statusbar
but we need a translucent StatusBar