CODEWITHSUNDEEP
react-nativereact-native-vector-iconsexpo
Hazem Khairy Mohamed
Hazem Khairy Mohamed

Reputation: 63

Icons with gradient colors

Is there any way I can add gradient colors to Icons in react-native / expo?

I want to make icons like those :

Upvotes: 0

Views: 4413

Answers (2)

spaceman
spaceman

Reputation: 11

Here's another example:

import React from 'react';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const GradientIcon = (props) => {
  return (
    <MaskedView maskElement={<MaterialCommunityIcons {...props} />}>
      <LinearGradient
        colors={props.colors}
        start={props.start}
        end={props.end}
        locations={props.locations}>
        <MaterialCommunityIcons
          {...props}
          style={{
            opacity: 0,
          }}
        />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientIcon;

Upvotes: 1

Phantomo
Phantomo

Reputation: 31

Tried this variant using MaskedView and LinearGradient packages https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/198#issuecomment-590821900. I use this snippet with Icon from native-base and this solution works perfectly for me.

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

Upvotes: 3

Related Questions