advanced-games-library/src/components/common/GameModal.js

Advanced Gaming Library for React Native - Four Complete Games with iOS Compatibility Fixes

/**
 * GameModal - JavaScript Fallback Version
 * A modal component for game menus, settings, and dialogs
 * 
 * @version 1.0.0
 * @author Games Studio
 */

const React = require('react');
const { View, Text, TouchableOpacity, Modal, StyleSheet } = require('react-native');

const GameModal = ({
  visible = false,
  onClose,
  title = 'Modal',
  children,
  showCloseButton = true,
  style,
  ...props
}) => {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
      {...props}
    >
      <View style={styles.overlay}>
        <View style={[styles.modal, style]}>
          <View style={styles.header}>
            <Text style={styles.title}>{title}</Text>
            {showCloseButton && (
              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <Text style={styles.closeButtonText}>✕</Text>
              </TouchableOpacity>
            )}
          </View>
          
          <View style={styles.content}>
            {children}
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modal: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    margin: 20,
    minWidth: 300,
    maxWidth: '90%',
    maxHeight: '80%',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#2c3e50',
    flex: 1,
  },
  closeButton: {
    padding: 5,
  },
  closeButtonText: {
    fontSize: 20,
    color: '#7f8c8d',
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
  },
});

module.exports = GameModal;