React Native Rating Modal Example Tutorial

React Native



React Native Rating Modal Example Tutorial

Hi Guys,

In this blog, I will learn you how to create rating modal in react native. I will install step by step rating modal in react native. We will show react native rating modal and use icons.First i will import switch namespace from yarn add react-native-rating-modal-box, after I will make rating modal using in react native.

Here, I will give you full example for simply display rating modal react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init RatingModalExample

Step 2 - Install Package

In the step,I will install react-native-rating-modal-box package .

yarn add react-native-rating-modal-box

Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from 'react';

import { StyleSheet, Text, View } from 'react-native';

import RatingModal from 'react-native-rating-modal-box';

const App = () => {

const [isOpenRating, setOpenRating] = useState(true);

return (

<View style={styles.container}>




onClose={() => setOpenRating(false)}


ratingConfirm={selectedRating => {

console.log('Selected rating', selectedRating);






const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",


text: {

fontSize: 16


wrapperCustom: {

borderRadius: 8,

padding: 6


logBox: {

padding: 20,

margin: 10,

borderWidth: StyleSheet.hairlineWidth,

borderColor: '#f0f0f0',

backgroundColor: '#f9f9f9'



export default App;

Step 4 - Run project

In the last step run your project using bellow command.

npm start


It will help you...

Recommended Posts