search

f0rr0 / react-native-rating

🌟 cross-platform rating for react-native built with Animated and native driver 🌟
MIT License
91 stars 17 forks source link

Feature: support for passing element instead of images. #8

Open ritz078 opened 7 years ago

f0rr0 commented 7 years ago

Any particular use case? @ritz078

ritz078 commented 7 years ago

I want to use react-native-vector-icon instead of images. So I will need to pass the element.

mxstbr commented 6 years ago

I also need this so I can change the tintColor of the image I'm passing. I'd prefer it to be a component though, rather than an element, that leaves one with even more flexibility:

const star = require('./my-star.png');

<Rating
  selectedStar={() => <Image source={star} style={{ tintColor: 'yellow' }} />}
  unselectedStar={() => <Image source={star} style={{ tintColor: 'black' }} />}
/>
f0rr0 commented 6 years ago

@ritz078 @mxstbr how do you propose to handle the sizing of the supplied component? Currently, the rating component accepts a starStyle prop which handles the styling. To accommodate the supplied image component, the parent view needs to be of similar dimensions.

jeffraux commented 6 years ago

Hi, I created a pull request for this here: PR, I simply allow the props to either be an image or an element.

Sample usage:

import Icon from 'react-native-vector-icons/FontAwesome';

<Rating
  ...
  selectedStar={<Icon name="star" size={iconSize ? iconSize : 25} color="#EFB881" />}
  unselectedStar={<Icon name="star" size={iconSize ? iconSize : 25} color="#C9C9C9" />}
/>
f0rr0 commented 5 years ago

@jeffraux apologies for not seeing this earlier, I will get back to you on the PR by the end of this week. Currently on vacay. Thank you for taking this up