Rating Bar component is used to give rating or review to a user specific product in star formats. We have seen Star Rating Bar on many applications and even the Google Play Stores uses the Rating bar technique to accept opinions from users in star from. There are 5 Stars presents in Rating bar and user can select between 1 to 5 starts rating to your app or product. React Native currently dose not support Rating Bar component like we have seen in Android app development, but we can create our own Custom Material Style Star Rating Bar component in React Native android iOS App example tutorial. So let’s get started .
Note: I am using two types of images in this tutorial first one is Filled Star image and Second one is Star with Border image, You can see the image below. These images is created by myself in Photoshop and you can download them and use it anywhere for professional and personal use without my permission, Enjoy .
Contents in this project Custom Material Style Star Rating Bar component in React Native iOS Android App:
1. Import StyleSheet, View, Platform, Text, Image and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, Image, TouchableOpacity } from ‘react-native’;
|
2. Create constructor() in your project’s class. We would make 2 States named as Default_Rating and Max_Rating. Default_Rating is the default automatically select value of stars and Max_Rating is 5 which is the maximum starts shows inside rating bar widget. We would also make 2 this variables to hold both star filled and star with border image.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor()
{
super();
this.state = {
Default_Rating: 2,
Max_Rating : 5
}
this.Star = ‘/wp-content/uploads/2018/01/full_star.png’;
this.Star_With_Border = ‘/wp-content/uploads/2018/01/border_star.png’;
}
|
3. Create a function named as UpdateRating(). This function is used to set Default_Rating State value as send key from selected image.
|
1
2
3
4
|
UpdateRating( key )
{
this.setState({ Default_Rating: key });
}
|
4. Create a array named as React_Native_Rating_Bar in render’s block locally. This array is used to print Stars on screen. Now we would use the for loop technique to print Stars on screen. We would dynamically insert starts in array. We are adding TouchableOpacity component in with Image component inside the array. So when user select high number of starts then it filled them automatically by placing the filled star image and when user select lower number star then it will remove the filled starts and shows the border start image instead.
|
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
|
render()
{
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
return(
); }
|
5. Create a Root View in render’s return block. We would make a Child View in root view and call the React_Native_Rating_Bar local array in child view. This would print all the starts dynamically at run time on screen. We would also showing the number of selected stats using State below.
|
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
41
42
43
44
45
46
|
render()
{
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
return(
<View style = { styles.MainContainer }>
<View style = { styles.childView }>
{
React_Native_Rating_Bar
}
</View>
<Text style = { styles.textStyle }>
{ this.state.Default_Rating } / { this.state.Max_Rating }
</Text>
</View>
);
}
|
6. Create 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
26
27
28
29
30
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
childView:
{
justifyContent: ‘center’,
flexDirection: ‘row’,
},
StarImage:
{
width: 40,
height: 40,
resizeMode: ‘cover’
},
textStyle:
{
textAlign: ‘center’,
fontSize: 23,
color: ‘#000’,
marginTop: 15
}
});
|
7. Complete source code for App.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, Image, TouchableOpacity } from ‘react-native’;
export default class Myapp extends Component<{}>
{
constructor()
{
super();
this.state = {
Default_Rating: 2,
Max_Rating : 5
}
this.Star = ‘/wp-content/uploads/2018/01/full_star.png’;
this.Star_With_Border = ‘/wp-content/uploads/2018/01/border_star.png’;
}
UpdateRating( key )
{
this.setState({ Default_Rating: key });
}
render()
{
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
return(
<View style = { styles.MainContainer }>
<View style = { styles.childView }>
{
React_Native_Rating_Bar
}
</View>
<Text style = { styles.textStyle }>
{ this.state.Default_Rating } / { this.state.Max_Rating }
</Text>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
childView:
{
justifyContent: ‘center’,
flexDirection: ‘row’,
},
StarImage:
{
width: 40,
height: 40,
resizeMode: ‘cover’
},
textStyle:
{
textAlign: ‘center’,
fontSize: 23,
color: ‘#000’,
marginTop: 15
}
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Animated Placeholder – Android iOS Example
React Native Set Hint PlaceHolder Align Center Inside TextInput
React Native Count TextInput Inside Text Length Automatically
React Native Apply Easing Animation on View Object Explained Example Tutorial
React Native NetInfo Example to Detect Internet Connection Android iOS
