Adding a overlaying shadow on an image

user_12060231 0
Viewed 100

I am trying to create a shadow over the bottom part of an image like in the example I have provided. I was thinking about just overlaying a linear gradient and changing the opacity maybe, I am not even sure how accurately this would portray it but I am assuming there is a better way.

To be clear, I do NOT want to create a shadow on the outside of the image, I want it to overlay the image.

enter image description here

Thank you guys for any insight at all!

react-native
3 Answers
user_120602310

Linear Gradient to achieve using expo linear gradient

<View style={{borderBottomLeftRadius: 30, borderBottomRightRadius: 30, overflow: 'hidden', top: 125}}>
      <LinearGradient
        colors={['transparent', 'rgba(0,0,0,0.4)', ]}
        style={{width: 300, height: 100,}}>
      </LinearGradient>
      </View>
user_120602310

Shadow example

import React from "react";
import { View, Image, } from "react-native";

const ShadowExample = (props) => {
  const imageURL = "https://designpress-10674.kxcdn.com/wp-content/uploads/2012/10/funny-horse-pictures/happy-to-see-you.jpg"
  const localStyles = {
    withShadowStyle: {
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "white",
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.50,
      shadowRadius: 4,

      elevation: 3,      
    },     
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <View style={{ ...localStyles.withShadowStyle, padding: 10, }}>
        <Image source={{ uri: imageURL, }} style={{ width: 200, height: 200, }} />
      </View>
    </View>
  )
}

P.S. Check out the React Native shadow generator:

https://ethercreative.github.io/react-native-shadow-generator/

user_1777460
Related