react-native-swipeable-rating

react-native-swipeable-rating

Star rating component with support for swipe and / or touch selection

Usage

react-native-vector-icons package is required, set it up if you haven't already.

install > npm i react-native-swipeable-rating

Basic example

import React, { Component } from 'react';
import { View } from 'react-native';
import SwipeableRating from 'react-native-swipeable-rating';

class MyStarRating extends Component {
  state = {
    rating: 0
  }

  handleRating = (rating) => {
    this.setState({rating});
  }

  render(){
    return(
      <View style={{marginHorizontal: 30}}>
        <SwipeableRating
          rating={this.state.rating}
          size={32}
          gap={4}
          onPress={this.handleRating}
          xOffset={30}
        />
      </View>
    )
  }
}

See the full example app

There are a few different ways the component can be used:

• The above example works with swiping and tapping on individual stars.
• rating={n}, swipeable={false} and no onPress will make it a dumb/static component that displays a rating.
• swipeable={false} with an onPress function will make the individual stars a tappable TouchableOpacity.
• if you use allowHalves you will also need to change minRating to 0.5

Props

Prop name	type	default	Desc	Required?
rating	number		The rating	✅
onPress	function		The function to be called when swiping or tapping
swipeable	boolean	true	Allow/disallow swiping the component to change the rating
xOffset	number	0	The offset from the left of the screen to the start of the component (ignore if swipeable={false})	no but you will almost definitely need to change it!
style	object		Styles the rating container
color	string	'crimson'	Color applied to the default star icon
emptyColor	string	'crimson'	Color applied to the default empty star icon
size	number	24	The size applied to the default icons
gap	number	0	marginRight applied to the default icons
minRating	number	1	The minimum rating to allow
maxRating	number	5	The maximum rating to allow / amount of stars to display
allowHalves	boolean	false	Allow ratings to go up in increments of 0.5 instead of 1
filledIcon	string or function	'star'	The MaterialIcons icon to use for the filled star OR your custom component function (receives size, gap, number args)
halfFilledIcon	string or function	'star-half'	The MaterialIcons icon to use for the half filled star OR your custom component function (receives size, gap, number args)
emptyIcon	string or function	'star-border'	The MaterialIcons icon to use for the empty star OR your custom component function (receives size, gap, number args)

You must make your custom icon components size (+ gap, if you use it) total width, so the correct swipe distances can be calculated.

size, gap, color, emptyColor, n (the icon's rating number (index) beginning at 1) are passed to the custom icon functions for convenience.