How to change background color of react native button

In React Native, changing the button's background color can be achieved by setting the backgroundColor property of the button's style. This can be done using inline styles or a stylesheet. I will now provide a detailed explanation and example code.

Example 1: Using Inline Styles

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

const App = () => {
  return (
    <View style={styles.container}>
      <Button
        title="Click Me"
        onPress={() => console.log('Button pressed')}
        color="#f194ff"  // This sets the text color
        // Directly set the button's background color within this style object
        style={{ backgroundColor: 'blue' }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Example 2: Using StyleSheet

In this method, we define a stylesheet to set the button's style. This approach is clearer and more modular, making it easier to maintain and reuse.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Button
        title="Click Me"
        onPress={() => console.log('Button pressed')}
        color="#f194ff"  // Sets the text color
        style={styles.button}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'green', // Sets the background color
  }
});

export default App;

Notes

• The color property is typically used to set the button's text color.
• On certain platforms, particularly Android, the style property may not affect the Button component. In such cases, you may need to use other components, such as TouchableOpacity or TouchableHighlight, to create more customized buttons.

This allows you to flexibly change the button's background color according to your requirements and design style.