@nihinmedia/medgen-react-native 1.0.9

package/lib/module/MedGenWebView.js

@@ -0,0 +1,137 @@
+import React, { useCallback, useMemo, useRef } from "react";
+
+import { ActivityIndicator, Linking, StyleSheet, View } from "react-native";
+
+import { WebView as RNWebView } from "react-native-webview";
+
+const WebView = RNWebView;
+
+import { handleBridgeMessage } from "./bridge";
+
+import { embedBase, emit } from "./client";
+
+export const originOf = u => {
+  const m = /^[a-z][a-z0-9+.-]*:\/\/[^/?#]+/i.exec(u);
+  return m ? m[0].toLowerCase() : "";
+};
+
+export const decideNavigation = (url, base, isTopFrame) => {
+  if (isSameOrigin(url, base)) return "load";
+  if (isTopFrame === false) return "block";
+  if (!/^https?:\/\//i.test(url)) return "block";
+  return "external";
+};
+
+const openExternally = async url => {
+  try {
+    if (!await Linking.canOpenURL(url)) {
+      emit("surface.externalLinkFailed", {
+        url: url,
+        reason: "unsupported"
+      });
+      return false;
+    }
+    await Linking.openURL(url);
+    emit("surface.externalLinkOpened", {
+      url: url
+    });
+    return true;
+  } catch (error) {
+    emit("surface.externalLinkFailed", {
+      url: url,
+      reason: error instanceof Error ? error.message : "unknown"
+    });
+    return false;
+  }
+};
+
+const makeNonce = () => `${Date.now().toString(36)}.${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
+
+export const isSameOrigin = (target, base) => {
+  if (target === "about:blank") return true;
+  const b = originOf(base);
+  return b !== "" && originOf(target) === b;
+};
+
+export const MedGenWebView = ({url: url, handlers: handlers, capabilities: capabilities, onClose: onClose}) => {
+  const ref = useRef(null);
+  const nonce = useMemo(() => makeNonce(), [ url ]);
+  const isMedGenOrigin = useCallback(target => isSameOrigin(target, embedBase()), []);
+  const onShouldStartLoadWithRequest = useCallback(req => {
+    const decision = decideNavigation(req.url, embedBase(), req.isTopFrame);
+    if (decision === "load") return true;
+    if (decision === "external") void openExternally(req.url);
+    return false;
+  }, [ isMedGenOrigin ]);
+  const onMessage = useCallback(event => {
+    if (!isMedGenOrigin(event.nativeEvent.url)) return;
+    void handleBridgeMessage(event.nativeEvent.data, replyJson => {
+      const safe = JSON.stringify(replyJson).replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+      ref.current?.injectJavaScript(`window.__medgen && window.__medgen.receive(${safe}); true;`);
+    }, {
+      handlers: handlers,
+      capabilities: capabilities,
+      onClose: onClose,
+      nonce: nonce
+    });
+  }, [ isMedGenOrigin, handlers, capabilities, onClose, nonce ]);
+  return React.createElement(WebView, {
+    ref: ref,
+    source: {
+      uri: url
+    },
+    style: styles.web,
+    injectedJavaScriptBeforeContentLoaded: `window.__medgenNonce=${JSON.stringify(nonce)};true;`,
+    injectedJavaScriptBeforeContentLoadedForMainFrameOnly: true,
+    originWhitelist: [ originOf(embedBase()) ],
+    onShouldStartLoadWithRequest: onShouldStartLoadWithRequest,
+    onMessage: onMessage,
+    allowFileAccess: false,
+    allowUniversalAccessFromFileURLs: false,
+    mixedContentMode: "never",
+    javaScriptCanOpenWindowsAutomatically: false,
+    setSupportMultipleWindows: false,
+    onOpenWindow: event => {
+      const url = event?.nativeEvent?.targetUrl;
+      if (!url) return;
+      const decision = decideNavigation(url, embedBase(), true);
+      if (decision === "load") {
+        ref.current?.injectJavaScript(`window.location.assign(${JSON.stringify(url)});true;`);
+      } else if (decision === "external") {
+        void openExternally(url);
+      }
+    },
+    onError: event => {
+      emit("surface.loadFailed", {
+        description: event?.nativeEvent?.description,
+        code: event?.nativeEvent?.code
+      });
+    },
+    onHttpError: event => {
+      emit("surface.loadFailed", {
+        statusCode: event?.nativeEvent?.statusCode
+      });
+    },
+    sharedCookiesEnabled: true,
+    thirdPartyCookiesEnabled: false,
+    startInLoadingState: true,
+    renderLoading: () => React.createElement(View, {
+      style: styles.loading
+    }, React.createElement(ActivityIndicator, {
+      size: "large"
+    })),
+    bounces: false,
+    overScrollMode: "never"
+  });
+};
+
+const styles = StyleSheet.create({
+  web: {
+    flex: 1
+  },
+  loading: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

package/lib/module/bridge.js

@@ -0,0 +1,127 @@
+import { SDK_VERSION } from "./client";
+
+const V = 1;
+
+const ok = (id, payload) => JSON.stringify({
+  v: V,
+  id: id,
+  ok: true,
+  payload: payload
+});
+
+const fail = (id, code, message) => JSON.stringify({
+  v: V,
+  id: id,
+  ok: false,
+  error: {
+    code: code,
+    message: message
+  }
+});
+
+export async function handleBridgeMessage(raw, reply, ctx) {
+  let msg;
+  try {
+    msg = JSON.parse(raw);
+  } catch {
+    return;
+  }
+  if (msg.v !== V || !msg.id || !msg.method) return;
+  const {handlers: handlers, capabilities: capabilities, onClose: onClose, nonce: nonce} = ctx;
+  if (typeof msg.nonce !== "string" || msg.nonce.length !== nonce.length || msg.nonce !== nonce) {
+    return;
+  }
+  const {id: id, method: method} = msg;
+  const payload = msg.payload ?? {};
+  try {
+    switch (method) {
+     case "system.ready":
+      reply(ok(id, {
+        platform: "react-native",
+        version: SDK_VERSION,
+        features: {
+          share: Boolean(handlers.onShare) && capabilities.share,
+          clipboard: Boolean(handlers.onCopy) && capabilities.clipboard,
+          speech: Boolean(handlers.onSpeechStart) && capabilities.dictation,
+          fileUpload: Boolean(handlers.onFilePick) && capabilities.fileUpload
+        }
+      }));
+      return;
+
+     case "system.dismiss":
+      onClose();
+      reply(ok(id));
+      return;
+
+     case "share.content":
+      {
+        if (!capabilities.share) return reply(fail(id, "FORBIDDEN", "share not granted"));
+        if (!handlers.onShare) return reply(fail(id, "UNAVAILABLE", "No share handler"));
+        const completed = await handlers.onShare(String(payload.text ?? ""));
+        reply(ok(id, {
+          completed: completed
+        }));
+        return;
+      }
+
+     case "clipboard.write":
+      {
+        if (!capabilities.clipboard) return reply(fail(id, "FORBIDDEN", "clipboard not granted"));
+        if (!handlers.onCopy) return reply(fail(id, "UNAVAILABLE", "No clipboard handler"));
+        const html = capabilities.richClipboard ? payload.html : undefined;
+        const written = await handlers.onCopy({
+          text: String(payload.text ?? ""),
+          html: html
+        });
+        reply(ok(id, {
+          written: written
+        }));
+        return;
+      }
+
+     case "speech.start":
+      {
+        if (!capabilities.dictation) return reply(fail(id, "FORBIDDEN", "dictation not granted"));
+        if (!handlers.onSpeechStart) return reply(fail(id, "UNAVAILABLE", "No speech handler"));
+        await handlers.onSpeechStart();
+        reply(ok(id, {
+          listening: true
+        }));
+        return;
+      }
+
+     case "speech.stop":
+      {
+        if (!capabilities.dictation) return reply(fail(id, "FORBIDDEN", "dictation not granted"));
+        if (!handlers.onSpeechStop) return reply(fail(id, "UNAVAILABLE", "No speech handler"));
+        const transcript = await handlers.onSpeechStop();
+        reply(ok(id, {
+          transcript: transcript
+        }));
+        return;
+      }
+
+     case "file.pick":
+     case "file.capture":
+      {
+        if (!capabilities.fileUpload) return reply(fail(id, "FORBIDDEN", "file upload not granted"));
+        if (!handlers.onFilePick) return reply(ok(id, {
+          files: []
+        }));
+        const files = await handlers.onFilePick();
+        reply(ok(id, {
+          files: files
+        }));
+        return;
+      }
+
+     default:
+      return;
+    }
+  } catch (e) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.warn("[MedGen] native handler failed:", e);
+    }
+    reply(fail(id, "HANDLER_ERROR", "Handler failed"));
+  }
+}

package/lib/module/client.js

@@ -0,0 +1,298 @@
+import { Platform } from "react-native";
+
+import * as Keychain from "react-native-keychain";
+
+import { MedGenError } from "./types";
+
+const KEYCHAIN_SERVICE = "jp.nihinmedia.medgen";
+
+const ASSERTION_TIMEOUT_MS = 1e4;
+
+const ATTESTATION_TIMEOUT_MS = 15e3;
+
+export const SDK_VERSION = "1.0.9";
+
+const DEFAULT_API = {
+  development: "https://dev.sugoimed.com",
+  staging: "https://staging.sugoimed.com",
+  production: "https://medgen.nihinmedia.jp"
+};
+
+const DEFAULT_EMBED = {
+  development: "https://dev.sugoimed.com",
+  staging: "https://staging.sugoimed.com",
+  production: "https://medgen.nihinmedia.jp"
+};
+
+let config = null;
+
+export function configure(cfg) {
+  config = cfg;
+}
+
+export function resetConfig() {
+  config = null;
+}
+
+export function requireConfig() {
+  if (!config) {
+    throw new MedGenError("NOT_INITIALIZED", "Call MedGen.initialize() before present()");
+  }
+  return config;
+}
+
+function requireHttps(url, field) {
+  const lower = url.toLowerCase();
+  const isLocal = lower.startsWith("http://localhost") || lower.startsWith("http://127.0.0.1");
+  if (!lower.startsWith("https://") && !isLocal) {
+    throw new MedGenError("NOT_INITIALIZED", `${field} must use https:// — refusing to send an assertion over plaintext`);
+  }
+  return url.replace(/\/+$/, "");
+}
+
+export const apiBase = () => {
+  const cfg = requireConfig();
+  const base = cfg.apiBaseUrl ?? DEFAULT_API[cfg.environment] ?? DEFAULT_API.staging;
+  return requireHttps(base, "apiBaseUrl");
+};
+
+export const embedBase = () => {
+  const cfg = requireConfig();
+  const base = cfg.embedBaseUrl ?? DEFAULT_EMBED[cfg.environment] ?? DEFAULT_EMBED.staging;
+  return requireHttps(base, "embedBaseUrl");
+};
+
+export function emit(name, detail) {
+  const handler = config?.onEvent;
+  if (!handler) return;
+  const event = {
+    name: name,
+    at: Date.now(),
+    detail: detail
+  };
+  try {
+    handler(event);
+  } catch {}
+}
+
+export async function storeCredentials(creds) {
+  await Keychain.setGenericPassword("medgen", JSON.stringify(creds), {
+    service: KEYCHAIN_SERVICE,
+    accessible: Keychain.ACCESSIBLE.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY
+  });
+}
+
+export async function readCredentials() {
+  try {
+    const res = await Keychain.getGenericPassword({
+      service: KEYCHAIN_SERVICE
+    });
+    if (!res) return null;
+    return JSON.parse(res.password);
+  } catch {
+    return null;
+  }
+}
+
+export async function clearCredentials() {
+  await Keychain.resetGenericPassword({
+    service: KEYCHAIN_SERVICE
+  });
+}
+
+function withTimeout(p, ms, code, what) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(new MedGenError(code, `${what} exceeded ${ms}ms`, true)), ms);
+  });
+  return Promise.race([ p, timeout ]).finally(() => clearTimeout(timer));
+}
+
+async function fetchAssertion() {
+  const {assertionProvider: assertionProvider, assertion: assertion} = requireConfig();
+  if (!assertionProvider) {
+    if (assertion) return assertion;
+    throw new MedGenError("NOT_INITIALIZED", "Set assertionProvider (or, to try the SDK once, assertion) in MedGen.initialize()");
+  }
+  try {
+    return await withTimeout(assertionProvider(), ASSERTION_TIMEOUT_MS, "ASSERTION_PROVIDER_TIMEOUT", "Assertion provider");
+  } catch (e) {
+    if (e instanceof MedGenError) throw e;
+    throw new MedGenError("ASSERTION_PROVIDER_FAILED", e instanceof Error ? e.message : "Assertion provider failed", true);
+  }
+}
+
+async function fetchAttestation(assertion) {
+  const {attestationProvider: attestationProvider} = requireConfig();
+  if (!attestationProvider) return "";
+  try {
+    return await withTimeout(attestationProvider(assertion), ATTESTATION_TIMEOUT_MS, "ATTESTATION_FAILED", "Attestation provider");
+  } catch (e) {
+    if (e instanceof MedGenError) throw e;
+    throw new MedGenError("ATTESTATION_FAILED", e instanceof Error ? e.message : "Attestation provider failed", true);
+  }
+}
+
+const CAPABILITY_DEFAULTS = {
+  theming: false,
+  customLogo: false,
+  hideAttribution: false,
+  quickAnswer: true,
+  detailedAnswer: true,
+  japaneseAnswer: true,
+  dictation: false,
+  fileUpload: false,
+  clipboard: true,
+  richClipboard: true,
+  share: true,
+  chatHistory: true,
+  bookmarks: false,
+  citationsPanel: true,
+  directLink: true
+};
+
+export function parseCapabilities(raw) {
+  const src = raw ?? {};
+  const pick = (key, fallback) => typeof src[key] === "boolean" ? src[key] : fallback;
+  return {
+    theming: pick("theming", CAPABILITY_DEFAULTS.theming),
+    customLogo: pick("custom_logo", CAPABILITY_DEFAULTS.customLogo),
+    hideAttribution: pick("hide_attribution", CAPABILITY_DEFAULTS.hideAttribution),
+    quickAnswer: pick("quick_answer", CAPABILITY_DEFAULTS.quickAnswer),
+    detailedAnswer: pick("detailed_answer", CAPABILITY_DEFAULTS.detailedAnswer),
+    japaneseAnswer: pick("japanese_answer", CAPABILITY_DEFAULTS.japaneseAnswer),
+    dictation: pick("dictation", CAPABILITY_DEFAULTS.dictation),
+    fileUpload: pick("file_upload", CAPABILITY_DEFAULTS.fileUpload),
+    clipboard: pick("clipboard", CAPABILITY_DEFAULTS.clipboard),
+    richClipboard: pick("rich_clipboard", CAPABILITY_DEFAULTS.richClipboard),
+    share: pick("share", CAPABILITY_DEFAULTS.share),
+    chatHistory: pick("chat_history", CAPABILITY_DEFAULTS.chatHistory),
+    bookmarks: pick("bookmarks", CAPABILITY_DEFAULTS.bookmarks),
+    citationsPanel: pick("citations_panel", CAPABILITY_DEFAULTS.citationsPanel),
+    directLink: pick("direct_link", CAPABILITY_DEFAULTS.directLink)
+  };
+}
+
+const CLIENT_BY_PLATFORM = {
+  ios: "sdk-ios",
+  android: "sdk-android"
+};
+
+export async function exchange() {
+  emit("exchange.started");
+  const assertion = await fetchAssertion();
+  const attestation = await fetchAttestation(assertion);
+  const client = CLIENT_BY_PLATFORM[Platform.OS] ?? "sdk-ios";
+  const headers = {
+    "Content-Type": "application/json",
+    "X-MedGen-Client": `rn/${SDK_VERSION}`
+  };
+  if (attestation) headers["X-MedGen-Attestation"] = attestation;
+  let res;
+  try {
+    res = await fetch(`${apiBase()}/api/v1/partner/session/exchange`, {
+      method: "POST",
+      headers: headers,
+      body: JSON.stringify({
+        assertion: assertion,
+        client: client
+      })
+    });
+  } catch (e) {
+    const err = new MedGenError("NETWORK_UNAVAILABLE", e instanceof Error ? e.message : "Network unavailable", true);
+    emit("exchange.failed", {
+      code: err.code
+    });
+    throw err;
+  }
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const err = new MedGenError(body.error ?? "UNKNOWN", body.message ?? "Exchange failed", Boolean(body.retryable), body.support_reference);
+    emit("exchange.failed", {
+      code: err.code,
+      status: res.status
+    });
+    throw err;
+  }
+  const access = body.access;
+  const refresh = body.refresh;
+  if (typeof access !== "string" || !access || typeof refresh !== "string" || !refresh) {
+    const err = new MedGenError("UNKNOWN", "Exchange response is missing session tokens", true);
+    emit("exchange.failed", {
+      code: err.code
+    });
+    throw err;
+  }
+  if (typeof body.handoff_code !== "string" || !body.handoff_code) {
+    const err = new MedGenError("UNKNOWN", "Exchange response is missing a handoff code", true);
+    emit("exchange.failed", {
+      code: err.code
+    });
+    throw err;
+  }
+  await storeCredentials({
+    access: access,
+    refresh: refresh
+  });
+  const user = body.user ?? {};
+  const partner = body.partner ?? {};
+  const result = {
+    handoffCode: body.handoff_code,
+    isNewUser: Boolean(user.is_new),
+    emailCollisionPending: body.error === "EMAIL_COLLISION_PENDING",
+    brandingVersion: String(partner.branding_version ?? "1"),
+    capabilities: parseCapabilities(partner.capabilities ?? body.capabilities)
+  };
+  emit("exchange.succeeded", {
+    isNewUser: result.isNewUser,
+    emailCollisionPending: result.emailCollisionPending
+  });
+  return result;
+}
+
+const B64_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+function toBase64(input) {
+  const bytes = [];
+  const utf8 = encodeURIComponent(input);
+  for (let i = 0; i < utf8.length; i += 1) {
+    if (utf8[i] === "%") {
+      bytes.push(parseInt(utf8.substr(i + 1, 2), 16));
+      i += 2;
+    } else {
+      bytes.push(utf8.charCodeAt(i));
+    }
+  }
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const b0 = bytes[i];
+    const b1 = bytes[i + 1];
+    const b2 = bytes[i + 2];
+    out += B64_ALPHABET[b0 >> 2];
+    out += B64_ALPHABET[(b0 & 3) << 4 | (b1 ?? 0) >> 4];
+    out += b1 === undefined ? "=" : B64_ALPHABET[(b1 & 15) << 2 | (b2 ?? 0) >> 6];
+    out += b2 === undefined ? "=" : B64_ALPHABET[b2 & 63];
+  }
+  return out;
+}
+
+export function buildEmbedUrl(handoffCode, entryQuestion, capabilities) {
+  const cfg = requireConfig();
+  const params = [ [ "hc", handoffCode ], [ "locale", cfg.locale ?? "ja" ] ];
+  if (cfg.theme && capabilities?.theming !== false) {
+    const branding = {
+      colors: {
+        primary: cfg.theme.primary,
+        secondary: cfg.theme.secondary,
+        accent: cfg.theme.accent,
+        surface: cfg.theme.surface,
+        onSurface: cfg.theme.onSurface
+      },
+      colorsDark: cfg.theme.darkVariant
+    };
+    params.push([ "theme", toBase64(JSON.stringify(branding)) ]);
+  }
+  if (entryQuestion) params.push([ "q", entryQuestion ]);
+  const query = params.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
+  return `${embedBase()}/embed?${query}`;
+}

