React-native-linear-gradient: How to apply a gradient on Icon from react-native-vector-icons?

[lucianomlima]

Is there a way to do this instead of user color style property?

[roots-ai]

Is this solved?

[sibelius]

I don't think so

[barnesheaton]

As a workaround you can use a MaskedViewIOS

export function GradientIcon(props: Props) {
  return (
    <MaskedViewIOS maskElement={<Icon {...props} />}>
        <LinearGradient
          colors={['green', 'blue']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        >
          <Icon {...props} style={{ opacity: 0 }} />
        </LinearGradient>
    </MaskedViewIOS>
  )
}

I don't know if there's an equivalent for android.

[LukePenkava]

Is there any new cross platform solution to this ? Gradient Icons would realy come in handy.

[MateuszRostkowski]

I made it using @react-native-community/masked-view

Added little bonus with icon shadow

import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import LinearGradient from 'react-native-linear-gradient'
import MaskedView from '@react-native-community/masked-view'

const size = 40

export function PowerOff({ ...rest }) {
  return (
    <View style={{ width: size }} {...rest}>
      <MaskedView
        style={{ flex: 1, flexDirection: 'row', height: size }}
        maskElement={
          <View
            style={{
              backgroundColor: 'transparent',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Icon
              name="power"
              size={size}
              color="white"
              style={styles.shadow}
            />
          </View>
        }>
        <LinearGradient
          colors={['#F7C650', 'rgba(247, 198, 80, 0.71)']}
          style={{ flex: 1 }}
        />
      </MaskedView>
    </View>
  )
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: 'black',
    shadowOpacity: 0.5,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 1,
    },
  },
})