/Javascript/React/React native bordered image drop with shadow fix

React native bordered image drop with shadow fix

Image border shadow react native

shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 7,
},
shadowOpacity: 0.43,
shadowRadius: 25,

elevation: 15,

Source: ethercreative.github.io

React native bordered image drop with shadow fix

<View
	style={{
       flexGrow: 1,
       backgroundColor: Colors.white,
       borderTopLeftRadius: 40,
       borderTopRightRadius: 40,
      }}
>
          <View
            style={[
              Theme.center,
              Theme.dropShadow,
              {
                top: -100,
                width: 190,
                height: 190,
                borderRadius: 190 / 2,
                backgroundColor: Colors.white,
              },
            ]}
          >
            <Image
              source={require("../../assets/resto/chef_jude.png")}
              style={[
                {
                  width: 180,
                  height: 180,
                  borderRadius: 180 / 2,
                },
              ]}
            />
          </View>
        </View>

Similar codes

0 vote396 views1 answer
Expo cli vs react native cli
Javascript React
1 vote402 views3 answers
Stripe react js
Javascript React
1 vote413 views1 answer
Functional component how to add to existing array react
Javascript React
0 vote381 views1 answer
Flipper semantic issue react native
Javascript React
32 votes390 views1 answer
Install react router in react app
Javascript React
15 votes451 views3 answers
Create react app and tailwind
Javascript React
0 vote407 views1 answer
React export multiple component from index.js
Javascript React
1 vote379 views2 answers
How to not use relative imports in react js
Javascript React
3 votes377 views1 answer
React data attributes event
Javascript React
0 vote416 views1 answer
Get call log in react native with filter android
Javascript React