react-native-elements#Badge TypeScript Examples

The following examples show how to use react-native-elements#Badge. 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: Timeline.tsx    From wuhan2020-frontend-react-native-app with MIT License 5 votes vote down vote up 
function Entry(props: EntryPropsType) {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <ListItem
        onPress={() => setVisible(true)}
        Component={TouchableOpacity}
        title={<Text style={{ fontWeight: '800' }}>{props.title}</Text>}
        subtitle={`${props.summary.slice(0, 50)}...`}
        leftAvatar={
          <View>
            {props.latest ? (
              <Badge
                value="最新"
                status="error"
                textStyle={{ fontSize: 13, fontWeight: 'bold' }}
              />
            ) : null}
            <Text style={{ fontSize: 13, fontWeight: 'bold' }}>
              {props.pubDateStr}
            </Text>
            <Text style={{ fontSize: 12, color: '#717171' }}>
              {formatTime(props.modifyTime)}
            </Text>
          </View>
        }
        rightAvatar={
          <View style={{ justifyContent: 'flex-end', alignItems: 'flex-end' }}>
            <Text style={{ fontSize: 12, color: '#717171' }}>
              {props.infoSource}
            </Text>
          </View>
        }
      />
      <Modal
        animationType="fade"
        presentationStyle="pageSheet"
        visible={visible}
        onDismiss={() => {
          setVisible(false);
        }}
        onRequestClose={() => {
          setVisible(false);
        }}>
        <View style={{ padding: 16, justifyContent: 'space-between' }}>
          <View style={{ height: height - 150 }}>
            <Text
              style={{ fontSize: 20, fontWeight: 'bold', paddingBottom: 20 }}>
              {props.title}
            </Text>
            <Text style={{ fontSize: 16, lineHeight: 22 }}>
              {props.summary}
            </Text>

            <View style={{ alignSelf: 'flex-end', paddingTop: 20 }}>
              <Text style={{ fontWeight: '800' }}>
                新闻来源：{props.infoSource}
              </Text>
              <Text style={{ fontWeight: '800' }}>
                时间：{props.pubDateStr}
              </Text>
            </View>
          </View>

          <View>
            <Button
              buttonStyle={styles.button}
              title="关闭预览"
              onPress={() => {
                setVisible(false);
              }}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
}
Example #2
Source File: ProductDetailsScreen.tsx    From magento_react_native_graphql with MIT License 4 votes vote down vote up 
ProductDetailsScreen = ({
  navigation,
  route: {
    params: { sku },
  },
}: Props): React.ReactElement => {
  const {
    error,
    loading,
    priceRange,
    mediaGallery,
    productDetails,
    selectedConfigurableProductOptions,
    handleSelectedConfigurableOptions,
  } = useProductDetails({
    sku,
  });
  const {
    cartCount,
    isLoggedIn,
    addProductsToCart,
    addToCartLoading,
  } = useCart();
  const { theme } = useContext(ThemeContext);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <CustomHeaderButtons>
          <CustomHeaderItem
            title={translate('common.cart')}
            iconName="shopping-cart"
            onPress={() =>
              navigation.navigate(Routes.NAVIGATION_TO_CART_SCREEN)
            }
          />
          {cartCount !== '' && (
            <Badge
              value={cartCount}
              status="error"
              textStyle={styles.badgeText}
              containerStyle={styles.badge}
            />
          )}
        </CustomHeaderButtons>
      ),
    });
  }, [navigation, cartCount]);

  const handleAddToCart = () => {
    if (!isLoggedIn) {
      showLoginPrompt(
        translate('productDetailsScreen.guestUserPromptMessage'),
        navigation,
      );
      return;
    }

    if (
      productDetails?.type === ProductTypeEnum.SIMPLE ||
      productDetails?.type === ProductTypeEnum.GROUPED
    ) {
      addProductsToCart({
        quantity: 1,
        sku: productDetails.sku,
      });
    } else {
      showMessage({
        message: translate('common.attention'),
        description: translate('productDetailsScreen.productTypeNotSupported'),
        type: 'warning',
      });
    }
  };

  const renderPrice = (): React.ReactNode => {
    if (productDetails && priceRange) {
      return (
        <Text h2 style={styles.price}>
          {formatPrice(priceRange.maximumPrice.finalPrice)}
        </Text>
      );
    }
    return null;
  };

  const renderOptions = (): React.ReactNode => {
    if (productDetails?.type === ProductTypeEnum.CONFIGURED) {
      return (
        <ConfigurableProductOptions
          options={productDetails?.configurableOptions}
          selectedConfigurableProductOptions={
            selectedConfigurableProductOptions
          }
          handleSelectedConfigurableOptions={handleSelectedConfigurableOptions}
        />
      );
    }
    return null;
  };

  const renderDiscription = (): React.ReactNode => {
    if (productDetails) {
      return (
        <HTML
          source={{ html: productDetails.description.html }}
          contentWidth={Dimensions.get('window').width}
          containerStyle={styles.description}
          baseFontStyle={{ color: theme.colors?.black }}
        />
      );
    }
    return null;
  };

  return (
    <GenericTemplate
      scrollable
      loading={loading}
      errorMessage={error?.message}
      footer={
        <Button
          loading={addToCartLoading}
          containerStyle={styles.noBorderRadius}
          buttonStyle={styles.noBorderRadius}
          title={translate('productDetailsScreen.addToCart')}
          onPress={handleAddToCart}
        />
      }
    >
      <View>
        <MediaGallery items={mediaGallery} />
        <Text h1 style={styles.name}>
          {productDetails?.name}
        </Text>
        {renderPrice()}
        {renderOptions()}
        {renderDiscription()}
      </View>
    </GenericTemplate>
  );
}