modal in typescript[reactnative] and design of ecard

 how to create a modal seprate component and use the onPress or other event to other compoent where we do import that component in reactnative using typescript method

<View style={styles.container}>

        {/* First Relative Layout */}

       <View style={[styles.relativeLayout, styles.hidden]}>

          <View style={styles.memberDetails}>

            {/* Include your member_basic_details_tpa component here */}

          </View>

          <Image

            //source={require('../../../vidal-app/assets/images/ecard_images/ecard_icon.png')}

            source={ecardIcon}

            style={styles.ecardImage}

            resizeMode="cover"

          />

        </View>

{/* Second Relative Layout */}

        <View style={styles.ecardLayout}>

          <Image

            // source={require('../../../vidal-app/assets/images/ecard_images/new_ecard_temp.png')}

            source={new_ecard_tem}

            style={styles.backgroundImage}

            resizeMode="stretch"

          />

          <View style={styles.contentLayout}>

            {/* Member Details */}

            <View style={styles.memberInfo}>

              <Text style={styles.label}>Member Name</Text>

              <Text style={styles.memberName}>Aryan Singh</Text>

            </View>

{/* Divider */}

            <View style={styles.divider} />

            {/* Relationships Section */}

            <View style={styles.relationshipSection}>

              {/* Relationship */}

              <View style={styles.column}>

                <Text style={styles.label}>Relationship</Text>

                <Text style={styles.value}>Son</Text>

              </View>

              {/* Vidal Health ID */}

              <View style={styles.column}>

                <Text style={styles.label}>Vidal Health ID</Text>

                <Text style={styles.value}>1100000431-A</Text>

              </View>

              {/* View E-Card Icon */}

              <TouchableOpacity onPress={openModal} style={styles.column}>

              <Image

                  //   source={require('../../../vidal-app/assets/images/ecard_images/new_design_view_ic.png')}

                  source={new_design_view_ic}

                  style={styles.icon}

                  resizeMode="contain"

                />

                </TouchableOpacity>

            </View>

          </View>

        </View>

      </View>

{/* /second-ecard */}

      <View style={styles.container}>

        {/* First Relative Layout */}

     <View style={[styles.relativeLayout, styles.hidden]}>

          <View style={styles.memberDetails}>

            {/* Include your member_basic_details_tpa component here */}

          </View>

          <Image

            // source={require('../../../vidal-app/assets/images/ecard_images/ecard_icon.png')}

            source={ecardIcon}

            style={styles.ecardImage}

            resizeMode="cover"

          />

        </View>

   {/* Second Relative Layout */}

        <View style={styles.ecardLayout}>

          <Image

            // source={require('../../../vidal-app/assets/images/ecard_images/new_ecard_temp.png')}

            source={new_ecard_tem}

            style={styles.backgroundImage}

            resizeMode="stretch"

          />

          <View style={styles.contentLayout}>

            {/* Member Details */}

            <View style={styles.memberInfo}>

              <Text style={styles.label}>Member Name</Text>

              <Text style={styles.memberName}>Aryan Singh</Text>

            </View>

{/* Divider */}

            <View style={styles.divider} />

{/* Relationships Section */}

            <View style={styles.relationshipSection}>

              {/* Relationship */}

              <View style={styles.column}>

                <Text style={styles.label}>Relationship</Text>

                <Text style={styles.value}>Son</Text>

              </View>

              {/* Vidal Health ID */}

              <View style={styles.column}>

                <Text style={styles.label}>Vidal Health ID</Text>

                <Text style={styles.value}>1100000431-A</Text>

              </View>

              {/* View E-Card Icon */}

              <TouchableOpacity onPress={openModal} style={styles.column}>

              <Image

                  //   source={require('../../../vidal-app/assets/images/ecard_images/new_design_view_ic.png')}

                  source={new_design_view_ic}

                  style={styles.icon}

                  resizeMode="contain"

                />

                </TouchableOpacity>

            </View>

          </View>

        </View>

      </View>

      {/* end second-ecard */}

{/* modal for showing ecard */}

     

    {isModalVisible&&<EcardModal onButtonClick={closeModal}/>}

{/* end modal for showing ecard */}