README
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:
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
ornpm install react-native-customized-star-rating --save
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