Star Rating Component with support for Swipe and Touch Selection

Star Rating Component with support for Swipe and Touch Selection

react-native-swipeable-rating .Star rating component with support for swipe and / or touch selection

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.

Download Details:

Author: renrizzolo

GitHub: https://github.com/renrizzolo/react-native-swipeable-rating

react-native react

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.

React Navigation 4.0 | Getting Started with React Navigation in React Native

In this tutorial, I'll show you how you can install reactnavigation v4 to your react native project. This is a getting started guide for react navigation 4.0 to use it for navigation in react native.