import React, {Component} from 'react';  
import {Platform, StyleSheet, Pressable, Text, View, Button, Modal} from 'react-native';  
 
export default class App extends Component<Props> {  
  state = {  
    isVisible: false, //state of modal default false  
  }  
  render() {  
    return (  
      <View style = {styles.container}>  
        <Modal            
          animationType = {"fade"}  
          transparent = {false}  
          visible = {this.state.isVisible}  
          onRequestClose = {() =>{ console.log("Modal has been closed.") } }>  
          {/*All views of Modal*/}  
              <View style = {styles.modal}>  
              <Text style = {styles.text}>Modal is open!</Text>  
              <Button title="Click To Close Modal" onPress = {() => {  
                  this.setState({ isVisible:!this.state.isVisible})}}/>
                  <Pressable style={styles.dugme2} onPress = {() => {  
                  this.setState({ isVisible:!this.state.isVisible})}}>
                    <Text style={styles.text}>Düğme</Text>
                  </Pressable>
          </View>  
        </Modal>  
        {/*Button will change state to true and view will re-render*/}  
        <Button  
           title="Click To Open Modal"  
           onPress = {() => {this.setState({ isVisible: true})}}
           style = {styles.dugme2}
        />  
      </View>  
    );  
  }  
}  
 
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    alignItems: 'center',  
    justifyContent: 'center',  
    backgroundColor: '#ecf0f1',  
  },  
  modal: {  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor : "#00BCD4",  
    height: 300 ,  
    width: '80%',  
    borderRadius:10,  
    borderWidth: 1,  
    borderColor: '#fff',    
    marginTop: 80,  
    marginLeft: 40,  
  },  
   text: {
      color: 'white',  
      marginBottom: 30  
   },
   dugme2: {
     marginTop:30,
     backgroundColor:'red',
     color: 'white',
     height:30,
     padding:5,
   }  
});