components#Icon TypeScript Examples

The following examples show how to use components#Icon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: BulletPointPurple.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BulletPointPurple = ({listAccessibile, text}: {listAccessibile: string; text: string}) => {
  const i18n = useI18n();

  let bulletLabel;
  let textLabel;

  switch (listAccessibile) {
    case 'listStart':
      bulletLabel = `${i18n.translate(`A11yList.Bullet`)} \n ${i18n.translate(`A11yList.Start`)}`;
      break;

    case 'listEnd':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      textLabel = `${text} ${i18n.translate(`A11yList.End`)}`;
      break;

    case 'item':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      break;
  }

  return (
    <Box flexDirection="row" marginBottom="s">
      <Box accessible accessibilityLabel={bulletLabel} marginTop="xxs" flex={0}>
        <Icon size={20} name="purple-bullet" />
      </Box>
      <Box flex={1}>
        <Text accessibilityLabel={textLabel} variant="bodyText" color="overlayBodyText" marginLeft="m">
          {text}
        </Text>
      </Box>
    </Box>
  );
}
Example #2
Source File: RadioButtons.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
RadioButton_ = ({value, onPress, name, selected, testID}: Props) => (
  <>
    <TouchableOpacity
      activeOpacity={0.6}
      onPress={() => onPress(value)}
      accessibilityRole="radio"
      accessibilityState={{selected}}
      testID={testID}
    >
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Box flexDirection="row" alignItems="center" paddingVertical="s">
          <Text variant="bodyText" color="overlayBodyText" marginHorizontal="m">
            {name}
          </Text>
        </Box>
        <Box alignSelf="center">{selected && <Icon size={32} name="icon-check" />}</Box>
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)
Example #3
Source File: Language.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
LanguageSelectItem = ({onPress, text, lastItem, isActive}: LanguageSelectItemProps) => (
  <>
    <TouchableOpacity
      activeOpacity={0.6}
      onPress={onPress}
      accessibilityRole="radio"
      accessibilityState={{selected: isActive}}
    >
      <Box
        paddingVertical="s"
        marginHorizontal="-m"
        paddingHorizontal="m"
        borderRadius={5}
        flexDirection="row"
        alignContent="center"
        justifyContent="space-between"
        backgroundColor="infoBlockNeutralBackground"
      >
        <Text variant="bodyText" marginVertical="s" color="overlayBodyText">
          {text}
        </Text>
        {isActive && (
          <Box alignSelf="center">
            <Icon size={32} name="icon-check" />
          </Box>
        )}
      </Box>
    </TouchableOpacity>
    {!lastItem && <Box height={5} marginHorizontal="-m" backgroundColor="overlayBackground" />}
  </>
)
Example #4
Source File: StatusHeaderView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
StatusHeaderView = ({enabled}: Props) => {
  const i18n = useI18n();
  const color = enabled ? 'statusSuccess' : 'statusError';
  return (
    <Box justifyContent="center" flexDirection="row" alignItems="flex-start" paddingHorizontal="m">
      <Icon name="header-logo" height={50} width={50} />

      <Box flexDirection="column" alignItems="flex-start" marginLeft="m">
        <Text variant="overlayTitle" color="darkText">
          COVID Tracing
        </Text>

        <Box flexDirection="row">
          <Text variant="overlayTitle" color="darkText">
            Mongolia апп{' '}
          </Text>
          <Text variant="overlayTitle" color={color} fontWeight="bold">
            {enabled ? i18n.translate('OverlayClosed.SystemStatusOn') : i18n.translate('OverlayClosed.SystemStatusOff')}
          </Text>
        </Box>
      </Box>
      <Text />
    </Box>
  );
}
Example #5
Source File: InfoShareView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
InfoShareItem = ({onPress, text, icon, lastItem, ...touchableProps}: InfoShareItemProps) => (
  <>
    <TouchableOpacity activeOpacity={0.6} onPress={onPress} accessibilityRole="button" {...touchableProps}>
      <Box
        paddingVertical="s"
        marginHorizontal="-m"
        paddingHorizontal="m"
        flexDirection="row"
        alignContent="center"
        justifyContent="space-between"
        backgroundColor="infoBlockNeutralBackground"
        borderRadius={5}
      >
        <Box flex={1}>
          <Text variant="menuItemText" marginVertical="s" color="darkText">
            {text}
          </Text>
        </Box>

        <Box alignSelf="center">
          <Icon size={25} name={icon} />
        </Box>
      </Box>
    </TouchableOpacity>
    {!lastItem && <Box height={5} marginHorizontal="-m" backgroundColor="overlayBackground" />}
  </>
)
Example #6
Source File: Tip.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
Tip = () => {
  const i18n = useI18n();
  return (
    <Box backgroundColor="green2" borderRadius={10} paddingVertical="m" marginTop="m" marginBottom="m">
      <Box flexDirection="row" paddingLeft="s" paddingRight="m">
        <Box flex={0} paddingTop="xxs" marginRight="xxs">
          <Icon name="icon-lightbulb" size={21} />
        </Box>
        <Box flex={1}>
          <Text color="bodyTextWhite" variant="bodyTitle" fontWeight="bold">
            {i18n.translate('Home.DiagnosedView.Tip.Title')}
          </Text>
          <Text marginTop="s" color="bodyTextWhite" variant="bodyDescription">
            Та доорх сайтаас COVID-19 халдварын талаарх дэлгэрэнгүй мэдээлэл авах боломжтой
          </Text>
        </Box>
      </Box>

      <Box paddingHorizontal="m" paddingTop="s" marginTop="s">
        <ButtonSingleLine
          text="Тусламж авах"
          variant="thinFlatNeutralGrey"
          externalLink="icon-external-arrow-lightgreen"
          onPress={() => Linking.openURL(`https://covid19.mohs.mn`)}
        />
      </Box>
    </Box>
  );
}
Example #7
Source File: BaseHomeView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BaseHomeView = ({children, iconName, testID}: BaseHomeViewProps) => {
  return (
    <>
      <ScrollView
        alwaysBounceVertical={false}
        style={styles.scrollView}
        testID={testID}
        contentContainerStyle={styles.scrollContainer}
      >
        <SafeAreaView edges={['left', 'right']} style={{width: '100%'}}>
          <View style={styles.iconContainer}>
            <BackgroundSvg
              height="105%"
              width="105%"
              style={{
                position: 'absolute',
              }}
            />
            <View style={{marginTop: 23, marginBottom: 36}}>
              <Icon name={iconName} width={120} height={120} />
            </View>
          </View>
          <Box
            width="100%"
            flex={1}
            alignItems="flex-start"
            justifyContent="flex-start"
            paddingHorizontal="m"
            marginBottom="l"
            marginTop="l"
          >
            {children}
          </Box>
        </SafeAreaView>
      </ScrollView>
    </>
  );
}
Example #8
Source File: BaseErrorView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BaseErrorView = ({children, iconName, testID}: BaseHomeViewProps) => {
  return (
    <>
      <ScrollView
        alwaysBounceVertical={false}
        style={styles.scrollView}
        testID={testID}
        contentContainerStyle={styles.scrollContainer}
      >
        <SafeAreaView edges={['left', 'right']} style={{width: '100%'}}>
          <View style={styles.iconContainer}>
            <BackgroundSvg
              height="105%"
              width="105%"
              style={{
                position: 'absolute',
              }}
            />
            <View style={{marginTop: 23, marginBottom: 36}}>
              <Icon name={iconName} width={120} height={120} />
            </View>
          </View>
          <Box
            width="100%"
            flex={1}
            alignItems="flex-start"
            justifyContent="flex-start"
            paddingHorizontal="m"
            marginBottom="l"
            marginTop="l"
          >
            {children}
          </Box>
        </SafeAreaView>
      </ScrollView>
    </>
  );
}
Example #9
Source File: BulletPointX.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BulletPointX = ({listAccessibile, text}: {listAccessibile: string; text: string}) => {
  const i18n = useI18n();

  let bulletLabel;
  let textLabel;

  switch (listAccessibile) {
    case 'listStart':
      bulletLabel = `${i18n.translate(`A11yList.Bullet`)} \n ${i18n.translate(`A11yList.Start`)}`;
      break;

    case 'listEnd':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      textLabel = `${text} ${i18n.translate(`A11yList.End`)}`;
      break;

    case 'item':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      break;
  }

  return (
    <Box flexDirection="row" marginBottom="m">
      <Box accessible accessibilityLabel={bulletLabel} marginTop="xxs">
        <Icon size={20} name="cross" />
      </Box>
      <Text accessibilityLabel={textLabel} variant="bodyText" color="darkText" marginLeft="m">
        {text}
      </Text>
    </Box>
  );
}
Example #10
Source File: BulletPointCheck.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BulletPointCheck = ({listAccessibile, text}: {listAccessibile: string; text: string}) => {
  const i18n = useI18n();

  let bulletLabel;
  let textLabel;

  switch (listAccessibile) {
    case 'listStart':
      bulletLabel = `${i18n.translate(`A11yList.Bullet`)} \n ${i18n.translate(`A11yList.Start`)}`;
      break;

    case 'listEnd':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      textLabel = `${text} ${i18n.translate(`A11yList.End`)}`;
      break;

    case 'item':
      bulletLabel = i18n.translate(`A11yList.Bullet`);
      break;
  }

  return (
    <Box flexDirection="row" marginBottom="s">
      <Box accessible accessibilityLabel={bulletLabel} marginTop="xxs" flex={0}>
        <Icon size={20} name="tick" />
      </Box>
      <Box flex={1}>
        <Text accessibilityLabel={textLabel} variant="bodyText" color="darkText" marginLeft="m">
          {text}
        </Text>
      </Box>
    </Box>
  );
}
Example #11
Source File: RegionPicker.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
RegionItem_ = ({code, onPress, name, flagIcon, selected}: RegionItemProps) => (
  <>
    <TouchableOpacity onPress={() => onPress(code)} accessibilityRole="radio" accessibilityState={{selected}}>
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Box flexDirection="row" alignItems="center" paddingVertical="s">
          <Image source={flagIcon} style={styles.flag} />
          <Text variant="bodyText" color="overlayBodyText" marginHorizontal="m">
            {name}
          </Text>
        </Box>
        <Box alignSelf="center">{selected && <Icon size={32} name="icon-check" />}</Box>
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)
Example #12
Source File: Language.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
LanguageSelectItem = ({onPress, text, isActive}: LanguageSelectItemProps) => (
  <>
    <TouchableOpacity onPress={onPress} accessibilityRole="radio" accessibilityState={{selected: isActive}}>
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Text variant="bodyText" marginVertical="s" color="overlayBodyText">
          {text}
        </Text>
        {isActive && (
          <Box alignSelf="center">
            <Icon size={32} name="icon-check" />
          </Box>
        )}
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)
Example #13
Source File: StatusHeaderView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
StatusHeaderView = ({enabled}: Props) => {
  const [i18n] = useI18n();
  const color = enabled ? 'statusSuccess' : 'statusError';
  return (
    <Box justifyContent="center" flexDirection="row" alignItems="flex-start" paddingHorizontal="m">
      <Box marginHorizontal="s">
        <Icon name={enabled ? 'shield-active' : 'shield-disabled'} />
      </Box>
      <Box paddingTop="xs" flexDirection="row" flexWrap="wrap">
        <Text variant="overlayTitle" lineHeight={19} color={color}>
          {i18n.translate('OverlayClosed.SystemStatus')}
        </Text>
        <Text variant="overlayTitle" lineHeight={19} color={color} fontFamily="Nunito-Bold">
          {enabled ? i18n.translate('OverlayClosed.SystemStatusOn') : i18n.translate('OverlayClosed.SystemStatusOff')}
        </Text>
      </Box>
    </Box>
  );
}
Example #14
Source File: NetworkDisabledView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
NetworkDisabledView = () => {
  const [i18n] = useI18n();
  return (
    <BaseHomeView>
      <Box marginBottom="l">
        <Icon name="icon-offline" size={44} />
      </Box>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.NoConnectivity')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.NoConnectivityDetailed')}
      </Text>
      <LastCheckedDisplay />
    </BaseHomeView>
  );
}
Example #15
Source File: InfoShareView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
InfoShareItem = ({onPress, text, icon, ...touchableProps}: InfoShareItemProps) => (
  <>
    <TouchableOpacity onPress={onPress} accessibilityRole="button" {...touchableProps}>
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Text variant="bodyText" marginVertical="s" color="overlayBodyText">
          {text}
        </Text>
        <Box alignSelf="center">
          <Icon size={32} name={icon} />
        </Box>
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)
Example #16
Source File: ExposureNotificationsDisabledView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
ExposureNotificationsDisabledView = () => {
  const [i18n] = useI18n();
  const startExposureNotificationService = useStartExposureNotificationService();

  const enableExposureNotifications = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  return (
    <BaseHomeView>
      <Box marginBottom="l">
        <Icon name="icon-exposure-notifications-disabled" size={44} />
      </Box>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.ExposureNotificationsDisabled')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.ExposureNotificationsDisabledDetailed')}
      </Text>
      <LastCheckedDisplay />
      <Box alignSelf="stretch" marginTop="l">
        <Button
          text={i18n.translate('Home.EnableExposureNotificationsCTA')}
          variant="bigFlat"
          onPress={enableExposureNotifications}
        />
      </Box>
    </BaseHomeView>
  );
}
Example #17
Source File: BluetoothDisabledView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BluetoothDisabledView = () => {
  const [i18n] = useI18n();
  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);

  return (
    <BaseHomeView>
      <Box marginBottom="l">
        <Icon name="icon-bluetooth-disabled" size={44} />
      </Box>
      <Text textAlign="center" variant="bodyTitle" color="bodyText" marginBottom="l" accessibilityRole="header">
        {i18n.translate('Home.BluetoothDisabled')}
      </Text>
      <Text variant="bodyText" color="bodyText" textAlign="center">
        {i18n.translate('Home.EnableBluetoothCTA')}
      </Text>
      <LastCheckedDisplay />
      <Box alignSelf="stretch" marginTop="l">
        <Button text={i18n.translate('Home.TurnOnBluetooth')} variant="bigFlat" onPress={toSettings} />
      </Box>
    </BaseHomeView>
  );
}
Example #18
Source File: ConsentView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
ConsentView = ({onSuccess, onError}: Props) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const [loading, setLoading] = useState(false);
  const {fetchAndSubmitKeys} = useReportDiagnosis();

  const toPrivacyPolicy = useCallback(() => navigation.navigate('Privacy'), [navigation]);

  const handleUpload = useCallback(async () => {
    setLoading(true);
    try {
      await fetchAndSubmitKeys();
      setLoading(false);
      onSuccess();
    } catch {
      setLoading(false);
      onError();
    }
  }, [fetchAndSubmitKeys, onError, onSuccess]);

  if (loading) {
    return (
      <Box margin="xxl" flex={1} justifyContent="center" alignItems="center">
        <ActivityIndicator size="large" color="#0278A4" />
      </Box>
    );
  }
  return (
    <>
      <ScrollView style={styles.flex}>
        <Box paddingHorizontal="l" marginBottom="m" marginTop="s" flexDirection="row">
          <Icon name="icon-enter-code" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m" flexDirection="row">
          <Icon name="icon-notify" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody2')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m" flexDirection="row">
          <Icon name="icon-notifications" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="l">
            {i18n.translate('DataUpload.ConsentBody3')}
          </Text>
        </Box>
        <Box paddingHorizontal="l" marginBottom="m">
          <Button variant="text" text={i18n.translate('DataUpload.PrivacyPolicyLink')} onPress={toPrivacyPolicy} />
        </Box>
      </ScrollView>
      <Box paddingHorizontal="m" marginBottom="m">
        <Button variant="bigFlat" text={i18n.translate('DataUpload.ConsentAction')} onPress={handleUpload} />
      </Box>
    </>
  );
}
Example #19
Source File: Start.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
Start = () => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  return (
    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
      <Box paddingHorizontal="xl">
        <Box paddingHorizontal="l" marginTop="m">
          <Text
            variant="bodyTitle"
            color="overlayBodyText"
            marginHorizontal="l"
            marginBottom="l"
            textAlign="center"
            accessibilityRole="header"
          >
            {i18n.translate('OnboardingStart.Title')}
          </Text>
        </Box>
        <Box flexDirection="row" alignItems="center" marginBottom="l">
          <Icon size={30} name="icon-notifications" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
            {i18n.translate('OnboardingStart.Body1')}
          </Text>
        </Box>
        <Box flexDirection="row" alignItems="center" marginBottom="l">
          <Icon size={30} name="icon-notify" />
          <Text variant="bodyText" color="overlayBodyText" marginLeft="m" marginRight="m">
            {i18n.translate('OnboardingStart.Body2')}
          </Text>
        </Box>
        <Box flexDirection="row" justifyContent="space-around" alignItems="center" marginBottom="l">
          <Button
            text={i18n.translate('OnboardingStart.TutorialAction')}
            variant="bigFlatWhite"
            onPress={() => navigation.navigate('Tutorial')}
          />
        </Box>
      </Box>
    </ScrollView>
  );
}
Example #20
Source File: CollapsedOverlayView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
CollapsedOverlayView = ({status, notificationWarning, bottomSheetBehavior}: Props) => {
  const i18n = useI18n();

  useEffect(() => {
    bottomSheetBehavior.refreshSnapPoints(notificationWarning);
  }, [notificationWarning, bottomSheetBehavior]);

  return (
    <TouchableOpacity activeOpacity={0.6} onPress={bottomSheetBehavior.expand}>
      <Animated.View style={{opacity: pow(bottomSheetBehavior.callbackNode, 2)}}>
        <View style={styles.content}>
          <View style={styles.collapseContentHandleBar}>
            <Icon name="sheet-handle-bar" size={36} />
          </View>
          <Box>
            <Box marginBottom="s">
              <StatusHeaderView enabled={status === SystemStatus.Active} />
            </Box>
            {notificationWarning && (
              <Box
                backgroundColor="infoBlockNeutralBackground"
                borderRadius={10}
                padding="m"
                flex={1}
                marginBottom="xs"
                marginHorizontal="m"
                justifyContent="center"
                flexDirection="row"
              >
                <Text variant="menuItemTitle" color="overlayBodyText" accessibilityRole="header">
                  {i18n.translate('OverlayClosed.NotificationStatus')}
                </Text>
                <Text variant="menuItemTitle" color="overlayBodyText" fontWeight="bold" accessibilityRole="header">
                  {i18n.translate('OverlayClosed.NotificationStatusOff')}
                </Text>
              </Box>
            )}
          </Box>
        </View>
      </Animated.View>
    </TouchableOpacity>
  );
}
Example #21
Source File: OverlayView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
OverlayView = ({status, notificationWarning, turnNotificationsOn, bottomSheetBehavior}: Props) => {
  const i18n = useI18n();

  return (
    <Animated.View style={{opacity: abs(sub(bottomSheetBehavior.callbackNode, 1))}}>
      <AccessibleView>
        <SafeAreaView>
          <Box>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={bottomSheetBehavior.collapse}
              style={styles.collapseButton}
              accessibilityLabel={i18n.translate('BottomSheet.Collapse')}
              accessibilityRole="button"
              testID="BottomSheet-Close"
            >
              <Icon name="sheet-handle-bar-close" size={36} />
            </TouchableOpacity>

            <Box marginBottom="s">
              <StatusHeaderView enabled={status === SystemStatus.Active} />
            </Box>
            <Box marginBottom="m" marginTop="s" marginHorizontal="m">
              <ShareDiagnosisCode isBottomSheetExpanded={bottomSheetBehavior.isExpanded} i18n={i18n} />
            </Box>
            {(status === SystemStatus.Disabled || status === SystemStatus.Restricted) && (
              <Box marginBottom="m" marginHorizontal="m">
                <SystemStatusOff i18n={i18n} />
              </Box>
            )}
            {status === SystemStatus.Unauthorized && (
              <Box marginBottom="m" marginHorizontal="m">
                <SystemStatusUnauthorized i18n={i18n} />
              </Box>
            )}
            {status === SystemStatus.BluetoothOff && (
              <Box marginBottom="m" marginHorizontal="m">
                <BluetoothStatusOff i18n={i18n} />
              </Box>
            )}
            {notificationWarning && (
              <Box marginBottom="m" marginHorizontal="m">
                <NotificationStatusOff action={turnNotificationsOn} i18n={i18n} />
              </Box>
            )}
            <Box marginBottom="m" marginHorizontal="m">
              <InfoShareView />
            </Box>
          </Box>
        </SafeAreaView>
      </AccessibleView>
    </Animated.View>
  );
}