react-native: 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)
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 18 (5 by maintainers)
0.43.0 here. I can confirm that there is still a bug when using modal with translucent status bar on android