How to change background color of react native button

Question

I am trying to change the background color of my button but nothing seems to work, I tried the raised property, maybe i am using it incorrectly. Do any of you have any ideas?

 import React from 'react';
 import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';

export default class App extends React.Component {
state={
  name: "Mamadou"
};

myPress = () => {
  this.setState({
    name: "Coulibaly"
  });
};

  render() {
    return (
      <View style={styles.container}>

          <Button       
          title={this.state.name}
          color="red"
          onPress={this.myPress}
        />   

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

});

You should accept an answer to someone you feel answered your question the best. — Dannon
– Dannon, Commented Nov 3, 2017 at 3:36
@Dan, as of right now, no one has provided an answer that works. — arnoldbird
– arnoldbird, Commented May 15, 2018 at 13:05

Anup Gupta · Accepted Answer · 2018-12-15 09:10:40Z

62

Use this for adding the background color to the button in iOS:

Styles:

  loginScreenButton:{
    marginRight:40,
    marginLeft:40,
   marginTop:10,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#1E6738',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  loginText:{
      color:'#fff',
      textAlign:'center',
      paddingLeft : 10,
      paddingRight : 10
  }

Button:

<TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('HomeScreen')}
          underlayColor='#fff'>
          <Text style={styles.loginText}>Login</Text>
 </TouchableOpacity>

For Android it simply works with Button color property only:

<Button  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

edited Dec 15, 2018 at 9:10

Anup Gupta

2,0832 gold badges27 silver badges42 bronze badges

answered Oct 12, 2017 at 10:44

Harjot Singh

6,9272 gold badges41 silver badges35 bronze badges

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

1 Comment

Malachi Holden Over a year ago

What part of your answer changed the background color? Do I need to have the same margins as you to make it work?

Paweł BB Drozd · Accepted Answer · 2018-05-15 21:46:38Z

17

I suggest to use React Native Elements package, which allow to insert styles throught buttonStyle property.

styles:

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   button: {
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   }
})

render()

render() {
   return (
      <View style={styles.container}>
          <Button
             buttonStyle={styles.button}
             title="Example"
             onPress={() => {}}/>
      </View>
   )
}

Effect:

Expo Snack: https://snack.expo.io/Bk3zI0u0G

edited May 15, 2018 at 21:46

answered Jan 25, 2018 at 15:16

Paweł BB Drozd

4,9534 gold badges24 silver badges18 bronze badges

2 Comments

AtulParmar Over a year ago

it's not working in ios, can you please check and suggest me.

velkoon Over a year ago

I don't know why it took me 4-8ish hours of intermittent Googling over 2 days for someone to finally tell me how to edit a button. I found buttonStyle, but it seemed nobody bothered to mention you had to use the Button component from the "React Native Elements" package to use buttonStyle. Thank you

Medardas · Accepted Answer · 2017-06-28 10:37:16Z

5

"color" property applies to background only if you're building for android.

Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.

answered Jun 28, 2017 at 10:37

Medardas

3582 gold badges8 silver badges22 bronze badges

3 Comments

Mamadou Coulibaly Over a year ago

How do I actually create a new component, I am new to react native lol.

Medardas Over a year ago

=]] you are literally showing a component in your question: export default class App extends React.Component {} App is a component, and you can import it by adding line like this at the top of any other file: import <whatever> from "/location/to/App/component"

Efe Celik Over a year ago

This is really helpful! Here is a quick tutorial for making custom buttons: blog.logrocket.com/create-style-custom-buttons-react-native

Ali · Accepted Answer · 2023-01-25 01:14:44Z

Maybe Pressable is what you're looking for; it allows you to add style to a pressable component (like a button).Read more here

Sample code:

import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';

export default function Button(props) {
  const { onPress, title = 'Save' } = props;
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

Saeed Kiarsi Zadeh · Accepted Answer · 2021-10-13 21:40:04Z

this answer is little bit late, but can be good for anothers. To solve this problem it is better to use "Text" Component as a Button

fist make a component name it AppButton

function AppButton({children,style,onPress}) {
 return (
   <TouchableOpacity onPress={onPress}>
    <Text
      style={[styles.appButton,style]} >
      {children}
    </Text>
   </TouchableOpacity>
 );
}

export default AppButton;

then Import it in where that you want to use it

import AppButton from './AppButton';

and with this line you can call your custom Button that actually is a Text which you can customize it. remember onPress Event have to calling in TouchableOpacity not Text:

<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

Sourav De · Accepted Answer · 2017-06-28 10:03:26Z

-3

You should use the hex code backgroundColor="#FF0000" instead of color="red". Also please use raised={true} other wise background color is not override.

edited Jun 28, 2017 at 10:03

answered Jun 28, 2017 at 9:24

Sourav De

4934 silver badges16 bronze badges

2 Comments

sameera madushan Over a year ago

This doesn't work for react-native component. It doesn't provide these props.

Alpesh Trivedi Over a year ago

it's worked for me while all other didn't, but there is one correction it doesn't need raised={true}

Collectives™ on Stack Overflow

How to change background color of react native button

6 Answers 6

1 Comment

2 Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related