React-native-customized-star-rating NPM

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.

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