React-native-vector-icons: Icon Shadow

[jakewtaylor]

Is it possible to have shadows on the icons?

I can't seem to get it to work using just textShadow properties, is it because I'm using android?

[jakewtaylor]

My bad, its a bug with textShadowOffest, you can't have height and width as 0.

[jakewtaylor]

Just had this exact same problem again, almost a year later, found my own GitHub issue with a solution from myself!

[wassgha]

This was very helpful! Thank you haha

[shukla12manish]

How to add shadow to react-vector-icons. Help ?

[jakewtaylor]

@shukla12manish Same as text shadows, something like this _should_ work, but haven't tested:

<Icon name="face" size={20} style={styles.shadow} />

const styles = StyleSheet.create({
    shadow: {
        shadowColor: 'black',
        shadowOpacity: 0.5,
        shadowRadius: 5,
        // iOS
        shadowOffset: {
            width: 0,            // These can't both be 0
            height: 1,           // i.e. the shadow has to be offset in some way
        },
        // Android
        shadowOffset: {
            width: 0,            // Same rules apply from above
            height: 1,           // Can't both be 0
        },
});

[shukla12manish]

I did what you said jakewtaylor but it didn't worked out. Then i have tried the below code and it worked:

style={{
textShadowOffset:{width:5, height:2},
shadowColor:'#000000',
shadowOpacity:0.7
}}

textShadowOffset is working while shadowOffset is not working.

[AlmogRnD]

Did anyone get this to work on Andriod, I have the following and still no luck can use the help

<Icon name='play-circle' size={100} type={"font-awesome"} color={'white'}
                              style={{
                                  position: 'absolute',
                                  top: 5,
                                  left: 5,
                                  elevation: 1,
                                  shadowColor: 'red',
                                  shadowOpacity: 1,
                                  shadowRadius: 5,
                                  shadowOffset: {
                                      width: 5,
                                      height: 2,
                            },
                        }}/>

[wassgha]

Try textShadowOffset instead of shadowOffset as suggested

[AlmogRnD]

Warning: Failed prop type: Invalid props.style key textShadowOffset supplied to View.

[shukla12manish]

style={{
textShadowColor: 'red',
shadowOpacity: 1,
shadowRadius: 5,
textShadowOffset:{width: 5,height: 2}
}} />

this will work

[shukla12manish]

if we use textShadowRadius then it will be implemented in android else there will be no effect. Only shadowOpacity and textShadowOffset can also be used to provide shadow.
Below code will also work

style={{
shadowOpacity: 2,
textShadowRadius: 10,
textShadowOffset:{width: 5,height: 2}
}}

[AlmogRnD]

@shukla12manish I don't know what you're talking about I get the following warning and it does not render the icon have you even tested this? Maybe you're on an older react native version

ExceptionsManager.js:73 Warning: Failed prop type: Invalid props.style key textShadowColor supplied to View.

[shukla12manish]

i have checked it, it's working. And it should not be applied to 'View' it should be applied to icon

[AlmogRnD]

Here is my code, attached to icon as you can see and attached screenshot with the error

// Render grid item
    _renderGridItem(index, rowData, sectionID, rowID, highlightRow) {
        return (
            <View key={index} style={styles.itemContainer}>
                <TouchableHighlight underlayColor={'#ccc'} onPress={() => this._onPressPhoto(rowData)}>
                    <View>
                        <Image
                            onLoadEnd={() => {}}
                            style={{width: Dimensions.get('window').width/3-2, height:Dimensions.get('window').height/4.5-2}}
                            source={{
                                uri: rowData.url.thumbnail,
                                priority: FastImage.priority.normal,
                            }}
                            indicator={ProgressCircle}
                            resizeMode={FastImage.resizeMode.cover}/>
                        {rowData.isVideo &&
                        <Icon name='play-circle' size={100} type={"font-awesome"} color={'white'}
                              style={{
                                  position: 'absolute',
                                  top: 25,
                                  left: 25,
                                  elevation: 1,
                                  shadowOpacity: 2,
                                  textShadowRadius: 10,
                                  textShadowOffset:{width: 5,height: 2}
                        }}/>
                        }
                    </View>
                </TouchableHighlight>
            </View>
        )
    }

[sujitpk-perennial]

@AlmogRnD Yes I also got same warning. Are you able to show the drop shadow ?

[malithjkmt]

I got it working without warnings.

        textAlign: 'center',
        width: 45,
        shadowOpacity: 2,
        textShadowRadius: 4,
        textShadowOffset: { width: 2, height: 2 }

[StevaNNN]

This code belove worked for me:
<Text
style={{
shadowOpacity: 2,
textShadowRadius: 6,
textShadowOffset: { width: 1, height: 3 }
}
<Icon
name="star"
size={24}
color={'yellow'}
/>
</Text>
Just wrapped icon into <Text>