How to manage dynamic fill with React Native SVG - react-native

Question

I have some SVGs in my React native .66.1 app, and I've set up react-native-svg and react-native-svg-transformer and have set it up correctly. I can import my SVGs as components, and it all works as expected.
However, I don't know how to dynamically set the fill based on an expression in my app. For instance, I can set the gradient in my SVG, but I can't override the color on the state change.
How do you set it up to track a value, or how to override it?
My SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="12.99" y1="0" x2="12.99" y2="25.92" id="gradient" gradientTransform="matrix(0.707053, -0.707161, 1.001161, 1.001008, -9.106794, 9.237734)">
<stop offset="0" style="stop-color: rgb(161, 70, 183);"/>
<stop offset="1" style="stop-color: rgb(0, 38, 94);"/>
</linearGradient>
</defs>
<path d="M13.91.38a1.3 1.3 0 0 0-1.84 0L.33 12.14c-.4.4-.35.73-.29.89.06.16.25.44.8.44h1.32v10.45a2 2 0 0 0 1.92 2h5.95v-7.08h5.76v7.08h6.1c1.03 0 1.9-.93 1.9-2V13.47h1.36c.54 0 .73-.28.79-.44.06-.16.1-.5-.28-.9L13.9.39Z" fill-rule="evenodd" />
</svg>
My Drawer Screen:
<Drawer.Screen name="Home" options={{ drawerIcon: ({color, size, focused}) => <HomeIcon style={{maxWidth: 28}} fill={focused ? colors.primary.purpleMain : darkMode ? 'white' : 'black'} />}} component={Home} />
What I want:
I want the icon to be the gradient on focused, and either black or white depending on darkMode. Any ideas? I've tried setting the fill in App.tsx, but it doesn't track. This is what I tried: 'url(#gradient)' (gradient is the id of the linearGradient in my svg).
My perfect situation would be not to have to embed the linearGradient in every SVG, but to 'set' it to each solid SVG (just a 135deg purple gradient).
It's worth noting my dynamic color works if I just use regular colors and I omit the fill property inside my SVG. Also - if I use 'currentColor' inside my SVG, the color just remains blue, but I don't even see anywhere that the color blue is called.

Answer 1

i would suggest you to create font (ie: .ttf) format for your icons using https://icomoon.io/, after that replace Icon from GradientIcon adng home page respectively,
Here i am using react-native-vector-icons for icons
working example: Snack Expo
GradientIcon.tsx
import React, { FC } from 'react';
import {
View,
StyleSheet,
StyleProp,
ViewStyle,
ViewProps,
} from 'react-native';
import IonIcon, { IconProps } from 'react-native-vector-icons/Ionicons';
// in bare react native use. react-native-linear-gradient
import { LinearGradient } from 'expo-linear-gradient';
import MaskedView, {
MaskedViewProps,
} from '#react-native-community/masked-view';
/**
* GradientIonIconProps
*/
type GradientIonIconProps = IconProps & {
colors?: string[];
containerStyle?: StyleProp<ViewStyle>;
start?: {
x: number;
y: number;
};
end?: {
x: number;
y: number;
};
};
/**
* GradientIonIcon
*/
const GradientIonIcon: FC<GradientIonIconProps> = (props) => {
const {
children,
containerStyle,
start = { x: 0, y: 0 },
end = { x: 1, y: 0 },
colors = ['#3D7BF7', '#26CCFF'],
...rest
} = props;
return (
<MaskedView
style={containerStyle}
maskElement={
<IonIcon {...rest} style={{ color: '#fff' }} color="#fff" />
}>
<LinearGradient {...{ colors, start, end }}>
<IonIcon {...rest} color="transparent" />
</LinearGradient>
</MaskedView>
);
};
export default GradientIonIcon;
create home icon container which updates only when size ans focused props changes
IconContainer
const HomeIconContainer: React.FC<{ size: number; focused: boolean }> =
React.memo(
({ size, focused }) => {
console.log(focused);
const Icon = React.useMemo(
() => (focused ? GradientIonIcon : IonIcon),
[focused]
);
return (
<Icon
containerStyle={{ width: size, height: size }}
size={size}
name="ios-home"
color="purple"
/>
);
},
(prev, next) => prev.size === next.size && prev.focused === next.focused
);
then use this icon in your navigation options
DraerNAvigator
<Drawer.Screen
name="Home"
options={{
drawerIcon: ({ size, focused }) => (
<HomeIconContainer {...{ size, focused }} />
),
}}
component={Home}
/>
#Result
focused
unfocused