@plusscommunities/pluss-feature-builder-app-d 1.0.3-beta.2 → 8.0.1-auth.0

package/dist/module/components/FeatureDetailScreen.js

@@ -1,9 +1,11 @@
-"use strict";
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { SPACING } from "../js/spacing";
-import { Platform, View, ScrollView, Animated, Dimensions, StatusBar, Text, TouchableOpacity, Linking, StyleSheet, KeyboardAvoidingView, Image } from "react-native";
-import { FontAwesome } from "@expo/vector-icons";
+import { Platform, View, ScrollView, Animated, Dimensions, StatusBar, TouchableOpacity, Linking, StyleSheet, KeyboardAvoidingView, Image } from "react-native";
+import { FontAwesome } from "./common";
 import { connect } from "react-redux";
 import _ from "lodash";
 import { LinearGradient } from "expo-linear-gradient";
@@ -16,7 +18,6 @@ import { selectFeatureDefinition } from "../utils/selectors";
 import Constants from "expo-constants";
 import { InlineButton } from "./common";
 import { FIELD_TYPES } from "../js/FieldTypes";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SCREEN_HEIGHT = Dimensions.get("window").height;
 const CARD_IMAGE_HEIGHT = SCREEN_HEIGHT * 0.3;
 const SCREEN_WIDTH = Dimensions.get("window").width;
