React native pop-up layer (input) effect

/ * Pop-up layer test * /
import React, {Component} from ‘react’;
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  ScrollView,
  Navigator,
  Alert, // Introduce the Alert component
  TouchableHighlight,
  AlertIOS // Introduce AlertIOS component
} from ‘react-native’;
// Create a component
class CustomButton extends Component {
  render () {
    return (
      <TouchableHighlight
        style = {styles.button}
        underlayColor = "red" // The color changes when touched
        onPress = {this.props.onPress}> // Current trigger time
        <Text style = {styles.buttonText}> {this.props.text} </ Text>
      </ TouchableHighlight>
    );
  }
}
// default output component
export default class AlertDemo extends Component {
  render () {
    return (
      <View style = {styles.container}>
        <Text style = ({height: 30, color: ‘black‘, margin: 8}}>
          Pop-up box example
        </ Text>
        //trigger event
        <CustomButton text = ‘Click to pop up default Alert’
          onPress = (() => Alert.alert (‘Warm reminder’, ‘Are you sure you want to quit?’)}
          />
        <CustomButton text = ‘Click the alert that pops up two buttons’
          onPress = (() => Alert.alert (‘Warm reminder’, ’Are you sure you want to quit?’, [
            {text: ‘Cancel’},
            {text: ‘OK’,}
            ])}
          />
        <CustomButton text = ‘Click the alert that pops up the three buttons’
          onPress = (() => AlertIOS.alert (‘Warm reminder’, ’Are you sure you want to exit?’, [
            {text: ‘One’},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            {text: ‘Two‘},
            ])}
          />
          <CustomButton text = ‘click to enter the input box’
            onPress = (() => AlertIOS.prompt (‘Warm reminder’, ’Are you sure you want to quit?’, [
              {text: ‘Cancel’},
              {text: ‘OK’,}
              ])}
            />
 
      </ View>
    );
  }
}
 
 
 
var styles = StyleSheet.create ({
  container: {
    backgroundColor: "# fff",
    flex: 1,
    marginTop: 65,
},
button: {
  margin: 5,
  backgroundColor: ‘white’,
  padding: 15,
  borderBottomWidth: StyleSheet.hairlineWidth,
  borderBottomColor: ‘#cdcdcd’,
}
 
 
})

React native pop-up layer (input) effect