How to Set-Change Button Background Color in React Native Android iOS

How to set custom Hex color code as button background color in react native android iPhone application and create button with Google Material Design Color codes.

Button component can be modified easily in React Native apps. So in this tutorial we would going to create 3 button and each button has its own different background color.

Contents in this project set Button Background Color :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistryView, Button, Alert component in import block.

3. declare a function named as HelloFunction() in class.

4. Add Singe View as parent view in render’s return block and style it using inline css.

5. Add three child View in the Parent View and set each child view margin from top as 15 pixels using style.

6. Add one button in each of child View. So total buttons will be 3. Now set onPress on button.

7. Add color=” Your Hex Color Code Here “ in button to set button background color.

8. Complete Source Code for index.android.js file :

Screenshots :

Button Background Color

Leave a Reply

Your email address will not be published.