@@ -31,6 +32,140 @@ const getStatusBarHeight = () => {
 class FeatureDetailScreen extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "onPressBack", () => {
+      Services.navigation.goBack();
+    });
+    /**
+     * Collect all images from listing fields
+     */
+    _defineProperty(this, "collectAllImages", () => {
+      const {
+        listing,
+        featureDefinition
+      } = this.props;
+      if (!listing || !listing.fields || !featureDefinition) {
+        return [];
+      }
+      const allImages = [];
+      const fieldDefinitions = featureDefinition.fields || [];
+
+      // Add primary feature image first
+      const primaryImage = listing.fields[values.mandatoryFields.featureImage];
+      if (primaryImage) {
+        const imageObj = this.normalizeImageField(primaryImage);
+        if (imageObj) {
+          allImages.push({
+            ...imageObj,
+            fieldId: values.mandatoryFields.featureImage,
+            fieldLabel: values.labels.featureImage
+          });
+        }
+      }
+
+      // Add additional image fields
+      fieldDefinitions.forEach(fieldDef => {
+        if ((fieldDef.type === FIELD_TYPES.IMAGE || fieldDef.type === FIELD_TYPES.GALLERY) && fieldDef.id !== values.mandatoryFields.featureImage) {
+          const fieldValue = listing.fields[fieldDef.id];
+          if (fieldValue) {
+            if (fieldDef.type === FIELD_TYPES.GALLERY) {
+              // Handle Gallery (Array of images)
+              if (Array.isArray(fieldValue)) {
+                fieldValue.forEach(item => {
+                  const imageObj = this.normalizeImageField(item);
+                  if (imageObj) {
+                    allImages.push({
+                      ...imageObj,
+                      fieldId: fieldDef.id,
+                      fieldLabel: fieldDef.label || fieldDef.id
+                    });
+                  }
+                });
+              }
+            } else {
+              // Handle Single Image
+              const imageObj = this.normalizeImageField(fieldValue);
+              if (imageObj) {
+                allImages.push({
+                  ...imageObj,
+                  fieldId: fieldDef.id,
+                  fieldLabel: fieldDef.label || fieldDef.id
+                });
+              }
+            }
+          }
+        }
+      });
+      return allImages;
+    });
+    /**
+     * Normalize image field to object format
+     */
+    _defineProperty(this, "normalizeImageField", imageField => {
+      if (!imageField) return null;
+      if (typeof imageField === "string") {
+        return {
+          uri: imageField,
+          url: imageField
+        };
+      }
+      if (typeof imageField === "object") {
+        if (imageField.uri) {
+          return {
+            uri: imageField.uri,
+            url: imageField.uri,
+            ...imageField
+          };
+        }
+        if (imageField.url) {
+          return {
+            uri: imageField.url,
+            url: imageField.url,
+            ...imageField
+          };
+        }
+      }
+      return null;
+    });
+    /**
+     * Open image popup with all images
+     */
+    _defineProperty(this, "openImagePopup", (imageIndex = 0) => {
+      const {
+        allImages
+      } = this.state;
+      if (allImages.length > 0) {
+        this.setState({
+          showImagePopup: true,
+          selectedImageIndex: imageIndex
+        });
+      }
+    });
+    /**
+     * Close image popup
+     */
+    _defineProperty(this, "closeImagePopup", () => {
+      this.setState({
+        showImagePopup: false,
+        selectedImageIndex: 0
+      });
+    });
+    /**
+     * Handle link opening for various field types
+     */
+    _defineProperty(this, "handleLinkPress", url => {
+      if (url) {
+        Linking.openURL(url).catch(err => {
+          // Silently handle URL open errors
+        });
+      }
+    });
+    _defineProperty(this, "handleFilePress", file => {
+      if (file !== null && file !== void 0 && file.url) {
+        Linking.openURL(file.url).catch(err => {
+          // Silently handle URL open errors
+        });
+      }
+    });
     this.state = {
       isHomeTab: false,
       showImagePopup: false,
@@ -55,128 +190,6 @@ class FeatureDetailScreen extends Component {
   componentWillUnmount() {
     if (Platform.OS === "ios") StatusBar.setBarStyle("dark-content");
   }
-  onPressBack = () => {
-    Services.navigation.goBack();
-  };
-
-  /**
-   * Collect all images from listing fields
-   */
-  collectAllImages = () => {
-    const {
-      listing,
-      featureDefinition
-    } = this.props;
-    if (!listing || !listing.fields || !featureDefinition) {
-      return [];
-    }
-    const allImages = [];
-    const fieldDefinitions = featureDefinition.fields || [];
-
-    // Add primary feature image first
-    const primaryImage = listing.fields[values.mandatoryFields.featureImage];
-    if (primaryImage) {
-      const imageObj = this.normalizeImageField(primaryImage);
-      if (imageObj) {
-        allImages.push({
-          ...imageObj,
-          fieldId: values.mandatoryFields.featureImage,
-          fieldLabel: values.labels.featureImage
-        });
-      }
-    }
-
-    // Add additional image fields
-    fieldDefinitions.forEach(fieldDef => {
-      if ((fieldDef.type === FIELD_TYPES.IMAGE || fieldDef.type === FIELD_TYPES.GALLERY) && fieldDef.id !== values.mandatoryFields.featureImage) {
-        const fieldValue = listing.fields[fieldDef.id];
-        if (fieldValue) {
-          if (fieldDef.type === FIELD_TYPES.GALLERY) {
-            // Handle Gallery (Array of images)
-            if (Array.isArray(fieldValue)) {
-              fieldValue.forEach(item => {
-                const imageObj = this.normalizeImageField(item);
-                if (imageObj) {
-                  allImages.push({
-                    ...imageObj,
-                    fieldId: fieldDef.id,
-                    fieldLabel: fieldDef.label || fieldDef.id
-                  });
-                }
-              });
-            }
-          } else {
-            // Handle Single Image
-            const imageObj = this.normalizeImageField(fieldValue);
-            if (imageObj) {
-              allImages.push({
-                ...imageObj,
-                fieldId: fieldDef.id,
-                fieldLabel: fieldDef.label || fieldDef.id
-              });
-            }
-          }
-        }
-      }
-    });
-    return allImages;
-  };
-
-  /**
-   * Normalize image field to object format
-   */
-  normalizeImageField = imageField => {
-    if (!imageField) return null;
-    if (typeof imageField === "string") {
-      return {
-        uri: imageField,
-        url: imageField
-      };
-    }
-    if (typeof imageField === "object") {
-      if (imageField.uri) {
-        return {
-          uri: imageField.uri,
-          url: imageField.uri,
-          ...imageField
-        };
-      }
-      if (imageField.url) {
-        return {
-          uri: imageField.url,
-          url: imageField.url,
-          ...imageField
-        };
-      }
-    }
-    return null;
-  };
-
-  /**
-   * Open image popup with all images
-   */
-  openImagePopup = (imageIndex = 0) => {
-    const {
-      allImages
-    } = this.state;
-    if (allImages.length > 0) {
-      this.setState({
-        showImagePopup: true,
-        selectedImageIndex: imageIndex
-      });
-    }
-  };
-
-  /**
-   * Close image popup
-   */
-  closeImagePopup = () => {
-    this.setState({
-      showImagePopup: false,
-      selectedImageIndex: 0
-    });
-  };
-
   /**
    * Process fields: filter out mandatory fields and sort by order
    */
@@ -208,32 +221,16 @@ class FeatureDetailScreen extends Component {
         fieldId,
         fieldValue: listing.fields[fieldId],
         fieldDefinition,
-        fieldType: fieldDefinition?.type || FIELD_TYPES.TEXT
+        fieldType: (fieldDefinition === null || fieldDefinition === void 0 ? void 0 : fieldDefinition.type) || FIELD_TYPES.TEXT
       };
     });
 
     // Sort by order property if available
