CODEWITHSUNDEEP
react-nativeshadow
木大白易
木大白易

Reputation: 692

Can we set only one side shadow of View in React Native?

As the title saying, how can we set only one side shadow of View in React Native, or hide any side shadow? What I want is showing the only one side shadow, any solutions?

Upvotes: 7

Views: 12388

Answers (3)

Hardy1207
Hardy1207

Reputation: 327

Use this

const style = {
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 2 }, // change this for more shadow
  shadowOpacity: 0.4,
  shadowRadius: 6,
}

For example:

  1. shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View

  2. shadowOffset: { width: 0, height: -10 } shadows place only in top of View

  3. shadowOffset: { width: 10, height: 0 } shadows place only in right of View

  4. shadowOffset: { width: -10, height: 10 } shadows place only in left of View

Upvotes: 14

Maneesh
Maneesh

Reputation: 674

I have implemented it by two ways:

1.Using react-native-linear-gradient Plugin:

<LinearGradient start={{ x: 1, y: 0 }} end={{ x: 1, y: 1 }} colors={['#e4e2e4', '#FFF']} style={{height:8}} ></LinearGradient>

2.Without using Plugin:

<View style={{height:1,backgroundColor:'#e9e8e9'}} ></View>
<View style={{height:1,backgroundColor:'#e4e2e4'}} ></View>
<View style={{height:1,backgroundColor:'#efeeef'}} ></View>
<View style={{height:1,backgroundColor:'#f5f5f5'}} ></View>
<View style={{height:1,backgroundColor:'#fafafa'}} ></View>
<View style={{height:1,backgroundColor:'#fdfdfd'}} ></View>
<View style={{height:1,backgroundColor:'#fefefe'}} ></View>
<View style={{height:1,backgroundColor:'#fff'}} ></View>

Upvotes: 1

Mayank Garg
Mayank Garg

Reputation: 1304

Yes, You can make your shadow of your own view using like this code:

<View style={{borderTopColor:'#ebebeb',borderTopWidth:1,borderBottomWidth:5,borderRightWidth:2,borderLeftWidth:2,borderColor:'#bcbaba',}}>

</View>

This help me pls use this according your use..

Upvotes: 0

Related Questions