React-Native-Customized-Star-Rating Component:

• Customized animated star rating in react-native which is compatible for both IOS and Android.

Advantages:

• User can change star view look and feel by changing star image
• User can customize star image animation by modifying the easing animation value
• User can give star count to display how many stars required to render
• Customized star component can accept 2 types of image importing from both local and URL based.

Table of Contents:

1. Prerequisites
2. Installation
3. Props
4. Demo
5. Usage
6. Roadmap
7. Author

Prerequisites:

shell, brew, watchman, npm, react-native-cli - these are the packages which were need to be installed.

Installation:

• installing react-native-customized-star-rating plugin and adding dependeices as below

  npm install react-native-customized-star-rating --save

  or

  yarn add react-native-customized-star-rating

• Adding Dependencies: react-native link react-native-customized-star-rating

Demo:

Props:

| Prop | Type | Description | Required | Default | |---|---|---|---|---| |noOfStars|int| The total number of stars|Yes|NA| |starRowStyle|object| Style required for star row view|Yes|NA| |starSizeStyle|object| Style required for star image view|Yes|NA| |selectedStar|int| Local react state to get selected star id|Yes|NA| |starAnimationScale|int or float | To scale up star image size |Yes|NA| |animationDuration|int| Animation duration time which defines how long animation should play |Yes|NA| |easingType| Easing name | Easing animation type |Yes|NA| |emptyStarImagePath| object | It can accept either local image path or remote image path |Yes|NA| |filledStarImagePath| object | It can accept either local image path or remote image path |Yes|NA| |onClickFunc| callBackfunction() | Define call back function here |Yes|NA|

Usage:

import CustomizedStarRating from 'react-native-customized-star-rating';

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scaleAnimation: new Animated.Value(1),
            filledStar: 0,
        }
    }

    clickStar(j) {
        this.setState({ filledStar: j })
    }

    render() {
        return (
            <CustomizedStarRating
                noOfStars={'4'}
                starRowStyle={styles.starRowStyle}
                starSizeStyle={styles.starSizeStyle}
                selectedStar={this.state.filledStar}
                starAnimationScale={1.15}
                animationDuration={300}
                easingType={Easing.easeInCirc}
                emptyStarImagePath={require('../images/emptyStar.png')}
                filledStarImagePath={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Nautical_star.svg/1200px-Nautical_star.svg.png' }}
                onClickFunc={(i) => this.clickStar(i)}
            />
        );
    }
}

export default ParentComponent

Roadmap:

• View the project roadmap here

Author:

• Mahesh Nandam: Linkedin
• For my blogs: Medium