asios/components/NewbieActivityModal.tsx

import { Image } from "expo-image";
import React from "react";
import {
  Modal,
  Pressable,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";

const POSTER_URI =
  "https://cdn.acetoys.cn/kai_xin_ma_te/resource/magic/award/activity_new.webp";

interface Props {
  visible: boolean;
  onClose: () => void;
}

export function NewbieActivityModal({ visible, onClose }: Props) {
  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <Pressable style={styles.overlay} onPress={onClose}>
        <View style={styles.wrapper}>
          <Image
            source={{ uri: POSTER_URI }}
            style={styles.poster}
            contentFit="contain"
          />
          <TouchableOpacity
            style={styles.closeBtn}
            onPress={onClose}
            activeOpacity={0.8}
            hitSlop={16}
          >
            <View style={styles.closeCircle}>
              <View style={[styles.closeLine, styles.closeLineA]} />
              <View style={[styles.closeLine, styles.closeLineB]} />
            </View>
          </TouchableOpacity>
        </View>
      </Pressable>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.6)",
    justifyContent: "center",
    alignItems: "center",
  },
  wrapper: {
    alignItems: "center",
  },
  poster: {
    width: 275,
    height: 300,
  },
  closeBtn: {
    marginTop: 16,
  },
  closeCircle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: 1.5,
    borderColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
  },
  closeLine: {
    position: "absolute",
    width: 14,
    height: 1.5,
    backgroundColor: "#fff",
  },
  closeLineA: {
    transform: [{ rotate: "45deg" }],
  },
  closeLineB: {
    transform: [{ rotate: "-45deg" }],
  },
});