Create Simple Dynamic React Native Rating Bar Android iOS Tutorial

Rating bar is very common and most widely used GUI in web and mobile technologies where we want user experience about specific product / term / item. We can create simple rating bar in react native with simple piece of code or without the help of any plugin / library. Through this tutorial, I am going to explain and show you how we can create simple rating bar in react native with complete source from scratch.

Note: In this tutorial, I am using two nice star_border and star_fill icon images. You can download these star_border and star_fill icon images and create a folder( if not exist ) named assets under your react native project directory to access these icon images in your app.

Let’s get started…

Step – 1: Import required components from react , react-native  packages and define constant for max rating.

1
2
3
4
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';
 
const MAX_RATING = 5;

Step – 2: Implement constructor  method.

1
2
3
4
5
constructor()
{
    super();
    this.state = { rating: 2 }
}

Step – 3: Implement changeRating  custom method which will be called every time when user will want to change the rating.

1
2
3
4
changeRating( key )
{
    this.setState({ rating: key });
}

Explanation:

  • changeRating  custom method takes key as parameter which should lies between 1 to MAX_RATING constant, when we click on any star icon then this changeRating  function will be executed with its corresponding key value( started from 1 ) and then we will update the rating state variable with this key value.

Step – 4: Implement render method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
render()
{
    let rating_bar = [];
 
    for( var i = 1; i <= MAX_RATING; i++ )
    {
        rating_bar.push(
            <TouchableOpacity activeOpacity = { 0.8 } key = { i } style = { styles.btn } onPress = { this.changeRating.bind( this, i ) }>
                <Image style = { styles.rating_star_image } source = { ( i <= this.state.rating ) ? ( require( './assets/star_fill.png' ) ) : ( require( './assets/star_border.png' ) ) } />
            </TouchableOpacity>
        );
    }
 
    return(
        <View style = { styles.container }>
            <View style = { styles.rating_bar_holder }>
            {
                rating_bar
            }
            </View>
            <Text style = { styles.text }>{ this.state.rating } / { MAX_RATING }</Text>
        </View>
    );

Explanation:

  • As you can see in the previous step, we are updating the rating state variable and as you know then we update the state then render method is called. So, exactly in our case when user will select any star icon then we will update the rating state variable and the updating in state will call the render method again with updated rating.
  • And as you can see in render method we are comparing the value of i with rating state variable. If user wants to give 3 rating then rating state variable will be updated with value 3 and according to condition if i <= this.state.rating  then we will use the star_fill image otherwise use star_border image.

Step – 5: Implement custom styles for all required components.

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
const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    },
 
    rating_bar_holder:
    {
        flexDirection: 'row',
        justifyContent: 'center'
    },
 
    rating_star_image:
    {
        width: 35,
        height: 35,
        resizeMode: 'cover'
    },
 
    text:
    {
        fontSize: 23,
        color: 'black',
        marginTop: 20,
        textAlign: 'center',
        fontWeight: '500'
    }
});

Complete Source Code:

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
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';
 
const MAX_RATING = 5;
 
export default class App extends Component<{}>
{
    constructor()
    {
        super();
 
        this.state = { rating: 2 }
    }
 
    changeRating( key )
    {
        this.setState({ rating: key });
    }
 
    render()
    {
        let rating_bar = [];
 
        for( var i = 1; i <= MAX_RATING; i++ )
        {
            rating_bar.push(
                <TouchableOpacity activeOpacity = { 0.8 } key = { i } style = { styles.btn } onPress = { this.changeRating.bind( this, i ) }>
                    <Image style = { styles.rating_star_image } source = { ( i <= this.state.rating ) ? ( require( './assets/star_fill.png' ) ) : ( require( './assets/star_border.png' ) ) } />
                </TouchableOpacity>
            );
        }
 
        return(
            <View style = { styles.container }>
                <View style = { styles.rating_bar_holder }>
                {
                    rating_bar
                }
                </View>
                <Text style = { styles.text }>{ this.state.rating } / { MAX_RATING }</Text>
            </View>
        );
    }
}
 
const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    },
 
    rating_bar_holder:
    {
        flexDirection: 'row',
        justifyContent: 'center'
    },
 
    rating_star_image:
    {
        width: 35,
        height: 35,
        resizeMode: 'cover'
    },
 
    text:
    {
        fontSize: 23,
        color: 'black',
        marginTop: 20,
        textAlign: 'center',
        fontWeight: '500'
    }
});

Step – 6: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshot:

  • Android Screenshot:

Enjoy Guys… 😀

Leave a Reply

Your email address will not be published. Required fields are marked *