Background rating box

[benstuijts]

The box around cannot be adjusted to an other color... This box always stays white. I want to use the rating element in a black background environment.

<Rating type='custom' ratingColor='orange' ratingBackgroundColor='white' readonly imageSize={24} ratingCount={5} startingValue={2} fractions={2} style={{ paddingVertical: 10, backgroundColor: 'black' }} />

backgroundColor: 'black' will only color the outer most box...

[rodrigoxavier]

I have this problem also. The rating is working but I cannot change the view background. My screen is like the print but I need to change this white background to a transparent.

My code follows:

<Rating
              type="heart"
              ratingCount={5}
              fractions={2}
              startingValue={this.state.affiityValue}
              ratingBackgroundColor='transparent'
              imageSize={30}
              readonly
              style={{ paddingVertical: 10 }}
            />

[rflandezgarces]

I found a solution: go to node_modules/react-native-ratings/src/rating.js, search for "renderRatings()" and change <Image source={source} style={{ width: imageSize, height: imageSize}} />for<Image source={source} style={{ width: imageSize, height: imageSize, tintColor: 'your background color' }} />`. The problem is that the images of stars, hearts, etc, are a white square with the shape. With tintColor you change the color of the image.

[randanunn]

if the tintColor form the image as mentioned above was set to transparent by default then the background color could be controlled by the style of the Rating component

[badarshahzad]

@rflandezgarces I made changes in the react-native-elemetns/src/rating/Rating.js what I did I just simply change the color of rating star. So, does this change effect the library. I mean to say, does it will work smoothly or does it can cause errors. (As I am from Java world and junior and don't much know about node madules). Kindly enlighten me about this does we may change libraries and may custom like this way?

As whatever we import in Jar files in java we cannot modify the existing library which we import so what about this? :+1:

[badarshahzad]

@rflandezgarces thank you dude to give idea of modification in node-modules it working perfectly and i can change the rating star image and color in the node modules file. It didn't bring any error and working perfectly.

[Ramaraju1992]

I found a solution: go to node_modules/react-native-ratings/src/rating.js, search for "renderRatings()" and change <Image source={source} style={{ width: imageSize, height: imageSize}} />for<Image source={source} style={{ width: imageSize, height: imageSize, tintColor: 'your background color' }} />`. The problem is that the images of stars, hearts, etc, are a white square with the shape. With tintColor you change the color of the image.

@rflandezgarces i am using background as image instead Background color... in this case how can i give particular color???

Any suggestion pls!

[irodeanu]

Same issue

[AlexandroMunera]

Same issue

[Craques]

there is a tintColor prop which is not included in the documentation for changing the background color

[AlexandroMunera]

Thank you !

Le sam. 6 avr. 2019 à 21:52, Charles [email protected] a écrit :

there is a tintColor prop which is not included in the documentation for changing the background color

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Monte9/react-native-ratings/issues/26#issuecomment-480532803, or mute the thread https://github.com/notifications/unsubscribe-auth/AGoqNcmw8QaK5juk2sGK-7I4dFaR9ocGks5vePsPgaJpZM4UFTay .

[apps-and-ideas]