-    return _.sortBy(filteredFields, field => field.fieldDefinition?.order || 999);
+    return _.sortBy(filteredFields, field => {
+      var _field$fieldDefinitio;
+      return ((_field$fieldDefinitio = field.fieldDefinition) === null || _field$fieldDefinitio === void 0 ? void 0 : _field$fieldDefinitio.order) || 999;
+    });
   }
-
-  /**
-   * Handle link opening for various field types
-   */
-  handleLinkPress = url => {
-    if (url) {
-      Linking.openURL(url).catch(err => {
-        // Silently handle URL open errors
-      });
-    }
-  };
-  handleFilePress = file => {
-    if (file?.url) {
-      Linking.openURL(file.url).catch(err => {
-        // Silently handle URL open errors
-      });
-    }
-  };
-
   /**
    * Render individual field based on its type
    */
@@ -249,76 +246,68 @@ class FeatureDetailScreen extends Component {
     switch (type) {
       case FIELD_TYPES.CTA:
         {
-          const btnLabel = fieldValue?.label || label;
-          const btnUrl = fieldValue?.url;
-          return /*#__PURE__*/_jsx(View, {
-            style: styles.ctaContainer,
-            children: /*#__PURE__*/_jsx(InlineButton, {
-              large: true,
-              color: colourBrandingMain,
-              onPress: () => this.handleLinkPress(btnUrl),
-              children: btnLabel
-            })
-          });
+          const btnLabel = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.label) || label;
+          const btnUrl = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.url;
+          return /*#__PURE__*/React.createElement(View, {
+            style: styles.ctaContainer
+          }, /*#__PURE__*/React.createElement(InlineButton, {
+            large: true,
+            color: colourBrandingMain,
+            onPress: () => this.handleLinkPress(btnUrl)
+          }, btnLabel));
         }
       case FIELD_TYPES.EMAIL:
-        return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        return /*#__PURE__*/React.createElement(TouchableOpacity, {
           style: styles.linkContainer,
-          onPress: () => this.handleLinkPress(`mailto:${fieldValue}`),
-          children: [/*#__PURE__*/_jsx(FontAwesome, {
-            name: "envelope",
-            size: 16,
-            color: colourBrandingMain,
-            style: styles.fieldIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.linkText, {
-              color: colourBrandingMain
-            }],
-            children: fieldValue
-          })]
-        });
+          onPress: () => this.handleLinkPress(`mailto:${fieldValue}`)
+        }, /*#__PURE__*/React.createElement(FontAwesome, {
+          name: "envelope",
+          size: 16,
+          color: colourBrandingMain,
+          style: styles.fieldIcon
+        }), /*#__PURE__*/React.createElement(Text, {
+          style: [styles.linkText, {
+            color: colourBrandingMain
+          }]
+        }, fieldValue));
       case FIELD_TYPES.DATE:
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.dateContainer,
-          children: [/*#__PURE__*/_jsx(FontAwesome, {
-            name: "calendar",
-            size: 16,
-            color: TEXT_DARK,
-            style: styles.fieldIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.bodyText,
-            children: fieldValue
-          })]
-        });
+        return /*#__PURE__*/React.createElement(View, {
+          style: styles.dateContainer
+        }, /*#__PURE__*/React.createElement(FontAwesome, {
+          name: "calendar",
+          size: 16,
+          color: TEXT_DARK,
+          style: styles.fieldIcon
+        }), /*#__PURE__*/React.createElement(Text, {
+          style: styles.bodyText
+        }, fieldValue));
       case FIELD_TYPES.FILE:
         {
           // Handle both single file and multiple files (array)
           const files = Array.isArray(fieldValue) ? fieldValue : [fieldValue];
-          return /*#__PURE__*/_jsxs(View, {
-            style: styles.filesContainer,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.sectionTitle,
-              children: values.labels.attachments
-            }), files.map((file, index) => {
-              // Skip null/undefined files
-              if (!file) return null;
-              return /*#__PURE__*/_jsx(FileDownload, {
-                file: file,
-                onPress: this.handleFilePress,
-                color: this.props.colourBrandingMain
-              }, index);
-            })]
-          });
+          return /*#__PURE__*/React.createElement(View, {
+            style: styles.filesContainer
+          }, /*#__PURE__*/React.createElement(Text, {
+            style: styles.sectionTitle
+          }, values.labels.attachments), files.map((file, index) => {
+            // Skip null/undefined files
+            if (!file) return null;
+            return /*#__PURE__*/React.createElement(FileDownload, {
+              key: index,
+              file: file,
+              onPress: this.handleFilePress,
+              color: this.props.colourBrandingMain
+            });
+          }));
         }
       case FIELD_TYPES.DESCRIPTION:
