CODEWITHSUNDEEP
javascriptreactjsreact-native
John
John

Reputation: 103

How i can remove react-native button shadow?

I am trying to figure out React Native. When I created button I see unexpected bottom shadow. How can i prevented? (Gray color)

enter image description here

Code:

<Button 
    title="LOGIN"
    color='#f2a743'
/>

Upvotes: 10

Views: 14560

Answers (5)

Azhar
Azhar

Reputation: 75

The following code will remove button shadow

style = {{ elevation: 0 }}

Upvotes: 4

Ansal Ali
Ansal Ali

Reputation: 1613

I don't think thats possible. If you don't need a button elevation (shadow), you may create your own react-native button using using Touchables(TochableOpacity, TochableHighlight, TouchableWithoutFeedback). And it's not a big deal.

Please refer to the docs.

renderButton = () => { 
  return ( 
    <TouchableOpacity onPress={this._onPressButton}> 
      <ImageBackground style={styles.button} source={require('./myButton.png')} >
      <Text>Press me</Text>
      </ImageBackground>
    </TouchableOpacity>
  );
}

Upvotes: 6

arash peymanfar
arash peymanfar

Reputation: 63

you can't use style="box-shadow: 0px 0px 0p;" at all there is multi way to approach this i personal use elevation: 0

if you use router-flux for navigation pls consider that icons appear with shadow just on android but no shadow exist for ios version by default

Upvotes: 1

Batmanbury
Batmanbury

Reputation: 349

I successfully removed the shadow with elevation: 0 in the button's style.

Upvotes: 15

DS87
DS87

Reputation: 602

Whats about using css to remove the shadow?

style="box-shadow: 0px 0px 0p;"

Upvotes: 1

Related Questions