creating partially transparent background layout in react native - reactjs

Question

I am using react native 0.49 and here is what I want to achieve:
so far this is what I did:
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<SearchHeader /> // search input component
<View style={{padding: 5}}>
<TouchableOpacity style={{padding: 5}} onPress={this.btnPressed}> // icon more
<Image source={require('../../assets/iconMore/iconMore.png')}/>
</TouchableOpacity>
</View>
</View>
<TabBarMain navigation={this.props.navigation}/> // tab navigator
{
this.state.showView
?
<View style={popoverStyle}>
<Text>View is showing</Text>
</View>
:
null
}
</View>
);
}
btnPressed = () => {
this.setState({
showView: !this.state.showView
});
}
I am trying to make that transparent background behind the view but Im failing to do so. Also, that triangle arrow pointer right underneath the icon (icon more). Im not sure if my code/component structure is correct, also the dark layout supposed to dismiss the view when pressed (pressing outside the view).
UPDATE
I added a view according to #sfratini answer.
showShadowLayer = () => {
if (this.state.showView){
return {
position: 'absolute',
top: 0, bottom: 0, left: 0, right: 0,
backgroundColor: "rgb(0,0,0)",
opacity: 0.5,
zIndex: 1000
}
} else {
return {
flex: 1
}
}
}
render() {
return (
<View style={{flex: 1}}>
<StatusBarView style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<SearchHeader />
<View style={{padding: 5}}>
<TouchableOpacity style={{padding: 5}} onPress={this.btnPressed}>
<Image
source={require('../../assets/iconMore/iconMore.png')}
/>
</TouchableOpacity>
</View>
</StatusBarView>
<TabBarMain navigation={this.props.navigation}/>
<View style={this.showShadowLayer()}/> // <-- added the partial transparent view here
{
this.state.showView
?
<View style={popoverStyle}>
<Text>View is showing</Text>
</View>
:
null
}
</View>
);
}
const popoverStyle = { // style for the custom popover
borderStyle: 'solid',
position: 'absolute',
backgroundColor: 'white',
borderColor: 'black',
elevation: 5,
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH - 40,
alignSelf: 'flex-end',
marginTop: 60,
//for ios
shadowColor: 'black',
shadowOpacity: 0.3,
shadowOffset: { width: 3, height: 3 },
shadowRadius: 4,
}
But now I cannot interact with this view. How to dismiss it when pressed outside the view!

Answer 1

Just add a "modal view" behind your drawer. Something like this should do:
<View style={{
position: 'absolute',
top: 0, bottom: 0, left: 0, right: 0,
backgroundColor: rgba(255,255,255,0.5)
}}/>
The 4th value is the opacity
Edit:
Add it after here:
<View style={this.showShadowLayer()}/> // add here
{
this.state.showView
?
<View style={popoverStyle}>
<Text>View is showing</Text>
</View>
:
null
}
RN handles the zIndex by checking in which order you add the views in the render.
As you saw after a couple of testing, render can only have one parent so I am wrapping everything in another view.