yeet

modules/avatar/native/AddAvatarModalActionCreators.tsx

@@ -0,0 +1,65 @@
+// Metro module 16258 (f16259).
+import { ADD_AVATAR_MODAL_KEY } from "./components/AddAvatarModalConstants";
+import { AnalyticEvents } from "../../../Constants";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { saveProfileAndAccountRequest } from "../../../actions/UserSettingsAccountActionCreators";
+import AlertActionCreators from "../../../actions/AlertActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+import { announcePendingAvatarChange } from "../../profile_customization/ProfileCustomizationUtils";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { nextOnboardingStep } from "../../nuf/native/NUFActionCreators";
+export function handlePressNext(a0, a1, a2) {
+  if (a0 != null) {
+    AnalyticsUtils.track(AnalyticEvents.USER_AVATAR_UPDATED, {
+      default_avatar_selected: a1,
+      is_guild_profile: false,
+      location: {
+        page: "Onboarding"
+      }
+    });
+    saveProfileAndAccountRequest({
+      avatar: a0.imageUri,
+      avatar_description: a0.description
+    });
+  }
+  if (a2 != null) {
+    a2();
+  } else {
+    ModalActionCreators.popWithKey(ADD_AVATAR_MODAL_KEY);
+    nextOnboardingStep({
+      skip: false
+    });
+  }
+}
+export function showSkipAvatarModal(c22927_0) {
+  AnalyticsUtils.track(AnalyticEvents.NUO_TRANSITION, {
+    flow_type: "Mobile NUX Post Reg",
+    from_step: "Skip avatar modal",
+    skip_attempt: true
+  });
+  AlertActionCreators.show({
+    title: intl.string(t.DnKHuV),
+    body: intl.string(t["1EPySE"]),
+    cancelText: intl.string(t["7eZ3ji"]),
+    confirmText: intl.string(t.nhJ8OC),
+    onConfirm: () => {
+      setPendingChanges({
+        avatar: null
+      });
+      announcePendingAvatarChange("remove");
+      if (c22927_0 != null) {
+        c22927_0(true);
+      } else {
+        ModalActionCreators.popWithKey(ADD_AVATAR_MODAL_KEY);
+        nextOnboardingStep({
+          skip: true
+        });
+      }
+    },
+    hideActionSheet: false
+  });
+}
+export function openAddAvatarModal() {
+  ModalActionCreators.pushLazy(import("./components/AddAvatarModal"), {}, ADD_AVATAR_MODAL_KEY);
+}

modules/avatar/native/components/AddAvatarModal.tsx

@@ -0,0 +1,153 @@
+// Metro module 16260 (f16261).
+import { useState, useMemo } from "react";
+import { View } from "react-native";
+import UserProfileSettingsStore from "../../../user_profile/UserProfileSettingsStore";
+import * as _Constants from "../../../../Constants";
+import { UPLOAD_MEDIUM_SIZE } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
+import TextStyles from "../../../rebrand/native/TextStyles";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { createPendingImage, generateAvatarDescription } from "../../../recent_avatars/RecentAvatarUtils";
+import PresetAvatarSelect, { DEFAULT_AVATARS } from "./PresetAvatarSelect";
+import { memoizedImageSource } from "../../../calls/native/VideoBackground";
+import { openImagePicker, base64GIFRegex } from "../../../../utils/native/UploadUtils";
+import { setPendingChanges } from "../../../user_profile/UserProfileSettingsActionCreators";
+import { announcePendingAvatarChange } from "../../../profile_customization/ProfileCustomizationUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import TouchableUploadAvatar from "./TouchableUploadAvatar";
+import { LegacyText } from "../../../../design/void/native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { handlePressNext, showSkipAvatarModal } from "../AddAvatarModalActionCreators";
+import { ImpressionNames } from "../../../../_bundle/Module503";
+import { HeaderActionButton } from "../../../../design/components/Navigator/native/HeaderActionButton.native";
+import { getHeaderNoTitle } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import { Navigator } from "../../../../design/components/Navigator/native/Navigator.native";
+let useStyles;
+const AddAvatarScreen = function AddAvatarScreen() {
+  let stateFromStores;
+  let _handleSelectAvatar2 = function _handleSelectAvatar() {
+    const r9 = async () => {
+      let c31011_1;
+      let c31805_0, c31805_1;
+      L13: {
+        c31011_1 = void 0;
+        c31805_0 = void 0;
+        c31805_1 = void 0;
+        setState(false);
+        c31805_0 = (await openImagePicker({
+          size: UPLOAD_MEDIUM_SIZE
+        })).base64;
+        if (c31805_0 != null) {
+          if (c31805_0.match(base64GIFRegex) != null) {
+            (0, setState)(true);
+            break L13;
+          }
+        }
+        c31805_1 = c31805_0 != null ? createPendingImage({
+          imageUri: c31805_0,
+          description: generateAvatarDescription()
+        }) : void 0;
+        setPendingChanges({
+          avatar: c31805_1
+        });
+        announcePendingAvatarChange(c31805_1 == null ? "remove" : "set");
+        (0, setState2)(void 0);
+      }
+    };
+    _handleSelectAvatar2 = r9;
+    return r9.apply(this, arguments);
+  };
+  const styles = useStyles();
+  let [state2, setState] = useState(false);
+  const [state, setState2] = useState();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStores2 = useStateFromStores([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges().pendingAvatar);
+  let r12 = state != null ? createPendingImage({
+    imageUri: DEFAULT_AVATARS[state],
+    description: generateAvatarDescription()
+  }) : void 0;
+  if (r12 == null) {
+    r12 = stateFromStores2;
+  }
+  stateFromStores = r12;
+  const avatarSource = memoizedImageSource(stateFromStores?.imageUri);
+  const style = [styles.container, {
+    paddingBottom: bottom > 0 ? bottom : 16
+  }];
+  const r100 = [<View>
+    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
+      {intl.string(t.XQRWvR)}
+    </Text>
+    <Text style={styles.subtitle} variant="heading-deprecated-12/medium" color="text-default">
+      {intl.string(t.fH9TLT)}
+    </Text>
+  </View>, <TouchableUploadAvatar avatarSource={avatarSource} showPendingAvatar={stateFromStores != null} onSelectAvatar={function handleSelectAvatar() {
+    return _handleSelectAvatar2.apply(this, arguments);
+  }} />, ,];
+  if (state2) {
+    state2 = intl.string(t.XyLlVm);
+  }
+  r100[2] = <View style={styles.errorContainer}>
+    <LegacyText style={styles.errorText}>{state2}</LegacyText>
+  </View>;
+  return <View style={style}>
+    <View style={styles.headerContainer}>{r100}</View>
+    <PresetAvatarSelect onAvatarSelect={setState2} selectedAvatar={state} />
+    <View style={styles.buttonContainer}>
+      <Button text={intl.string(t.PDTjLN)} grow onPress={() => handlePressNext(stateFromStores, state)} disabled={stateFromStores == null} />
+    </View>
+  </View>;
+};
+const AddAvatarModal = function AddAvatarModal() {
+  return <Navigator screens={useMemo(() => ({
+    ADD_AVATAR: {
+      impressionName: ImpressionNames.AVATAR_UPLOAD,
+      headerRight: () => <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => showSkipAvatarModal()} />,
+      headerLeft: () => null,
+      headerTitle: getHeaderNoTitle(),
+      ignoreKeyboard: true,
+      fullscreen: true,
+      render: () => <AddAvatarScreen />
+    }
+  }), [])} initialRouteName="ADD_AVATAR" />;
+};
+const { Fonts, ModalAnimation } = _Constants;
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    justifyContent: "center",
+    paddingTop: NAV_BAR_HEIGHT + 32,
+    alignItems: "center"
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  buttonContainer: {
+    marginHorizontal: 16,
+    marginBottom: 16
+  },
+  title: {
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  subtitle: {
+    textAlign: "center"
+  },
+  errorContainer: {
+    alignSelf: "center",
+    paddingTop: 24
+  },
+  errorText: {
+    ...TextStyles(Fonts.DISPLAY_MEDIUM, Module712.unsafe_rawColors.RED_400, 12)
+  }
+});
+AddAvatarModal.modalConfig = {
+  animation: ModalAnimation.SLIDE_IN_OUT
+};
+export default AddAvatarModal;

modules/avatar/native/components/AddAvatarModalConstants.tsx

@@ -0,0 +1,2 @@
+// Metro module 16259 (f16260).
+export const ADD_AVATAR_MODAL_KEY = "ADD_AVATAR_MODAL_KEY";

modules/avatar/native/components/PresetAvatarSelect.tsx

@@ -0,0 +1,116 @@
+// Metro module 16261 (f16262).
+import { View } from "react-native";
+import defaultAvatar1 from "../../images/defaultAvatar1";
+import defaultAvatar2 from "../../images/defaultAvatar2";
+import defaultAvatar3 from "../../images/defaultAvatar3";
+import defaultAvatar4 from "../../images/defaultAvatar4";
+import defaultAvatar5 from "../../images/defaultAvatar5";
+import defaultAvatar6 from "../../images/defaultAvatar6";
+import defaultAvatar7 from "../../images/defaultAvatar7";
+import defaultAvatar8 from "../../images/defaultAvatar8";
+import { intl, t } from "../../../../intl/index.native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import FastImage from "../../../../components_native/common/FastImage";
+let c11688_6, useStyles;
+const DefaultAvatarButton = function DefaultAvatarButton(props) {
+  const { source, onSelect: onSelect2, selected, accessibilityLabel } = props;
+  const styles = useStyles();
+  return <PressableOpacity style={[styles.defaultAvatarContainer, selected ? styles.defaultAvatarSelected : void 0]} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
+    selected
+  }} accessibilityHint={intl.string(t.vw2RsD)} onPress={onSelect2}>
+    <FastImage style={styles.defaultAvatarButton} source={{
+      uri: source
+    }} />
+  </PressableOpacity>;
+};
+const r28 = [defaultAvatar1, defaultAvatar2, defaultAvatar3, defaultAvatar4, defaultAvatar5, defaultAvatar6, defaultAvatar7, defaultAvatar8];
+c11688_6 = [{
+  avatar: defaultAvatar1,
+  label: () => intl.string(t["u/VENK"])
+}, {
+  avatar: defaultAvatar2,
+  label: () => intl.string(t["pBx+d8"])
+}, {
+  avatar: defaultAvatar3,
+  label: () => intl.string(t.vbERmz)
+}, {
+  avatar: defaultAvatar4,
+  label: () => intl.string(t.Ecxz3Z)
+}, {
+  avatar: defaultAvatar5,
+  label: () => intl.string(t.Jb8PYM)
+}, {
+  avatar: defaultAvatar6,
+  label: () => intl.string(t["3h0yoI"])
+}, {
+  avatar: defaultAvatar7,
+  label: () => intl.string(t.frIpZ5)
+}, {
+  avatar: defaultAvatar8,
+  label: () => intl.string(t.zpfUeg)
+}];
+useStyles = createStyles({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    flex: 1
+  },
+  buttonsContainer: {
+    display: "flex",
+    flexDirection: "row",
+    marginTop: 20,
+    justifyContent: "space-between"
+  },
+  defaultAvatarButton: {
+    height: 48,
+    width: 48,
+    borderRadius: Module712.radii.xl
+  },
+  defaultAvatarContainer: {
+    marginHorizontal: 8,
+    width: 56,
+    height: 56,
+    padding: 2,
+    borderWidth: 2,
+    borderRadius: 28,
+    borderColor: "transparent",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  defaultAvatarSelected: {
+    borderColor: Module712.colors.INTERACTIVE_TEXT_ACTIVE
+  }
+});
+export default function PresetAvatarSelect(props) {
+  const { onAvatarSelect, selectedAvatar } = props;
+  const styles = useStyles();
+  return <View style={styles.container} accessibilityRole="list">
+    <Text variant="text-sm/medium" color="text-default">
+      {intl.string(t.yP28YL)}
+    </Text>
+    <View style={styles.buttonsContainer}>
+      {[0, 1, 2, 3].map((item) => {
+        const r12 = c11688_6[item];
+        return <DefaultAvatarButton key={item} source={r12.avatar} onSelect={() => onAvatarSelect(item)} selected={selectedAvatar === item} accessibilityLabel={intl.formatToPlainString(t["1K8jaQ"], {
+          index: item + 1,
+          description: r12.label()
+        })} />;
+      })}
+    </View>
+    <View style={styles.buttonsContainer}>
+      {[4, 5, 6, 7].map((item) => {
+        const r12 = c11688_6[item];
+        return <DefaultAvatarButton key={item} source={r12.avatar} onSelect={() => onAvatarSelect(item)} selected={selectedAvatar === item} accessibilityLabel={intl.formatToPlainString(t["1K8jaQ"], {
+          index: item + 1,
+          description: r12.label()
+        })} />;
+      })}
+    </View>
+  </View>;
+};
+export { r28 as DEFAULT_AVATARS };
+export { c11688_6 as DEFAULT_AVATARS_WITH_LABELS };

modules/avatar/native/components/RedesignAddAvatarModal.tsx

@@ -0,0 +1,140 @@
+// Metro module 16276 (f16277).
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import UserProfileSettingsStore from "../../../user_profile/UserProfileSettingsStore";
+import { UPLOAD_MEDIUM_SIZE } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { createPendingImage, generateAvatarDescription } from "../../../recent_avatars/RecentAvatarUtils";
+import PresetAvatarSelect, { DEFAULT_AVATARS } from "./PresetAvatarSelect";
+import { memoizedImageSource } from "../../../calls/native/VideoBackground";
+import { openImagePicker, base64GIFRegex } from "../../../../utils/native/UploadUtils";
+import { setPendingChanges } from "../../../user_profile/UserProfileSettingsActionCreators";
+import { announcePendingAvatarChange } from "../../../profile_customization/ProfileCustomizationUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import TouchableUploadAvatar from "./TouchableUploadAvatar";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { handlePressNext } from "../AddAvatarModalActionCreators";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  contentContainer: {
+    flexGrow: 2,
+    alignItems: "center"
+  },
+  growContainer: {
+    flexGrow: 2,
+    minHeight: Module712.space.PX_24
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  buttonContainer: {
+    width: "100%"
+  },
+  title: {
+    marginBottom: Module712.space.PX_8,
+    textAlign: "center"
+  },
+  subtitle: {
+    textAlign: "center"
+  },
+  errorContainer: {
+    alignSelf: "center",
+    paddingTop: Module712.space.PX_24
+  }
+});
+export default function RedesignAddAvatarModal(props) {
+  let setState, state, setState2, stateFromStores;
+  const onComplete = props.route.params.onComplete;
+  setState = void 0;
+  state = void 0;
+  setState2 = void 0;
+  stateFromStores = void 0;
+  let _handleSelectAvatar2 = function _handleSelectAvatar() {
+    const r9 = async () => {
+      let c31013_1;
+      let c31807_0, c31807_1;
+      L13: {
+        c31013_1 = void 0;
+        c31807_0 = void 0;
+        c31807_1 = void 0;
+        setState(false);
+        c31807_0 = (await openImagePicker({
+          size: UPLOAD_MEDIUM_SIZE
+        })).base64;
+        if (c31807_0 != null) {
+          if (c31807_0.match(base64GIFRegex) != null) {
+            (0, setState)(true);
+            break L13;
+          }
+        }
+        c31807_1 = c31807_0 != null ? createPendingImage({
+          imageUri: c31807_0,
+          description: generateAvatarDescription()
+        }) : void 0;
+        setPendingChanges({
+          avatar: c31807_1
+        });
+        announcePendingAvatarChange(c31807_1 == null ? "remove" : "set");
+        (0, setState2)(void 0);
+      }
+    };
+    _handleSelectAvatar2 = r9;
+    return r9.apply(this, arguments);
+  };
+  const styles = useStyles();
+  let state2;
+  [state2, setState] = useState(false);
+  [state, setState2] = useState();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStores2 = useStateFromStores([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges().pendingAvatar);
+  let r13 = state != null ? createPendingImage({
+    imageUri: DEFAULT_AVATARS[state],
+    description: generateAvatarDescription()
+  }) : void 0;
+  if (r13 == null) {
+    r13 = stateFromStores2;
+  }
+  stateFromStores = r13;
+  const avatarSource = memoizedImageSource(stateFromStores?.imageUri);
+  const r112 = [<View>
+    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
+      {intl.string(t.XQRWvR)}
+    </Text>
+    <Text style={styles.subtitle} variant="text-sm/medium" color="text-default">
+      {intl.string(t.fH9TLT)}
+    </Text>
+  </View>, <TouchableUploadAvatar avatarSource={avatarSource} showPendingAvatar={stateFromStores != null} onSelectAvatar={function handleSelectAvatar() {
+    return _handleSelectAvatar2.apply(this, arguments);
+  }} />, ,];
+  if (state2) {
+    state2 = <Text variant="text-sm/medium" color="text-feedback-critical">
+      {intl.string(t.XyLlVm)}
+    </Text>;
+  }
+  r112[2] = <View style={styles.errorContainer}>{state2}</View>;
+  return <ScrollView style={styles.container} alwaysBounceVertical={false} contentContainerStyle={[styles.contentContainer, {
+    paddingBottom: bottom + Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16
+  }]}>
+    <View style={styles.headerContainer}>{r112}</View>
+    <PresetAvatarSelect onAvatarSelect={setState2} selectedAvatar={state} />
+    <View style={styles.growContainer} />
+    <View style={styles.buttonContainer}>
+      <Button variant="primary" size="lg" text={intl.string(t.PDTjLN)} onPress={() => {
+        let r11 = onComplete;
+        if (onComplete == null) {
+          r11 = () => {};
+        }
+        return handlePressNext(stateFromStores, state, r11);
+      }} disabled={stateFromStores == null} />
+    </View>
+  </ScrollView>;
+};

modules/avatar/native/components/RedesignSkipAvatarUploadAlertModal.tsx

@@ -0,0 +1,11 @@
+// Metro module 16275 (f16276).
+import { AlertModal, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { intl, t } from "../../../../intl/index.native";
+import { AlertActions } from "../../../../design/components/AlertModal/native/AlertModal.native";
+export default function RedesignSkipAvatarUploadAlertModal(props) {
+  const onConfirm = props.onConfirm;
+  return <AlertModal title={intl.string(t.DnKHuV)} content={intl.string(t["1EPySE"])} actions={<AlertActions>
+    <AlertActionButton key="confirm" onPress={onConfirm} text={intl.string(t.nhJ8OC)} />
+    <AlertActionButton key="add-profile-picture" variant="secondary" text={intl.string(t["7eZ3ji"])} />
+  </AlertActions>} />;
+};

modules/avatar/native/components/TouchableUploadAvatar.tsx

@@ -0,0 +1,78 @@
+// Metro module 16270 (f16271).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module13000 from "../../../../_bundle/Module13000";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import { intl, t } from "../../../../intl/index.native";
+import FastImage from "../../../../components_native/common/FastImage";
+import { Icon } from "../../../../design/void/native";
+import Module11872 from "../../../../_bundle/Module11872";
+const useStyles = createStyles({
+  avatarContainer: {
+    display: "flex",
+    paddingTop: 24
+  },
+  defaultLogoStyle: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
+    width: 96
+  },
+  uploadedAvatarStyle: {
+    width: 200,
+    height: 200,
+    borderRadius: 100,
+    position: "relative"
+  },
+  avatarWrapper: {
+    borderColor: Module712.colors.BORDER_MUTED,
+    borderStyle: "dashed",
+    borderWidth: 2,
+    borderRadius: Module712.radii.round,
+    width: 200,
+    height: 200,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    overflow: "visible"
+  },
+  uploadAvatarWrapper: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.round,
+    tintColor: Module712.colors.BACKGROUND_BASE_LOW,
+    position: "absolute",
+    right: 10,
+    top: 10,
+    width: 40,
+    height: 40,
+    flex: 1,
+    justifyContent: "center"
+  },
+  uploadAvatarIcon: {
+    tintColor: Module712.colors.WHITE,
+    alignSelf: "center"
+  }
+});
+export default function TouchableUploadAvatar(props) {
+  let source;
+  const { avatarSource, showPendingAvatar = false, onSelectAvatar } = props;
+  const styles = useStyles();
+  if (showPendingAvatar) {
+    source = avatarSource;
+    if (source == null) {
+      source = Module13000;
+    }
+  } else {
+    source = Module13000;
+  }
+  const style = showPendingAvatar && avatarSource != null ? styles.uploadedAvatarStyle : styles.defaultLogoStyle;
+  return <View style={styles.avatarContainer}>
+    <PressableOpacity onPress={onSelectAvatar} accessibilityRole="button" accessibilityLabel={intl.string(t["70lEQe"])}>
+      <View style={styles.avatarWrapper}>
+        <FastImage resizeMode="contain" style={style} source={source} />
+        <View style={styles.uploadAvatarWrapper}>
+          <Icon size={Icon.Sizes.MEDIUM} source={Module11872} style={styles.uploadAvatarIcon} />
+        </View>
+      </View>
+    </PressableOpacity>
+  </View>;
+};