-        return /*#__PURE__*/_jsx(Text, {
-          style: styles.descriptionText,
-          children: fieldValue
-        });
+        return /*#__PURE__*/React.createElement(Text, {
+          style: styles.descriptionText
+        }, fieldValue);
       case FIELD_TYPES.IMAGE:
         {
           // Render secondary images inline with click handler
-          const imgUri = fieldValue?.url || fieldValue?.uri || (typeof fieldValue === "string" ? fieldValue : null);
+          const imgUri = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.url) || (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.uri) || (typeof fieldValue === "string" ? fieldValue : null);
           if (!imgUri) return null;
 
           // Find this image's index for popup
@@ -326,84 +315,76 @@ class FeatureDetailScreen extends Component {
             allImages
           } = this.state;
           const imageIndex = allImages.findIndex(img => img.uri === imgUri || img.url === imgUri);
-          const caption = fieldValue?.caption;
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          const caption = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.caption;
+          return /*#__PURE__*/React.createElement(TouchableOpacity, {
             onPress: () => this.openImagePopup(imageIndex),
-            activeOpacity: 0.8,
-            children: [/*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: imgUri
-              },
-              style: styles.inlineImage,
-              resizeMode: "cover"
-            }), caption && /*#__PURE__*/_jsx(Text, {
-              style: styles.imageCaption,
-              children: caption
-            })]
-          });
+            activeOpacity: 0.8
+          }, /*#__PURE__*/React.createElement(Image, {
+            source: {
+              uri: imgUri
+            },
+            style: styles.inlineImage,
+            resizeMode: "cover"
+          }), caption && /*#__PURE__*/React.createElement(Text, {
+            style: styles.imageCaption
+          }, caption));
         }
       case FIELD_TYPES.GALLERY:
         {
           // Handle Gallery Fields (arrays of images)
           if (!Array.isArray(fieldValue)) return null;
-          return /*#__PURE__*/_jsx(View, {
+          return /*#__PURE__*/React.createElement(View, {
             style: {
               marginVertical: 16
-            },
-            children: /*#__PURE__*/_jsx(View, {
+            }
+          }, /*#__PURE__*/React.createElement(View, {
+            style: {
+              flexDirection: "row",
+              flexWrap: "wrap",
+              marginHorizontal: -4
+            }
+          }, fieldValue.map((imgItem, index) => {
+            const imgUri = (imgItem === null || imgItem === void 0 ? void 0 : imgItem.url) || (imgItem === null || imgItem === void 0 ? void 0 : imgItem.uri) || (typeof imgItem === "string" ? imgItem : null);
+            if (!imgUri) return null;
+
+            // Find global index for the popup
+            const {
+              allImages
+            } = this.state;
+            const globalIndex = allImages.findIndex(img => img.uri === imgUri || img.url === imgUri);
+            return /*#__PURE__*/React.createElement(TouchableOpacity, {
+              key: index,
+              onPress: () => this.openImagePopup(globalIndex !== -1 ? globalIndex : 0),
+              activeOpacity: 0.8,
               style: {
-                flexDirection: "row",
-                flexWrap: "wrap",
-                marginHorizontal: -4
+                width: "50%",
+                padding: 4
+              } // 2 column grid
+            }, /*#__PURE__*/React.createElement(Image, {
+              source: {
+                uri: imgUri
               },
-              children: fieldValue.map((imgItem, index) => {
-                const imgUri = imgItem?.url || imgItem?.uri || (typeof imgItem === "string" ? imgItem : null);
-                if (!imgUri) return null;
-
-                // Find global index for the popup
-                const {
-                  allImages
-                } = this.state;
-                const globalIndex = allImages.findIndex(img => img.uri === imgUri || img.url === imgUri);
-                return /*#__PURE__*/_jsx(TouchableOpacity, {
-                  onPress: () => this.openImagePopup(globalIndex !== -1 ? globalIndex : 0),
-                  activeOpacity: 0.8,
-                  style: {
-                    width: "50%",
-                    padding: 4
-                  } // 2 column grid
-                  ,
-                  children: /*#__PURE__*/_jsx(Image, {
-                    source: {
-                      uri: imgUri
-                    },
-                    style: [styles.inlineImage, {
-                      height: 150,
-                      marginVertical: 0
-                    }],
-                    resizeMode: "cover"
-                  })
-                }, index);
-              })
-            })
-          });
+              style: [styles.inlineImage, {
+                height: 150,
+                marginVertical: 0
+              }],
+              resizeMode: "cover"
+            }));
+          })));
         }
       case FIELD_TYPES.TITLE:
-        return /*#__PURE__*/_jsx(Text, {
-          style: styles.titleText,
-          children: fieldValue
-        });
+        return /*#__PURE__*/React.createElement(Text, {
+          style: styles.titleText
+        }, fieldValue);
       case FIELD_TYPES.NUMBER:
-        return /*#__PURE__*/_jsx(Text, {
-          style: styles.numberText,
-          children: fieldValue
-        });
+        return /*#__PURE__*/React.createElement(Text, {
+          style: styles.numberText
+        }, fieldValue);
       default:
         // Default text fallback
-        return /*#__PURE__*/_jsx(Text, {
-          style: styles.bodyText,
-          children: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : fieldValue
-        });
+        return /*#__PURE__*/React.createElement(Text, {
+          style: styles.bodyText
+        }, typeof fieldValue === "object" ? JSON.stringify(fieldValue) : fieldValue);
     }
   }
 
@@ -413,13 +394,13 @@ class FeatureDetailScreen extends Component {
   renderFields() {
     const processedFields = this.processFields();
     return processedFields.map((field, _index) => {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.fieldContainer,
-        children: [field.fieldType !== FIELD_TYPES.CTA && field.fieldType !== FIELD_TYPES.IMAGE && field.fieldDefinition?.label && /*#__PURE__*/_jsx(Text, {
-          style: styles.fieldLabel,
-          children: field.fieldDefinition?.label
-        }), this.renderField(field.fieldDefinition, field.fieldValue)]
-      }, field.fieldId);
+      var _field$fieldDefinitio2, _field$fieldDefinitio3;
+      return /*#__PURE__*/React.createElement(View, {
+        key: field.fieldId,
+        style: styles.fieldContainer
+      }, field.fieldType !== FIELD_TYPES.CTA && field.fieldType !== FIELD_TYPES.IMAGE && ((_field$fieldDefinitio2 = field.fieldDefinition) === null || _field$fieldDefinitio2 === void 0 ? void 0 : _field$fieldDefinitio2.label) && /*#__PURE__*/React.createElement(Text, {
+        style: styles.fieldLabel
+      }, (_field$fieldDefinitio3 = field.fieldDefinition) === null || _field$fieldDefinitio3 === void 0 ? void 0 : _field$fieldDefinitio3.label), this.renderField(field.fieldDefinition, field.fieldValue));
     });
   }
   getImageSource() {
@@ -438,7 +419,7 @@ class FeatureDetailScreen extends Component {
     if (typeof imageField === "string") {
       return imageField;
     }
-    return imageField?.uri || imageField?.url || null;
+    return (imageField === null || imageField === void 0 ? void 0 : imageField.uri) || (imageField === null || imageField === void 0 ? void 0 : imageField.url) || null;
   }
   getTitle() {
     const {
@@ -456,92 +437,80 @@ class FeatureDetailScreen extends Component {
     const imageSource = this.getImageSource();
     const title = this.getTitle();
     if (!listing || !listing.fields) {
-      return /*#__PURE__*/_jsx(View, {
-        style: styles.centerContainer,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.errorText,
-          children: "Item not found"
-        })
-      });
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.centerContainer
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.errorText
+      }, "Item not found"));
     }
-    return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
       behavior: Platform.OS === "ios" && "padding",
       style: {
         position: "relative",
         flex: 1,
         backgroundColor: Colours.BACKGROUND_WHITE || "#fff"
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.backButton
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.headerContent
+    }, /*#__PURE__*/React.createElement(Components.BackButton, {
+      onPress: this.onPressBack,
+      style: {
+        marginLeft: 16
+      }
+    }))), /*#__PURE__*/React.createElement(ScrollView, {
+      style: {
+        backgroundColor: Colours.BACKGROUND_WHITE || "#fff"
       },
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.backButton,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.headerContent,
-          children: /*#__PURE__*/_jsx(Components.BackButton, {
-            onPress: this.onPressBack,
-            style: {
-              marginLeft: 16
-            }
-          })
-        })
-      }), /*#__PURE__*/_jsxs(ScrollView, {
-        style: {
-          backgroundColor: Colours.BACKGROUND_WHITE || "#fff"
-        },
-        keyboardShouldPersistTaps: "always",
-        ref: ref => {
-          this.scrollView = ref;
-        },
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.mainHeader],
-          children: [imageSource ? /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: () => this.openImagePopup(0),
-            activeOpacity: 0.9,
-            children: /*#__PURE__*/_jsx(Components.AutoOffsetImage, {
-              uri: imageSource,
-              height: CARD_IMAGE_HEIGHT,
-              width: SCREEN_WIDTH
-            })
-          }) : /*#__PURE__*/_jsx(View, {
-            style: [styles.grayPlaceholder, {
-              height: CARD_IMAGE_HEIGHT,
-              width: SCREEN_WIDTH
-            }]
-          }), /*#__PURE__*/_jsx(LinearGradient, {
-            style: styles.gradientOverlay,
-            colors: ["rgba(0,0,0,0.7)", COLOUR_TRANSPARENT],
-            start: {
-              x: 0,
-              y: 0
-            },
-            end: {
-              x: 0,
-              y: 1
-            },
-            locations: [0, 0.5]
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: {
-            paddingHorizontal: 16
-          },
-          children: /*#__PURE__*/_jsx(View, {
-            style: styles.titleContainer,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.eventTitle,
-              children: title
-            })
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: {
-            minHeight: SCREEN_HEIGHT - CARD_IMAGE_HEIGHT - 56
-          },
-          children: this.renderFields()
-        })]
-      }), this.state.showImagePopup && /*#__PURE__*/_jsx(Components.ImagePopup, {
-        visible: this.state.showImagePopup,
-        images: this.state.allImages,
-        index: this.state.selectedImageIndex,
-        onClose: this.closeImagePopup
-      })]
-    });
+      keyboardShouldPersistTaps: "always",
+      ref: ref => {
+        this.scrollView = ref;
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.mainHeader]
+    }, imageSource ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: () => this.openImagePopup(0),
+      activeOpacity: 0.9
+    }, /*#__PURE__*/React.createElement(Components.AutoOffsetImage, {
+      uri: imageSource,
+      height: CARD_IMAGE_HEIGHT,
+      width: SCREEN_WIDTH
+    })) : /*#__PURE__*/React.createElement(View, {
+      style: [styles.grayPlaceholder, {
+        height: CARD_IMAGE_HEIGHT,
+        width: SCREEN_WIDTH
+      }]
+    }), /*#__PURE__*/React.createElement(LinearGradient, {
+      style: styles.gradientOverlay,
+      colors: ["rgba(0,0,0,0.7)", COLOUR_TRANSPARENT],
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 0,
+        y: 1
+      },
+      locations: [0, 0.5]
+    })), /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingHorizontal: 16
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.titleContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.eventTitle
+    }, title))), /*#__PURE__*/React.createElement(View, {
+      style: {
+        minHeight: SCREEN_HEIGHT - CARD_IMAGE_HEIGHT - 56
+      }
+    }, this.renderFields())), this.state.showImagePopup && /*#__PURE__*/React.createElement(Components.ImagePopup, {
+      visible: this.state.showImagePopup,
+      images: this.state.allImages,
+      index: this.state.selectedImageIndex,
+      onClose: this.closeImagePopup
+    }));
   }
 }
 const styles = StyleSheet.create({