Closed Samrose-Ahmed closed 2 years ago
This also why the close, success, error, info buttons for the toasts looks horrible on a large display (1080 on a 27" screen), it's a scaled up a image instead of using SVG. If you are looking at the image below on a 1080 27" display then this image looks accurate for that display size...
I use Expo, but find their use of a different component for every different Icon family annoying so if you want you can use this. It's an evil hack without proper type-checking so be warned. ;)
Also see: https://github.com/oblador/react-native-vector-icons
'VectorIcon.tsx'
import React, { useContext } from 'react'
import { Text, ColorValue, TextStyle, StyleProp } from 'react-native'
import {
AntDesign, Entypo, Feather, Ionicons, FontAwesome, FontAwesome5, EvilIcons, Fontisto,
Foundation, MaterialIcons, MaterialCommunityIcons, Octicons, SimpleLineIcons, Zocial
} from '@expo/vector-icons';
export type IconFamilies = 'antdesign' | 'entypo' | 'evilicon' | 'feather' |
'font-awesome' | 'font-awesome-5' | 'fontisto' | 'foundation' | 'ionicon' |
'material' | 'material-community' | 'octicon' | 'simple-line-icon' | 'zocial'
interface Props {
color: ColorValue
size?: number
type: IconFamilies
}
export default ({
color,
size = 26,
type,
...restProps
}: Props) => {
switch (type) {
case 'antdesign': {
//@ts-ignore
return <AntDesign color={color} size={size} {...restProps} />
}
case 'entypo': {
//@ts-ignore
return <Entypo color={color} size={size} {...restProps} />
}
case 'evilicon': {
//@ts-ignore
return <EvilIcons color={color} size={size} {...restProps} />
}
case 'feather': {
//@ts-ignore
return <Feather color={color} size={size} {...restProps} />
}
case 'font-awesome': {
//@ts-ignore
return <FontAwesome color={color} size={size} {...restProps} />
}
case 'font-awesome-5': {
//@ts-ignore
return <FontAwesome5 color={color} size={size} {...restProps} />
}
case 'fontisto': {
//@ts-ignore
return <Fontisto color={color} size={size} {...restProps} />
}
case 'foundation': {
//@ts-ignore
return <Foundation color={color} size={size} {...restProps} />
}
case 'ionicon': {
//@ts-ignore
return <Ionicons color={color} size={size} {...restProps} />
}
case 'material': {
//@ts-ignore
return <MaterialIcons color={color} size={size} {...restProps} />
}
case 'material-community': {
//@ts-ignore
return <MaterialCommunityIcons color={color} size={size} {...restProps} />
}
case 'octicon': {
//@ts-ignore
return <Octicons color={color} size={size} {...restProps} />
}
case 'simple-line-icon': {
//@ts-ignore
return <SimpleLineIcons color={color} size={size} {...restProps} />
}
case 'zocial': {
//@ts-ignore
return <Zocial color={color} size={size} {...restProps} />
}
default: {
return <Text>{'?'}</Text>
}
}
}
Fixed in v2.0.0
. Read the complete changelog.
If you find any issues with the v2 implementation, feel free to reopen this issue. Thanks!
Currently if you want to extend BaseToast and use your own icon, it only accepts 'ImageSource', i.e. assumes Icon is image. But many libraries use svg icons.
Should be able to specify svg to
leadingIcon
/trailingIcon
inBaseToast
(or make it agnostic, ie just accept a component as prop instead of 'source').