Request: Don't force icon to be image/ Support svg Icon

[Samrose-Ahmed]

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 in BaseToast (or make it agnostic, ie just accept a component as prop instead of 'source').

[nightness]

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

[calintamas]

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!