package/lib/module/index.js

@@ -0,0 +1,147 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import { ActivityIndicator, Modal, SafeAreaView, StyleSheet, View } from "react-native";
+
+import { buildEmbedUrl, clearCredentials, configure, emit, exchange, requireConfig } from "./client";
+
+import { MedGenWebView } from "./MedGenWebView";
+
+import { MedGenError } from "./types";
+
+export * from "./types";
+
+export { SDK_VERSION } from "./client";
+
+const hostRef = {
+  current: null
+};
+
+const teardowns = new Set;
+
+export const MedGen = {
+  initialize(config) {
+    if (!config.assertionProvider && !config.assertion) {
+      throw new MedGenError("NOT_INITIALIZED", "MedGen.initialize() needs assertionProvider (or, to try the SDK once, assertion)");
+    }
+    if (!config.assertionProvider && config.assertion) {
+      if (typeof __DEV__ !== "undefined" && !__DEV__) {
+        throw new MedGenError("NOT_INITIALIZED", "A static `assertion` cannot be used in a release build — it is " + "single-use and cannot be refreshed. Set `assertionProvider`.");
+      }
+      console.warn("[MedGen] Using a static `assertion`. It is single-use and expires " + "after 120s, so only the first present() will succeed. Set " + "`assertionProvider` before shipping.");
+    }
+    configure(config);
+  },
+  async present(options) {
+    if (!hostRef.current) {
+      throw new MedGenError("NOT_INITIALIZED", "Mount <MedGenHost /> near the root of your app");
+    }
+    await hostRef.current(options);
+  },
+  async signOut() {
+    teardowns.forEach(fn => {
+      try {
+        fn();
+      } catch {}
+    });
+    await clearCredentials();
+  }
+};
+
+export const MedGenHost = () => {
+  const [url, setUrl] = useState(null);
+  const [capabilities, setCapabilities] = useState(null);
+  const present = useCallback(async options => {
+    const result = await exchange();
+    setCapabilities(result.capabilities);
+    setUrl(buildEmbedUrl(result.handoffCode, options?.entryQuestion, result.capabilities));
+    emit("surface.opened");
+  }, []);
+  useEffect(() => {
+    hostRef.current = present;
+    return () => {
+      if (hostRef.current === present) hostRef.current = null;
+    };
+  }, [ present ]);
+  const close = useCallback(() => {
+    setUrl(null);
+    setCapabilities(null);
+    emit("surface.closed");
+  }, []);
+  useEffect(() => {
+    teardowns.add(close);
+    return () => {
+      teardowns.delete(close);
+    };
+  }, [ close ]);
+  return React.createElement(Modal, {
+    visible: url !== null,
+    animationType: "slide",
+    presentationStyle: "fullScreen",
+    onRequestClose: close
+  }, React.createElement(SafeAreaView, {
+    style: styles.container
+  }, url && capabilities ? React.createElement(MedGenWebView, {
+    url: url,
+    handlers: requireConfig().nativeHandlers ?? {},
+    capabilities: capabilities,
+    onClose: close
+  }) : null));
+};
+
+export const MedGenSurface = ({visible: visible = true, options: options, onError: onError}) => {
+  const [url, setUrl] = useState(null);
+  const [capabilities, setCapabilities] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const started = useRef(false);
+  useEffect(() => {
+    if (!visible || started.current) return;
+    started.current = true;
+    setLoading(true);
+    exchange().then(result => {
+      setCapabilities(result.capabilities);
+      setUrl(buildEmbedUrl(result.handoffCode, options?.entryQuestion, result.capabilities));
+      emit("surface.opened");
+    }).catch(e => {
+      started.current = false;
+      onError?.(e);
+    }).finally(() => setLoading(false));
+  }, [ visible, options, onError ]);
+  useEffect(() => {
+    const reset = () => {
+      setUrl(null);
+      setCapabilities(null);
+      started.current = false;
+    };
+    teardowns.add(reset);
+    return () => {
+      teardowns.delete(reset);
+    };
+  }, []);
+  return React.createElement(View, {
+    style: [ styles.container, !visible && styles.hidden ],
+    pointerEvents: visible ? "auto" : "none"
+  }, url && capabilities ? React.createElement(MedGenWebView, {
+    url: url,
+    handlers: requireConfig().nativeHandlers ?? {},
+    capabilities: capabilities,
+    onClose: () => undefined
+  }) : React.createElement(View, {
+    style: styles.loading
+  }, loading ? React.createElement(ActivityIndicator, {
+    size: "large"
+  }) : null));
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  hidden: {
+    display: "none"
+  },
+  loading: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});