detailwork.js

import React from 'react'
import {Text, View, TouchableOpacity, Image, ScrollView, SafeAreaView} from 'react-native'
import Modal from 'react-native-modal'
import styles from './styles/StyleDetailWork'

function DetailWork({visible, onClose, data, title}) {
  const renderDetailList = () => {
    return data.map((item, index) => {
      return (
        <View key={item.name} accessibilityLabel="viewInformation" style={styles.containerItemDetail}>
          <View accessibilityLabel={`subViewInformation${index}`} style={styles.subContainerItemDetail}>
            <View
              accessibilityLabel={`viewImage${index}`}
              style={{
                width: '15%'
              }}>
              <Image accessibilityLabel={`image-${index}`} source={{uri: item.image}} style={styles.image} />
            </View>
            <View accessibilityLabel="viewInformationWork" style={styles.containerTitleItem}>
              <Text accessibilityLabel={`textTitleWork-${index}`} style={styles.textTitleItem}>
                {item.name}
              </Text>
              <View accessibilityLabel="viewDescriptionWork" style={styles.containerDescriptionItem}>
                <Text accessibilityLabel={`textDescription-${index}`} style={styles.textDesriptionItem}>
                  {item.longDescription}
                </Text>
              </View>
            </View>
          </View>
        </View>
      )
    })
  }

  return (
    <Modal
      propagateSwipe
      accessibilityLabel="modalDetailWork"
      onBackButtonPress={() => onClose()}
      onBackdropPress={() => onClose()}
      onSwipeComplete={() => onClose()}
      hideModalContentWhileAnimating
      useNativeDriver
      animationIn="slideInUp"
      animationOut="slideOutDown"
      isVisible={visible}
      onClose={() => onClose()}
      style={styles.modalContainer}
      swipeThreshold={100}
      swipeDirection={['down', 'left']}>
      <View accessibilityLabel="viewModalDetailWork" style={styles.subContainer}>
        <View accessibilityLabel="viewButtonClose" style={styles.containerButtonClose}>
          <TouchableOpacity accessibilityLabel="buttonClose" onPress={() => onClose()} style={styles.subContainerButtonClose} />
        </View>
        <View accessibilityLabel="viewTitle" style={styles.containerTitle}>
          <Text accessibilityLabel={`mdlTittleWork${title}`} style={styles.textTitle}>
            Detail Pengerjaan {title}
          </Text>
        </View>
        <ScrollView accessibilityLabel="listDetailWork" style={styles.containerDetail}>
          <TouchableOpacity>{renderDetailList()}</TouchableOpacity>
        </ScrollView>
        <SafeAreaView>
          <View accessibilityLabel="viewButtonTutup" style={styles.containerButtonTutup}>
            <TouchableOpacity accessibilityLabel="buttonTutup" onPress={() => onClose()} style={styles.subContainerButtonTutup}>
              <Text accessibilityLabel="textTutup" style={styles.textTutup}>
                TUTUP
              </Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </View>
    </Modal>
  )
}

export default DetailWork