Modal component on Android is not underneath a translucent StatusBar, inconsistent with iOS

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)

[nascode]

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

[lihxhit]

+1

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