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 AppRegistry, View, Button, Alert component in import block.
|
1
|
import { AppRegistry, View, Button, Alert } from ‘react-native’;
|
3. declare a function named as HelloFunction() in class.
|
1
2
3
4
5
|
HelloFunction() {
Alert.alert(‘Hello !!!’)
}
|
4. Add Singe View as parent view in render’s return block and style it using inline css.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={{flex :1, justifyContent: ‘center’, margin: 15 }}>
</View>
);
}
|
5. Add three child View in the Parent View and set each child view margin from top as 15 pixels using style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
render() {
return (
<View style={{flex :1, justifyContent: ‘center’, margin: 15 }}>
<View style={{marginTop: 15}}>
</View>
<View style={{marginTop: 15}}>
</View>
<View style={{marginTop: 15}}>
</View>
</View>
);
}
|
6. Add one button in each of child View. So total buttons will be 3. Now set onPress on button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
render() {
return (
<View style={{flex :1, justifyContent: ‘center’, margin: 15 }}>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 1” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 2” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 3” />
</View>
</View>
);
}
|
7. Add color=” Your Hex Color Code Here “ in button to set button background color.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
render() {
return (
<View style={{flex :1, justifyContent: ‘center’, margin: 15 }}>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 1” color=“#F44336” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 2” color=“#E91E63” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 3” color=“#9C27B0” />
</View>
</View>
);
}
|
8. Complete Source Code for index.android.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import React, { Component } from ‘react’;
import { AppRegistry, View, Button, Alert } from ‘react-native’;
class Myproject extends Component {
HelloFunction() {
Alert.alert(‘Hello !!!’)
}
render() {
return (
<View style={{flex :1, justifyContent: ‘center’, margin: 15 }}>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 1” color=“#F44336” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 2” color=“#E91E63” />
</View>
<View style={{marginTop: 15}}>
<Button onPress={ this.HelloFunction } title=“BUTTON 3” color=“#9C27B0” />
</View>
</View>
);
}
}
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots :
Also Read :
React Native Facebook Login Integration Example Tutorial Explained
React Native Add Show Dollar Rupees Euro Pound Currency Symbols in iOS Android
React Native Change ListView Mode To GridView Dynamically on Button Click
React Native SectionList Component iOS Android Example Tutorial
Use useEffect as componentwillunmount in React Native Hooks Example
