Passing SVG icon as value
smallsaucepan opened this issue · comments
Wondering what the expectations around passing an SVG icon as the value are? I can see from #71 and #101 that raster images are supported. However, it doesn't seem to allow for SVG - passing as a React element complains the value isn't a string, and passing using require('some.svg') gives a UIImage size related error.
Could we try to extend the values prop to accept a function that returns an icon? Along the lines of react-navigation tab navigator which lets you do this:
({color, size}) => (
<SettingsIcon fill={color} width={size} height={size} />
)
where SettingsIcon is a react-native-svg <Svg> element.
Pros or cons? Other thoughts? @Andresain123 @Naturalclar
@smallsaucepan I was looking for a way to do this also (but to pass in a custom component). I ended up finding/using react-native-resegmented-control which allows you to pass in anything as the value (including custom component) while maintaining the same iOS 13 segmented look/style.
https://github.com/richardvclam/react-native-resegmented-control
I don't think thats possible on the native component for iOS.
If the component was made with JS it should be able to allow it. But as it is a native component on iOS and a JS one on Android/Web/Windows if we implement this approach it would be inconsistent between the different platforms.
As @jongirard pointed, you can use another alternatives made as a JS component.