Nurturing Palpable Magnificence
    Have ideas to improve npm?Join in the discussion! »

    react-native-swipeable-rating
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    react-native-swipeable-rating

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

    Example

    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.

    Install

    npm i react-native-swipeable-rating

    DownloadsWeekly Downloads

    127

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar