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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>
  );
}