change button color react native

Question

I want to simply change the color of the button, but i can't. I tried to change directly in the button, and pass a style to it. But neither of them worked. Here's my very simple code.

 export default class Dots extends Component {
  render() {
    return (
      <Image style={styles.container}  source={require('./background3.png')}>
      <Button title='play' style = {{color:'red'}}/>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'transparent',
    resizeMode:'cover',
    justifyContent:'center',
    alignItems:'center',
    width:null,
    height:null
  },

  button:{
  backgroundColor:'#ff5c5c',
  }

});

choster · Accepted Answer · 2018-10-17 10:46:39Z

64

The react Button component renders the native button on each platform it uses. Because of this, it does not respond to the style prop. It has its own set of props.

The correct way to use it would have been

<Button color="#ff5c5c" title="I'm a button!" />

You can see the documentation at https://facebook.github.io/react-native/docs/button.html

Now, say you do want to make super customizable button, for that you'll have to use views and touchable opacity. Something along the lines of this.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

You'll wrap that up in your own button component and use it.

edited Oct 17, 2018 at 10:46

choster

1301 silver badge7 bronze badges

answered Jan 20, 2017 at 1:22

Kevin Velasco

4,9941 gold badge18 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amish Shabani Over a year ago

color='#ff5c5c' change background color in android. How can I change text color and font size?

David Urry Over a year ago

There's a problem here. Android takes the "color=" and makes it the button background color (overriding backgroundColor: in the stylesheet). While, iOS takes the "color=" and makes it the text color and uses the background color appropriately in the style sheet. This makes it very difficult to have a single code set handle all buttons correctly.

Luchian Chivoiu · Accepted Answer · 2019-09-17 14:43:23Z

12

I think it is definitely better to use TouchableOpacity instead of Button tag as Button is creating styling discrepancies in Android and iOS platforms .

You can use the code below and it looks very similar to a button and it acts like one:

 <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

edited Sep 17, 2019 at 14:43

answered Sep 17, 2019 at 13:39

Luchian Chivoiu

3314 silver badges14 bronze badges

1 Comment

carinlynchin Over a year ago

i'm actually doing this but i still am forced to give the Text its own color... even though the TouchableOpacity has its own class with its own color. Is there even a way to inherit? Like if TouchableOpacity has color: purple.. then all text nodes under will also?

Aaron Ebinezer · Accepted Answer · 2019-10-13 05:09:37Z

Yes button does not respond to styles. But alternative solution is that we can use react-native-element component.

First install the packages which is mentioned below

npm install react-native-elements npm i react-native-linear-gradient npm i react-native-vector-icons

And then import the packages to your code

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button ViewComponent={LinearGradient} // Don't forget this!
    linearGradientProps={{
    colors: ['#ffffff','blue', 'grey'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
    }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>

For more info here is the link: https://react-native-elements.github.io/react-native-elements/docs/button.html

Eric Aya · Accepted Answer · 2022-06-21 15:11:53Z

-1

You can make it like this

<Button title="Hello World!" buttonStyle={styles.btnstylehere}/>

 const styles = StyleSheet.create({
 btnstylehere:{
        width: 75,
        height: 75,
        borderRadius: 0,
        backgroundColor: '#000',
        color: '#fff'

    }
})

edited Jun 21, 2022 at 15:11

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Jun 21, 2022 at 14:04

Manuel

11 bronze badge

1 Comment

unshiny99 Over a year ago

This is not working for me. If it works for you, it looks to be not compatible with all versions

Collectives™ on Stack Overflow

change button color react native

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related