react-native-elements#Icon TypeScript Examples

The following examples show how to use react-native-elements#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: HudView.tsx    From SQUID with MIT License 6 votes vote down vote up 
_renderDefaultSpinnerComponent() {
    return (
      <Icon
        name="circle-o-notch"
        type="fontawesome"
        size={this.props.iconSize}
        color={this.props.iconColor}
      />
    );
  }
Example #2
Source File: HudView.tsx    From SQUID with MIT License 6 votes vote down vote up 
_renderDefaultSuccessComponent() {
    return (
      <Icon
        name="check"
        type="fontawesome"
        size={this.props.iconSize}
        color={this.props.iconColor}
      />
    );
  }
Example #3
Source File: HudView.tsx    From SQUID with MIT License 6 votes vote down vote up 
_renderDefaultErrorComponent() {
    return (
      <Icon
        name="exclamation-triangle"
        type="fontawesome"
        size={this.props.iconSize}
        color={this.props.iconColor}
      />
    );
  }
Example #4
Source File: ProductItem.component.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
_renderCartDetail = ({
  product,
  quantity = 0,
  subQuantity = noop,
  addQuantity = noop,
  removeFromCart = noop
}: Props): JSX.Element => (
  <>
    <View style={styles.actionView}>
      <Icon
        name="minus"
        type="font-awesome-5"
        onPress={(): void => subQuantity(product.id)}
      />
      <Text>Quantity: {quantity}</Text>
      <Icon
        name="plus"
        type="font-awesome-5"
        onPress={(): void => addQuantity(product.id)}
      />
    </View>
    <Button title="Remove" onPress={(): void => removeFromCart(product.id)} />
  </>
)
Example #5
Source File: Cart.component.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
Cart = (props: Props): JSX.Element => {
  const { products, resetCart, total, handleCheckoutPress } = props;

  return (
    <>
      <View style={styles.cartOverview}>
        <View style={styles.leftCartOverview}>
          <Icon
            reverse
            name="trash-alt"
            type="font-awesome-5"
            onPress={resetCart}
          />
          <Text style={styles.textTotal}>{`Total:\n${toAmount(total)}`}</Text>
        </View>
        <Button title="Checkout" onPress={handleCheckoutPress} />
      </View>
      <FlatList
        contentContainerStyle={styles.container}
        data={products}
        renderItem={_renderProduct(props)}
        keyExtractor={(item): string => `${item.id}`}
        numColumns={2}
        ListEmptyComponent={_renderEmpty()}
      />
    </>
  );
}
Example #6
Source File: index.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
Navigation = (): JSX.Element => (
  <Tab.Navigator
    screenOptions={({ route }): object => ({
      tabBarIcon: ({
        color,
        size
      }: {
        color: string;
        size: number;
      }): JSX.Element => (
        <Icon
          name={tabIcons[route.name]}
          type="font-awesome-5"
          size={size}
          color={color}
        />
      )
    })}>
    <Tab.Screen name={routes.Browse} component={Browse} />
    <Tab.Screen name={routes.Orders} component={Orders} />
  </Tab.Navigator>
)
Example #7
Source File: ProductItem.component.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
_renderCartDetail = ({
  product,
  quantity = 0,
  subQuantity,
  addQuantity,
  removeFromCart
}: Props): JSX.Element => (
  <>
    <View style={styles.actionView}>
      <Icon
        name='minus'
        type='font-awesome-5'
        onPress={(): void => subQuantity(product.id)}
      />
      <Text>Quantity: {quantity}</Text>
      <Icon
        name='plus'
        type='font-awesome-5'
        onPress={(): void => addQuantity(product.id)}
      />
    </View>
    <Button
      title="Remove"
      onPress={(): void => removeFromCart(product.id)}
    />
  </>
)
Example #8
Source File: Cart.component.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
Browse = (props: Props): JSX.Element => {
  const {
    products,
    resetCart,
    total,
    handleCheckoutPress
  } = props;

  return (
    <>
      <View style={styles.cartOverview}>
        <View style={styles.leftCartOverview}>
          <Icon
            reverse
            name="trash-alt"
            type="font-awesome-5"
            onPress={(): void => resetCart()}
          />
          <Text style={styles.textTotal}>{`Total:\n${toAmount(total)}`}</Text>
        </View>
        <Button
          title="Checkout"
          onPress={(): void => handleCheckoutPress()}
        />
      </View>
      <FlatList
        contentContainerStyle={styles.container}
        data={products}
        renderItem={_renderProduct(props)}
        keyExtractor={(item): string => `${item.id}`}
        numColumns={2}
      />
    </>
  );
}
Example #9
Source File: Stacks.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
Home = (): JSX.Element => (
  <Tab.Navigator
    screenOptions={({ route }): object => ({
      tabBarIcon: ({ color, size }: { color: string; size: number}): JSX.Element =>
        <Icon
          name={tabIcons[route.name]}
          type="font-awesome-5"
          size={size}
          color={color}
        />
    })}>
    <Tab.Screen name={Routes.Browse} component={Browse}/>
    <Tab.Screen name={Routes.Orders} component={Orders}/>
  </Tab.Navigator>
)
Example #10
Source File: CheckBoxItem.tsx    From SQUID with MIT License 5 votes vote down vote up 
CheckBoxItem = ({
  title,
  onPress,
  description,
  checked,
}: {
  title: string | React.ReactElement
  onPress: (e: any) => any
  description?: string | React.ReactElement
  checked?: boolean
}) => {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.8} disabled={checked}>
      <View style={liStyles.container}>
        <View style={liStyles.iconContainer}>
          {checked ? (
            <Icon
              style={liStyles.icon}
              type="font-awesome"
              name="dot-circle-o"
              color={COLORS.ORANGE}
            />
          ) : (
            <Icon
              style={liStyles.icon}
              type="font-awesome"
              name="circle-o"
              color={COLORS.GRAY_2}
            />
          )}
        </View>
        <View>
          <Text style={liStyles.title}>{title}</Text>
          {description && (
            <Text style={liStyles.description}>{description}</Text>
          )}
        </View>
      </View>
    </TouchableOpacity>
  )
}
Example #11
Source File: BottomTabNavigator.tsx    From magento_react_native_graphql with MIT License 5 votes vote down vote up 
BottomTabNavigator = ({ navigation }: Props) => {
  const { data } = useQuery<IsLoggedInDataType>(IS_LOGGED_IN);
  const { cartCount } = useCart();
  const { theme } = useContext(ThemeContext);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name={Routes.NAVIGATION_TO_HOME_SCREEN}
        component={HomeScreen}
        options={{
          tabBarLabel: translate('homeScreen.appbarTitle'),
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name={Routes.NAVIGATION_TO_PROFILE_SCREEN}
        component={ProfileScreen}
        options={{
          tabBarLabel: translate('profileScreen.appbarTitle'),
          tabBarIcon: ({ color, size }) => (
            <Icon name="person" color={color} size={size} />
          ),
        }}
        listeners={{
          tabPress: e => {
            if (!data?.isLoggedIn) {
              // Prevent default action
              e.preventDefault();
              showLoginPrompt(
                translate('profileScreen.guestUserPromptMessage'),
                navigation,
              );
            }
          },
        }}
      />
      <Tab.Screen
        name={Routes.NAVIGATION_TO_CART_SCREEN}
        component={CartScreen}
        options={{
          tabBarLabel: translate('cartScreen.appbarTitle'),
          tabBarIcon: ({ color, size }) => (
            <Icon name="shopping-cart" color={color} size={size} />
          ),
          tabBarBadgeStyle: {
            backgroundColor: theme.colors?.error,
          },
          ...(cartCount !== '' && { tabBarBadge: cartCount }),
        }}
        listeners={{
          tabPress: e => {
            if (!data?.isLoggedIn) {
              // Prevent default action
              e.preventDefault();
              showLoginPrompt(
                translate('cartScreen.guestUserPromptMessage'),
                navigation,
              );
            }
          },
        }}
      />
    </Tab.Navigator>
  );
}
Example #12
Source File: ConfigurableOptionValues.tsx    From magento_react_native_graphql with MIT License 5 votes vote down vote up 
ConfigurableOptionValues = ({
  values,
  optionCode,
  selectedIndex,
  handleSelectedConfigurableOptions,
}: Props): React.ReactElement => {
  const { theme } = useContext(ThemeContext);

  const renderValue = (value: ConfigurableProductOptionValueType) => {
    const selected = selectedIndex === value.valueIndex;
    switch (value.swatchData.__typename) {
      case 'ColorSwatchData': {
        return (
          <>
            <View
              style={{
                width:
                  DIMENS.productDetailScreen.configurableOptionValueBoxSize,
                height:
                  DIMENS.productDetailScreen.configurableOptionValueBoxSize,
                backgroundColor: value.swatchData.value,
              }}
            />
            {selected ? (
              <View style={styles.selectedColor}>
                <Icon type="ionicon" name="checkmark" size={24} />
              </View>
            ) : null}
          </>
        );
      }
      case 'TextSwatchData': {
        return (
          <View
            style={[
              styles.selectedText,
              {
                backgroundColor: selected
                  ? theme.colors?.black
                  : theme.colors?.white,
              },
            ]}
          >
            <Text
              style={{
                color: selected ? theme.colors?.white : theme.colors?.black,
              }}
            >
              {value.swatchData.value}
            </Text>
          </View>
        );
      }
      default: {
        return null;
      }
    }
  };

  return (
    <View style={styles.container}>
      {values.map(value => (
        <TouchableOpacity
          key={String(value.valueIndex)}
          onPress={() =>
            handleSelectedConfigurableOptions(optionCode, value.valueIndex)
          }
        >
          <View style={styles.valueContainer}>{renderValue(value)}</View>
        </TouchableOpacity>
      ))}
    </View>
  );
}
Example #13
Source File: Input.tsx    From save-food with MIT License 5 votes vote down vote up 
Input = ({
	inputConfig,
	value,
	changed,
	translations,
	hideClearIcon,
	placeholder,
	style,
	focus = true,
}: Props) => {
	const textField = useRef<TextField>(null)
	const [error, setError] = useState<string | boolean | undefined>(inputConfig.error)

	const checkValidation = (value?: InputValue, initial = false) => {
		let newValue = value
		if (value && inputConfig.number) {
			newValue = replaceComma(value)
		}

		if (initial && inputConfig.required && !newValue) {
			// Initial valid without label
			changed('', { ...inputConfig, error: true })
			textField.current?.setValue('')
			setError(true)
		} else {
			const newControl = validator(inputConfig, newValue!, translations)
			changed(newValue!, newControl)
			textField.current?.setValue(`${newValue}`)
			setError(newControl.error)
		}
	}

	useEffect(() => {
		checkValidation(value, true)
	}, [])

	return (
		<View style={styles.container}>
			<View style={styles.wrapper}>
				<TextField
					{...inputConfig}
					error={typeof error === 'boolean' ? '' : error}
					ref={textField}
					style={style}
					textColor={darkColor}
					baseColor={darkColor}
					tintColor={primaryColor}
					lineWidth={2}
					placeholder={placeholder}
					errorColor={error === true ? darkColor : redColor}
					autoFocus={focus}
					onChangeText={(value: InputValue) => checkValidation(value)}
					value={`${value}`}
				/>
			</View>
			<View style={styles.clearIconWrapper}>
				{!hideClearIcon && (
					<Icon
						style={styles.clearIcon}
						onPress={() => checkValidation('')}
						name='clear'
						size={18}
					/>
				)}
			</View>
		</View>
	)
}
Example #14
Source File: home.tsx    From bext with MIT License 4 votes vote down vote up 
HomeScreen: FC = () => {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Icon name="add" onPress={() => setModalVisible(true)} />
      ),
    });
  }, [navigation]);
  const db = useDb();
  const { loading, data, run } = useRequest(getDrafts, {
    ready: db.ready,
  });
  const [name, setName] = useState('');
  useFocusEffect(useMemoizedFn(run));

  const onDelete = useMemoizedFn(async (id: number) => {
    await deleteDraft(id);
    run();
  });

  const onPress = useMemoizedFn((id: number) => {
    navigation.navigate(
      'dev' as never,
      {
        id,
      } as never,
    );
  });

  const createDraft = useMemoizedFn(async (empty: boolean) => {
    const id = await addDraft(name);
    setName('');
    run();
    setModalVisible(false);
    if (id) {
      navigation.navigate(
        'dev' as never,
        {
          id,
          modify: empty ? undefined : true,
        } as never,
      );
    }
  });

  return (
    <View style={{ flex: 1 }}>
      <Overlay
        transparent
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        overlayStyle={styles.overlay}
      >
        <Input
          label="输入草稿名称（不是脚本名称）"
          value={name}
          onChangeText={setName}
        />
        <View style={styles.buttons}>
          <Button
            title="创建空白草稿"
            disabled={!name.length}
            onPress={() => createDraft(true)}
            containerStyle={styles.button}
          />
          <View style={styles.space} />
          <Button
            title="从现有脚本创建"
            disabled={!name.length}
            onPress={() => createDraft(false)}
            containerStyle={styles.button}
          />
        </View>
      </Overlay>
      <FlatList
        data={data || []}
        keyExtractor={(item) => String(item.id)}
        renderItem={({ item }) => (
          <DraftItem
            draft={item}
            onDelete={() => onDelete(item.id)}
            onPress={() => onPress(item.id)}
          />
        )}
        onRefresh={run}
        refreshing={loading}
      />
    </View>
  );
}