I found a solution: go to node_modules/react-native-ratings/src/rating.js, search for "renderRatings()" and change <Image source={source} style={{ width: imageSize, height: imageSize}} />for<Image source={source} style={{ width: imageSize, height: imageSize, tintColor: 'your background color' }} />`. The problem is that the images of stars, hearts, etc, are a white square with the shape. With tintColor you change the color of the image.

doesn't work with tintColor: 'transparent'. I have an image background and would like to have the rating-box's background color to be transparent and empty star's background color to be the default(white) color. Any suggestions?

[apps-and-ideas]

found the perfect workaround, y'all. just install react-native-star-rating. This library gives you much more control over colors but only supports 0.5 increments when it comes to float-ratings. So, if your concern is the styling of the rating-bar, then go with react-native-star-rating but if you are more concerned with float-value ratings or Airbnb-style ratings then stick with react-native-ratings

[chai86]

How do i get 'ratingColor' as i'm swiping it, not look like a big rectangular bar of colour coming across? For example, with the star, the yellowish colour stays within the bounds of the star image (same with the heart). If i use a custom .png, how do i get the rating colour to stay within the bounds of my .png?

[maxakak1998]

I think there is still issue here. When i set it tintColor to Transparent, the star is not shown correctly Here is the snapshot from my app:

[alaminopu]

The issue still exists. Any progress on fixing this? I found out the rating image star.png has a white background.

[Monte9]

Haven't gotten around this fixing this, unfortunately! If anyone has some time to submit a PR, I would very much appreciate it.

[alaminopu]

I will try to find a solution and make a PR. Meanwhile, if anyone looking for alternative solution. Here is my rating component look like. It was designed for read only rating.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, Image } from 'react-native';

export default class Rating extends Component {
  static propTypes = {
    rating: PropTypes.number,
    style: PropTypes.object
  };

  render() {
    let { rating, style } = this.props;
    let stars = [];
    // Loop 5 times
    for (var i = 1; i <= 5; i++) {
      let path = require('../assets/images/selected_star.png');
      if (i > rating) {
        path = require('../assets/images/unselected_star.png');
      }
      stars.push(<Image key={i} style={styles.image} source={path} />);
    }

    return <View style={[styles.container, style ? style : {}]}>{stars}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'transparent',
    flexDirection: 'row'
  },
  image: {
    height: 12,
    width: 12
  }
});

[Reynau]

The rating component works as it does because it renders images (stars, for example) with the external background white, and the interior of the star transparent. Then, to color the stars, they paint from left to right the background. If you want to have an image as the background, this component will not work for you, because once you set the tint on transparent, your star will be transparent too and you will only see the background color of the "progress rating bar", as happened to @maxakak1998 .

If you need a rating component with a background image, you could use sprites to render the progress of the stars, instead of painting the background of a transparent star.

[huseyinekh]

// use instead custom rating box

`import React from "react"; import { View, StyleSheet } from "react-native"; import { Rating } from "react-native-ratings"; import { Colors } from "react-native-paper";

const star = require("../../assets/images/elements/star.png"); const convertToPercent = rating => { const percent = 100 - (100 * parseFloat(rating)) / 5 + "%"; console.log(percent); return percent; };

const MyStarRating = props => {

return ( <View style={styles.ratingContainer}> <View style={{ ...styles.overlay, ...{ width: convertToPercent(4) } }} ></View> <View style={styles.startContainer}> <Rating type={"custom"} ratingImage={star} imageSize={13} readonly={true} ratingBackgroundColor="whitesmoke" style={styles.rating} /> </View> </View> ); };

const styles = StyleSheet.create({ ratingContainer: { width: "100%", overflow: "hidden" }, overlay: { position: "absolute", height: "100%", alignSelf: "flex-end", opacity: 0.6, backgroundColor: "white", zIndex: 1 }, startContainer: { alignSelf: "flex-start", overflow: "hidden", width: "100%" } }); export default MyStarRating; `

[MKOInvest]

use the tintColor prop which is not included in the documentation

[gilad7]

I still can't figure out how the tintColor works. I can change the background to another color like 'black', 'red' or whatever but if I put 'transparent' it does not work, it removes the star and shows something that resembles a progress bar.

Anyone managed to solve it?

[SohaibKtb]

same here, I set the tint color to red, but when I change the rating from 5 to 1, the background color of the stars changes to transparent. for: <AirbnbRating />

[BiplovQss]

here is a tintColor prop which is not included in the documentation for changing the background color

Need transparent. Which is not working.

[BiplovQss]

your

Not a perfect Sol.

[FurrukhJamal]

there is a tintColor prop which is not included in the documentation for changing the background color

thank you, I am fairly new to react native and reac native elements, just wanna know how did you know that there was this prop thats not even mentioned in the docs?

[Craques]

Hello, had the same problem so I went through the source code, was a while ago and have not been doing mobile dev, is it still not in the documentation

[sshivananda]

Is in the docs

[hassamarifdev]

here is a tintColor prop which is not included in the documentation for changing the background color

Need transparent. Which is not working.

for <AirbnbRating /> use selectedColor unSelectedColor for colors you can also use transparent. works for me.