1.0.6 • Published 1 year ago

react-native-custom-star-rating v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

React Native Custom Star Rating

This library enables the use of both Swipe and Tap rating features in a single component and is compatible with both Android and iOS platforms.

Features

  • Support Swipe and Tap Gesture rating.
  • You can enable half star Rating.
  • You can update the images for both the filled and unfilled states.

Installation

$ yarn add react-native-custom-star-rating

Or

$ npm install react-native-custom-star-rating

Usage

import Rating from "react-native-custom-star-rating";
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <Rating
         filledImage={require(./yourImage.png)} //@notRequired
         unfilledImage={require(./yourImage.png)} //@notRequired
         onResult={result => {
            console.log('result : ', result);
         }}
      />
    </View>
  );
};

export default App;

Install

npm i react-native-gesture-handler@2.12.1
npm i react-native-reanimated@3.4.2

Props

propdefaulttypedescription
initialRating1numberInitial value for the rating
renderStars5numberFor Render numbers of Stars
starHeight40numberHeight and Width of Stars
onResultfunction(value:number)The "onResult" is a callback function that provides the final rating output.
spaceBetween0numberspaceBetween prop is used for provide space between stars
filledImageFilledStar.pngImageRequireSourceThe "filledImage" property is used to specify your own image for the filled star.
unfilledImageUnFilledStar.pngImageRequireSourceThe "unfilledImage" property is used to specify your own image for the unfilled star.
isHalffalsebooleanThe "isHalf" property is used to enable the functionality of half-star rating.
swipeEnabledtruebooleanThe "swipeEnabled" property is used to enable the Swipe functionality in Rating component.
tapEnabledtruebooleanThe "tapEnabled" property is used to enable the Tap functionality in Rating component.
activeTintColorstringThe "activeTintColor" property is used to specify your own color for the filled starcomponent.
inActiveTintColorstringThe "inActiveTintColor" property is used to specify your own color for the unfilled star.
1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago