@microsoft/power-apps-native-host 0.2.22

package/lib/module/connections/types.js

@@ -0,0 +1,60 @@
+"use strict";
+
+/*!
+ * power-apps-native-host — connection disambiguation types
+ *
+ * Defines the native-host-specific types for connection resolution.  The web
+ * host equivalents live in @microsoft/power-apps-host, but the native host
+ * implements a lighter version that does not depend on IConnectionService.
+ */
+
+/**
+ * Resolved authorization state of a connection instance.
+ *
+ * - `Connected`     — platform status is Connected AND the ISV appid is in the connection ACL.
+ * - `NeedsAclGrant` — platform status is Connected but the ISV appid is missing from the ACL.
+ * - `NotConnected`  — platform status is anything other than Connected.
+ */
+export let ConnectionStatus = /*#__PURE__*/function (ConnectionStatus) {
+  ConnectionStatus["Connected"] = "Connected";
+  ConnectionStatus["NeedsAclGrant"] = "NeedsAclGrant";
+  ConnectionStatus["NotConnected"] = "NotConnected";
+  return ConnectionStatus;
+}({});
+
+/** A single connection instance returned by the Power Platform connectivity API. */
+
+/**
+ * Result of attempting to match a single connection reference to an instance.
+ *
+ * - `resolved`  — exactly one Connected connection found; `connectionId` is set.
+ * - `missing`   — no connections found for this connector in the user's environment.
+ * - `ambiguous` — multiple Connected connections found; the app must pick one.
+ */
+
+/**
+ * Disambiguation result for a single connection reference (one apiId, possibly
+ * mapped to multiple data source names in the final connections map).
+ */
+
+/**
+ * Callback invoked when a connection reference has multiple Connected candidate
+ * connections.  The consuming app should present a native picker UI (e.g. a
+ * bottom sheet) and return the selected connection ID.
+ *
+ * Return `null` to leave the connection unresolved (the SDK will receive an
+ * empty `connectionName` and data operations for that connector will fail).
+ *
+ * @param context.localRefId  — local reference key from power.config.json
+ * @param context.apiId       — connector API identifier
+ * @param context.candidates  — list of Connected connection instances to choose from
+ */
+
+/**
+ * Callback invoked when the user has no connection for a required connector.
+ *
+ * The consuming app can redirect to the Power Apps maker portal or show an
+ * in-app connection setup flow.  Return `true` to indicate the user has
+ * created a connection and the hook should retry; return `false` to leave the
+ * connection unresolved.
+ */

package/lib/module/connections/useConnectionSetup.js

