when Modal set to hide, the status bar will flicker - react-native

Question

here is code: and i want to know if it is a issue? or , whether it is a universal phenomenon.
'use strict';
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Modal
} from 'react-native';
import NavActivity from '../components/NavActivity';
class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false
}
}
_setModalVisible(param) {
this.setState({modalVisible: param});
}
render() {
return (
<View style={Styles.wrap}>
<NavActivity
navigator={this.props.navigator}
title={{
title: '测试页面'
}}/>
<TouchableOpacity
onPress={() => this.setState({modalVisible: true})}>
<Text>show modal</Text>
</TouchableOpacity>
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this._setModalVisible(false)
}}>
<View style={Styles.container}>
<Text>Modal!!!</Text>
</View>
</Modal>
</View>
)
}
}
const Styles = StyleSheet.create({
wrap: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
},
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.7)'
},
});
export default TestPage;
environment:
react native version: 0.40
android version: 7.1.1
the gif explain everything, and this phenomenon confuse me whether should i continue to use Modal component.

Answer 1

Use This 'react-native-modal' library.
import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modal'
export default class ModalTester extends Component {
state = {
isModalVisible: false
}
_showModal = () => this.setState({ isModalVisible: true })
_hideModal = () => this.setState({ isModalVisible: false })
render () {
return (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={this._showModal}>
<Text>Show Modal</Text>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible}>
<View style={{ flex: 1 }}>
<Text>Hello!</Text>
</View>
</Modal>
</View>
)
}
}
For more docs read from here:-
https://github.com/react-native-community/react-native-modal

Answer 2

this issue fixed in RN 0.45, see the release doc enter link description here
bug fixed.