sfm-uikit-react-native/src/view/EnxDialog.js

It is a react native component for SmartFloMeet users.

import * as React from 'react';
import {useState} from 'react';
import { PureComponent } from "react";
import { StyleSheet, Text, View, Button,Modal,Alert } from 'react-native';
import RadioGroup, {RadioButtonProps} from 'react-native-radio-buttons-group';

export default class EnxDialog extends PureComponent {
  
    constructor(props) {
      super(props);
      this.state = {
        isVisible:true
        
      }   
    }
    
    render(){
      let selectedButton = this.state.data.find(e => e.selected == true);
      selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;   
      return (
        <View style = {styles.container}>  
          <Modal            
            animationType = {"slide"}  
            transparent = {false}  
            visible = {this.state.isVisible}  
            onRequestClose = {() =>{ console.log("Modal has been closed.") } }>  
              
              <View style = {styles.modal}>  
                <Text style = {styles.text}>Modal is open!</Text> 
                <RadioGroup 
                  data= {data}
                  onPress={onPressRadioButton} 
                /> 
                <Button title="Click To Close Modal" onPress = {() => {  
                  this.setState({ isVisible:!this.state.isVisible})}}/>  
              </View>  
            </Modal>  
          
            <Button   
              title="Click To Open Modal"   
              onPress = {() => {this.setState({ isVisible: true})}}  
                />  
        </View> 
        );
      }
  }
  const styles = StyleSheet.create({  
    container: {  
      flex: 1,  
      alignItems: 'center',  
      justifyContent: 'center',  
      backgroundColor: 'green',  
    },  
    modal: {  
    alignItems: 'center',
    alignSelf: 'center',
    padding:15,   
    backgroundColor : "#00BCD4",   
    height: 250 ,
    borderRadius:15,  
    borderWidth: 1,  
    borderColor: '#fff',     
     },  
     text: {  
        color: '#3f2949',   
        marginTop:15 
     }  
  });