Animating icon fill with react-native-reanimated v2

## 💬 Question

Hello. I'm using RN UI Kitten and react-native-reanimated v2 to try to create a nav bar similar to the SliverAppBar component in Flutter.

From the type signatures I can gather that UI Kitten Icons can accept a type parameter, however this doesn't seem to be working as I would expect. Out of the box, the `Animated.createAnimatedComponent` method will create an Icon that does not accept other SVG props e.g. fill, as it is not itself part of the `IconProps` type signature:

```typescript
import { Icon } from '@ui-kitten/components';
import Animated from 'react-native-reanimated';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);
```

Passing SvgProps as a type parameter will return the following error: "value of type `typeof Icon` is not callable"

```typescript
import { SvgProps } from 'react-native-svg';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);

```

What would the right way of going about this be? How would you get the fill animation to work?

EDIT: this works, but the icon still doesn't animate its fill properly when you pass animatedProps to it. Instead it'll get stuck at the starting value of the range:

```typescript

const AnimatedIcon = Animated.createAnimatedComponent>(Icon);

...

const animatedAccessoryColor = useDerivedValue(() => {
return interpolateColor(scrollY.value,
[0, COVER_IMAGE_HEIGHT],
[theme['text-control-color'], theme['text-basic-color']]
})

const animatedAccessoryProps = useAnimatedProps(() => {
fill: animatedAccessoryColor.value,
})

...

const animatedBackIcon = useCallback>>(
props =>
, [])

```

## UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.1.0 |
| @ui-kitten/components | 5.1.0 |
| react-native-reanimated | 2.1.0 |