@@ -0,0 +1,233 @@
+"use strict";
+
+/*!
+ * power-apps-native-host — useConnectionSetup
+ *
+ * A hook that drives the "create missing connection" flow for a single connector.
+ *
+ * Usage pattern (in the ConnectionSetupScreen):
+ *
+ *   const setup = useConnectionSetup({
+ *     connectorId: 'shared_office365users',
+ *     environmentId,
+ *     region,
+ *     acquireToken,
+ *     onConnected: (connectionId) => { ... mark resolved, advance to next ... }
+ *   });
+ *
+ *   // Render setup.consentUrl in a WebView when setup.phase === 'oauth'
+ *   // Call setup.startCreate() to trigger connection creation
+ *   // Call setup.checkNow() to re-poll after WebView finishes
+ */
+
+import { useState, useCallback, useRef } from 'react';
+import { createConnection, pollConnectionStatus, confirmConsentCode, addAadAppToConnectionAcl, parseJwtOid, SERVICE_POWERAPPS_SCOPE } from "../platform/PowerPlatformConnectionApi.js";
+import { powerPlatformScope } from "../platform/PowerPlatformEnvironmentApi.js";
+import { extractConnectionId } from "../connections/disambiguate.js";
+import { debugWarn } from "../logger.js";
+import { getAppLogger, HostOperationNames } from "../telemetry/index.js";
+
+// ---------------------------------------------------------------------------
+// Phase machine
+// ---------------------------------------------------------------------------
+
+/**
+ * The current phase of the connection setup flow for one connector.
+ *
+ * idle        — not yet started.
+ * creating    — POST in progress (showing a spinner).
+ * oauth       — connection created; OAuth consent URL is ready (show WebView).
+ * confirming  — WebView dismissed; polling for Connected status.
+ * connected   — connection is Connected; ready to proceed.
+ * error       — unrecoverable error; `errorMessage` is set.
+ */
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useConnectionSetup({
+  connectorId,
+  environmentId,
+  region = 'prod',
+  acquireToken,
+  onConnected,
+  isvClientId,
+  oauthRedirectUrl,
+  polling
+}) {
+  const [phase, setPhase] = useState('idle');
+  const [consentUrl, setConsentUrl] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  // Track the connection name across re-renders without triggering re-renders.
+  const connectionNameRef = useRef(null);
+  // Prevent concurrent startCreate / checkNow calls.
+  const inFlightRef = useRef(false);
+  const handleConnected = useCallback(async instance => {
+    setPhase('connected');
+    setConsentUrl(null);
+
+    // The RP auto-writes the user as Owner when a connection is created.
+    // However, APIM also checks that the requesting appid is present in the
+    // ACE's AppIds list. For third-party ISV tokens this is never populated
+    // automatically — we must explicitly add the ISV's client ID to the
+    // connection ACL so that APIM accepts tokens bearing that appid at runtime.
+    if (isvClientId) {
+      const paToken = await acquireToken([SERVICE_POWERAPPS_SCOPE]);
+      const userOid = paToken ? parseJwtOid(paToken) : null;
+      if (!paToken || !userOid) {
+        setPhase('error');
+        setErrorMessage('Connection was created, but access could not be granted to this app. Please try again.');
+        debugWarn('[useConnectionSetup] could not grant connection ACL: missing Power Apps token or user OID');
+        getAppLogger().trackErrorEvent(HostOperationNames.PlatformConnectionAclGrant, {
+          phase: 'setupConnectionAcl',
+          reason: !paToken ? 'missingPowerAppsToken' : 'missingUserOid'
+        });
+        return;
+      }
+      const aclGranted = await addAadAppToConnectionAcl(connectorId, instance.id, environmentId, isvClientId, userOid, paToken);
+      if (!aclGranted) {
+        setPhase('error');
+        setErrorMessage('Connection was created, but access could not be granted to this app. Please try again.');
+        getAppLogger().trackErrorEvent(HostOperationNames.PlatformConnectionAclGrant, {
+          phase: 'setupConnectionAcl',
+          reason: 'aclGrantRejected'
+        });
+        return;
+      }
+    }
+    onConnected?.(instance);
+  }, [onConnected, acquireToken, connectorId, environmentId, isvClientId]);
+  const startCreate = useCallback(async () => {
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+    setPhase('creating');
+    setErrorMessage(null);
+    setConsentUrl(null);
+    connectionNameRef.current = null;
+    try {
+      const token = await acquireToken([powerPlatformScope(region)]);
+      if (!token) {
+        setPhase('error');
+        setErrorMessage('Failed to acquire authentication token');
+        return;
+      }
+      const result = await createConnection(connectorId, environmentId, region, token, undefined, oauthRedirectUrl);
+      if (result.status === 'error') {
+        setPhase('error');
+        setErrorMessage(result.message);
+        return;
+      }
+      connectionNameRef.current = result.connectionName;
+      if (result.status === 'connected') {
+        // Connection is already Connected — poll once to get the full instance.
+        const instance = await pollConnectionStatus(connectorId, result.connectionName, environmentId, region, acquireToken, {
+          timeoutMs: 10_000,
+          ...polling
+        });
+        if (instance) {
+          handleConnected(instance);
+        } else {
+          // Already created but not Connected yet — treat as oauth phase without a URL.
+          setPhase('oauth');
+        }
+        return;
+      }
+
+      // status === 'pending': show the OAuth URL in a WebView.
+      setConsentUrl(result.consentLink);
+      setPhase('oauth');
+
+      // Start background polling immediately — the user may finish OAuth quickly.
+      const instance = await pollConnectionStatus(connectorId, result.connectionName, environmentId, region, acquireToken, polling);
+
+      // If the phase changed while we were polling (e.g., user dismissed WebView
+      // and checkNow already resolved it), don't override.
+      if (instance && phase !== 'connected') {
+        handleConnected(instance);
+      } else if (!instance && phase !== 'connected') {
+        setPhase('error');
+        setErrorMessage('Connection setup timed out. Please try again.');
+      }
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [connectorId, environmentId, region, acquireToken, polling, handleConnected, phase]);
+  const checkNow = useCallback(async () => {
+    const name = connectionNameRef.current;
+    if (!name || inFlightRef.current) return;
+    if (phase !== 'oauth' && phase !== 'confirming') return;
+    inFlightRef.current = true;
+    setPhase('confirming');
+    try {
+      const instance = await pollConnectionStatus(connectorId, name, environmentId, region, acquireToken, {
+        intervalMs: 1000,
+        timeoutMs: 30_000,
+        ...polling
+      });
+      if (instance) {
+        handleConnected(instance);
+      } else {
+        // Not yet connected — go back to oauth so the user can retry.
+        setPhase('oauth');
+        setErrorMessage('Connection is not yet active. Complete the sign-in and try again.');
+      }
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [phase, environmentId, region, acquireToken, polling, handleConnected]);
+  const reset = useCallback(() => {
+    inFlightRef.current = false;
+    connectionNameRef.current = null;
+    setPhase('idle');
+    setConsentUrl(null);
+    setErrorMessage(null);
+  }, []);
+
+  /**
+   * Call after the in-app browser session closes.
+   *
+   * If a CommitTokenCode `code` is provided (from the redirect URL `?code=`
+   * param), POST it to `confirmConsentCode` first so APIM can activate the
+   * connection. Then poll until Connected regardless of whether the confirm
+   * call succeeded (the connection may already be Connected server-side).
+   */
+  const completeConsent = useCallback(async code => {
+    const name = connectionNameRef.current;
+    if (!name || inFlightRef.current) return;
+    inFlightRef.current = true;
+    setPhase('confirming');
+    try {
+      if (code) {
+        const token = await acquireToken([powerPlatformScope(region)]);
+        if (token) {
+          const connectionId = extractConnectionId(name);
+          await confirmConsentCode(connectorId, connectionId, environmentId, region, token, code);
+        }
+      }
+      const instance = await pollConnectionStatus(connectorId, name, environmentId, region, acquireToken, {
+        intervalMs: 1000,
+        timeoutMs: 30_000,
+        ...polling
+      });
+      if (instance) {
+        handleConnected(instance);
+      } else {
+        setPhase('oauth');
+        setErrorMessage('Connection is not yet active. Complete the sign-in and try again.');
+      }
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [connectorId, environmentId, region, acquireToken, polling, handleConnected]);
+  return {
+    phase,
+    consentUrl,
+    errorMessage,
+    startCreate,
+    checkNow,
+    completeConsent,
+    reset
+  };
+}

package/lib/module/controls/FilePicker.js

@@ -0,0 +1,178 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator, Alert, StyleSheet } from 'react-native';
+import * as DocumentPicker from 'expo-document-picker';
+import * as Sharing from 'expo-sharing';
+import { File as ExpoFile, Paths } from 'expo-file-system';
+import { Feather } from '@expo/vector-icons';
+import { useThemeTokens } from "../theme/ThemeProvider.js";
+import { createDataverseUploadFile, readFileAsUint8Array } from "../utils/dataverseUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A unified file component for view and edit scenarios.
+ *
+ * - Pass `onDownload` alone for a read-only row that opens the share sheet on tap.
+ * - Pass `onChange` alone for a pick-only button (e.g. in an edit form).
+ * - Pass both to show the existing file name (tappable to download) alongside a
+ *   replace button — useful when the edit screen should also allow previewing.
+ */
+export function FilePicker({
+  label,
+  fileName,
+  onDownload,
+  shareTitle,
+  onChange,
+  acceptedTypes = ['*/*'],
+  pickButtonLabel = 'Select File',
+  replaceButtonLabel = 'Replace',
+  readingLabel = 'Reading file...',
+  containerStyle,
+  labelStyle,
+  fileRowStyle,
+  fileNameStyle,
+  buttonStyle,
+  buttonTextStyle,
+  accentColor
+}) {
+  const theme = useThemeTokens();
+  const accent = accentColor ?? theme.accentBase;
+  const [downloading, setDownloading] = useState(false);
+  const [pickedName, setPickedName] = useState(null);
+  const [reading, setReading] = useState(false);
+  const bg = theme.surface0;
+  const labelColor = theme.text2;
+  const displayName = pickedName ?? fileName;
+  const download = async () => {
+    if (!onDownload) return;
+    setDownloading(true);
+    try {
+      const bytes = await onDownload();
+      const destFile = new ExpoFile(Paths.cache, displayName ?? 'download');
+      destFile.write(bytes);
+      await Sharing.shareAsync(destFile.uri, {
+        dialogTitle: shareTitle ?? displayName ?? 'File'
+      });
+    } catch (e) {
+      Alert.alert('Download Failed', e instanceof Error ? e.message : String(e));
+    } finally {
+      setDownloading(false);
+    }
+  };
+  const pick = async () => {
+    if (!onChange) return;
+    const result = await DocumentPicker.getDocumentAsync({
+      type: acceptedTypes,
+      copyToCacheDirectory: true
+    });
+    if (!result.canceled && result.assets.length > 0) {
+      const picked = result.assets[0];
+      setPickedName(picked.name);
+      setReading(true);
+      try {
+        const bytes = await readFileAsUint8Array(picked.uri);
+        const mimeType = picked.mimeType ?? 'application/octet-stream';
+        onChange({
+          uri: picked.uri,
+          name: picked.name,
+          mimeType,
+          file: createDataverseUploadFile(picked.name, mimeType, bytes),
+          bytes
+        });
+      } finally {
+        setReading(false);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: labelColor
+      }, labelStyle],
+      children: label
+    }) : null, displayName ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.fileRow, fileRowStyle],
+      onPress: onDownload ? download : undefined,
+      activeOpacity: onDownload ? 0.7 : 1,
+      disabled: downloading,
+      children: [/*#__PURE__*/_jsx(Feather, {
+        name: "file-text",
+        size: 16,
+        color: accent
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.fileName, {
+          color: accent
+        }, fileNameStyle],
+        numberOfLines: 1,
+        children: displayName
+      }), onDownload && (downloading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: accent
+      }) : /*#__PURE__*/_jsx(Feather, {
+        name: "download",
+        size: 16,
+        color: accent
+      }))]
+    }) : null, onChange ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.button, {
+        borderColor: accent,
+        backgroundColor: bg
+      }, buttonStyle],
+      onPress: pick,
+      activeOpacity: 0.7,
+      disabled: reading,
+      children: [reading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: accent
+      }) : /*#__PURE__*/_jsx(Feather, {
+        name: displayName ? 'refresh-cw' : 'file-plus',
+        size: 16,
+        color: accent
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.buttonText, {
+          color: accent
+        }, buttonTextStyle],
+        children: reading ? readingLabel : displayName ? replaceButtonLabel : pickButtonLabel
+      })]
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 4
+  },
+  fileRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 4
+  },
+  fileName: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderRadius: 8,
+    alignSelf: 'flex-start',
+    maxWidth: '100%',
+    marginTop: 4
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    flexShrink: 1
+  }
+});

