How to dim a background in react native modal?

Question

Following is my created react native Modal and still couldn't find how to dim the background and transparent around pop-up modal.I am not using any external libraries and trying to find solution without libraries.Is it possible to do with on this way?

My Modal Component

render() { let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />; return (   <View style={styles.container}>     <Modal       animationType='slide'       onRequestClose={() => console.log('no warning')}       presentationStyle="FormSheet"       transparent       visible={this.state.showModal}     >       <View>         <View style={styles.modalView} >           <TouchableOpacity             onPress={this.closeModalFunc}           >             <Text style={styles.closeText}>X</Text>           </TouchableOpacity>           <View>             {modal}           </View>         </View>       </View>     </Modal>   </View>   ); } 

Modal Component Style

import {StyleSheet} from 'react-native'; import colors from '../../../theme/colors'; import metrics from '../../../theme/metrics'; import {container} from '../../../theme/base';  const styles = StyleSheet.create({ container: {  backgroundColor: colors.background.gray, }, modalView: {  backgroundColor: colors.background.white,  margin: 40, }, closeText: {   backgroundColor: colors.background.purpleishBlue,   color: colors.background.white,   borderRadius: metrics.avatar.small,   width: 32,   padding: 6,   alignSelf: 'flex-end',   textAlign: 'center',   borderWidth: 1,   borderColor: colors.background.white,  }, });  export default styles; 

Answer 1

I solve this one by create my own component MyPopup like below

class MyPopup extends React.PureComponent {  render() {     return (         <Modal              animationType="fade"             transparent={true}             visible={this.props.visible}             >                 <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)'}}>                     {this.props.children}                 </View>         </Modal>     ) }} 

Then I use it like

<MyPopup visible={this.state.modalVisible}> <View style={{     width: '90%',     height: 50,     borderColor: '#ccc',     borderWidth: 1,     borderStyle: 'solid',     backgroundColor: 'white',     elevation: 20,     padding: 10,     borderRadius: 4, }}>     <Text>Hello, This is my model with dim background color</Text> </View>