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.
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… 😀