How to change color of button in React Native? Code Example

Use color props of <Button> component to change the color in React Native. Since it renders the native buttons in Android and iOS apps, so the color property works accordingly.

In Android, it changes the background color of the button. While on iOS, it changes the text color.

Code Example

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

const App = () => (
  <SafeAreaView style={styles.container}>
    <View>
      <Button
        title="Press me"
        color="#ff0000"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
  </SafeAreaView>
);

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

export default App;

Here we are rendering a red color button because we are passing #FF0000 hex code in color props.

Live Demo

Conclusion

To change the color of Button component in React Native, you can use color props. Any valid hex color code can be provided as the value. For Android, it will change the background color while for iOS, it changes the text color.