Custom decimal rating bar React native

Hi Guys, In this article, we are going to create a Custom decimal rating bar React native, Nowadays a rating bar is most common in e-commerce application to give rating for products & in react native we have many libraries for rating bar but we have to manage versions of dependencies also if you want to customize these plugins then it’s very hard to do. the better way to create a custom component for the rating bar. so in this article, we are creating a custom rating bar that you can directly copy and use in your code. also, you can select decimal rating using this custom rating bar. so let’s start with an example

1. Create a new project

2. Import the following dependencies

3. Create a custom rating bar component

Create a custom component and call it in the return method. The following component contains logic to display default Star icons and as per selection. I have rendered Stars using the map function and added onPress on it for selection rating and call method onStarClick which update selection star value in React Native hooks using setDefaultRating. As you can see I have used TouchableOpacity with position absolute.

We have use const with React-native hooks instead of class as you can see below

4. Return method

In the return method, I have display CustomRatingBar component along with the selection Textview & button to display selected ratings on the alert box.

5. Source code (App.js)

Check this full source code for CustomRatingBar. just copy the whole source code and then paste it into your javascript file

6. Output:

We are not using other dependencies to create this rating bar, we are just using React native core component and you can see the result. you will ready to use this Custom Decimal rating bar in React Native

React native custom rating bar

Thank you 🙂

Leave a Reply

Your email address will not be published.