CODEWITHSUNDEEP
javascriptreactjsbuttonreact-native
Mamadou Coulibaly
Mamadou Coulibaly

Reputation: 511

How to change background color of react native button

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',
  },

});

Upvotes: 41

Views: 122896

Answers (6)

Ali
Ali

Reputation: 121

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',
  },
});

Upvotes: 1

Saeed Kiarsi Zadeh
Saeed Kiarsi Zadeh

Reputation: 87

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>

Upvotes: 0

Harjot Singh
Harjot Singh

Reputation: 6927

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>

enter image description here

For Android it simply works with Button color property only:

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

Upvotes: 62

Paweł BB Drozd
Paweł BB Drozd

Reputation: 4913

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: Effect button

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

Upvotes: 17

Medardas
Medardas

Reputation: 540

"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.

Upvotes: 5

Sourav De
Sourav De

Reputation: 493

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

Upvotes: -3

Related Questions