package/lib/module/controls/ImagePicker.js

@@ -0,0 +1,231 @@
+"use strict";
+
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, TouchableOpacity, Alert, StyleSheet, ActivityIndicator } from 'react-native';
+import * as ExpoImagePicker from 'expo-image-picker';
+import { Feather } from '@expo/vector-icons';
+import { useThemeTokens } from "../theme/ThemeProvider.js";
+import { base64ToDataUri, base64ToUint8Array, createDataverseUploadFile, detectImageMime } from "../utils/dataverseUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A self-contained image picker that shows a preview and lets the user
+ * choose a new image from the library. Works on Android and iOS.
+ *
+ * - Existing images are seeded from a Dataverse base64 string via `initialBase64`.
+ * - On pick, the image is returned as base64 for legacy callers and as a
+ *   File-compatible object for generated Dataverse upload methods.
+ */
+export function ImagePicker({
+  label = 'Image',
+  initialBase64,
+  onChange,
+  containerStyle,
+  labelStyle,
+  buttonRowStyle,
+  buttonStyle,
+  buttonTextStyle,
+  previewStyle,
+  accentColor,
+  onImageChange,
+  imageFileName = 'image',
+  quality = 0.8,
+  allowsEditing = false,
+  aspect,
+  cropShape,
+  exif = false,
+  legacy = false,
+  cameraButtonLabel = 'Take Photo',
+  selectButtonLabel = 'Select Image',
+  changeButtonLabel = 'Change Image',
+  readingLabel = 'Reading image...'
+}) {
+  const theme = useThemeTokens();
+  const accentColor_resolved = accentColor ?? theme.accentBase;
+  const labelColor = theme.text2;
+  const bg = theme.surface0;
+  const previewBg = theme.surface2;
+
+  // The URI shown in the preview — either a data: URI built from the seeded
+  // base64, or the file:// URI of a newly picked image.
+  const [previewUri, setPreviewUri] = useState(null);
+  const [reading, setReading] = useState(false);
+  const imagePickerOptions = {
+    mediaTypes: ['images'],
+    quality,
+    allowsEditing,
+    base64: true,
+    exif,
+    legacy,
+    ...(allowsEditing && aspect ? {
+      aspect
+    } : {}),
+    ...(allowsEditing && cropShape ? {
+      shape: cropShape
+    } : {})
+  };
+  useEffect(() => {
+    if (initialBase64) {
+      setPreviewUri(base64ToDataUri(initialBase64));
+    } else {
+      setPreviewUri(null);
+    }
+  }, [initialBase64]);
+  const handleAsset = asset => {
+    const uri = asset.uri;
+    const base64 = asset.base64;
+    if (!base64) {
+      Alert.alert('Unable to read image', 'The selected image did not include image data. Please try again.');
+      return;
+    }
+    setPreviewUri(uri);
+    const bytes = base64ToUint8Array(base64);
+    const mimeType = detectImageMime(base64);
+    const extension = mimeType.slice('image/'.length).replace('jpeg', 'jpg');
+    const name = asset.fileName ?? (imageFileName.includes('.') ? imageFileName : `${imageFileName}.${extension}`);
+    onChange?.(base64);
+    onImageChange?.({
+      uri,
+      name,
+      mimeType,
+      base64,
+      file: createDataverseUploadFile(name, mimeType, bytes),
+      bytes
+    });
+  };
+  const pick = async () => {
+    if (reading) return;
+    const {
+      status
+    } = await ExpoImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== 'granted') {
+      Alert.alert('Permission required', 'Please allow access to your photo library.');
+      return;
+    }
+    const result = await ExpoImagePicker.launchImageLibraryAsync(imagePickerOptions);
+    if (!result.canceled && result.assets.length > 0) {
+      setReading(true);
+      try {
+        handleAsset(result.assets[0]);
+      } finally {
+        setReading(false);
+      }
+    }
+  };
+  const shoot = async () => {
+    if (reading) return;
+    const {
+      status
+    } = await ExpoImagePicker.requestCameraPermissionsAsync();
+    if (status !== 'granted') {
+      Alert.alert('Permission required', 'Please allow access to your camera.');
+      return;
+    }
+    const result = await ExpoImagePicker.launchCameraAsync(imagePickerOptions);
+    if (!result.canceled && result.assets.length > 0) {
+      setReading(true);
+      try {
+        handleAsset(result.assets[0]);
+      } finally {
+        setReading(false);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: labelColor
+      }, labelStyle],
+      children: label
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.buttonRow, buttonRowStyle],
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.button, {
+          borderColor: accentColor_resolved,
+          backgroundColor: bg
+        }, buttonStyle],
+        onPress: shoot,
+        activeOpacity: 0.7,
+        disabled: reading,
+        children: [reading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: accentColor_resolved
+        }) : /*#__PURE__*/_jsx(Feather, {
+          name: "camera",
+          size: 16,
+          color: accentColor_resolved
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.buttonText, {
+            color: accentColor_resolved
+          }, buttonTextStyle],
+          children: reading ? readingLabel : cameraButtonLabel
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.button, {
+          borderColor: accentColor_resolved,
+          backgroundColor: bg
+        }, buttonStyle],
+        onPress: pick,
+        activeOpacity: 0.7,
+        disabled: reading,
+        children: [reading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: accentColor_resolved
+        }) : /*#__PURE__*/_jsx(Feather, {
+          name: "image",
+          size: 16,
+          color: accentColor_resolved
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.buttonText, {
+            color: accentColor_resolved
+          }, buttonTextStyle],
+          children: reading ? readingLabel : previewUri ? changeButtonLabel : selectButtonLabel
+        })]
+      })]
+    }), previewUri ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: previewUri
+      },
+      style: [styles.preview, {
+        backgroundColor: previewBg
+      }, previewStyle],
+      resizeMode: "cover"
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 4
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderRadius: 8,
+    alignSelf: 'flex-start',
+    maxWidth: '100%'
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    flexShrink: 1
+  },
+  preview: {
+    width: '100%',
+    height: 180,
+    borderRadius: 8,
+    marginTop: 8
+  }
+});