djchie / react-native-star-rating Goto Github PK

Is it possible to set the size of the component? the stars render too small and close to each other, even in a tablet.

i simply run this command npm install react-native-star-rating --save and after that i starts my project and it shows this error.
Error starting packager: TypeError: Invalid Version: undefined

It should be available the option to set the style on individual stars. In my case, I would like to add horizontal margin. Any active contributors open to this? Or I might be able to open a PR.

Shouldn't there be a prop that toggles the component's visibility?

I set star color. I set empty star color. Half star color still has the default look though. Is it possible to fix that? :)

But it's wrong!

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} from 'react-native';

import StarRating from 'react-native-star-rating';

export default class StarRaingDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            starCount: 3.5
        };
    }

    onStarRatingPress(rating) {
        this.setState({
            starCount: rating
        });
    }

    render() {
        return (
            <View>
                <StarRating disabled={false}
                            maxStars={5}
                            rating={this.state.starCount}
                            starColor={'red'}
                            emptyStar={'target-two'}
                            fullStar={'thumbnails'}
                            halfStar={'torso'}
                            iconSet={'Foundation'}
                            selectedStar={(rating) => this.onStarRatingPress(rating)}/>
            </View>
        ); 
    }
}
AppRegistry.registerComponent('BackUp', () => StarRaingDemo);

I've tried numerous different values for starSize, and it doesn't seem to matter what size I specify, they are always the same.

Can you tell me how to make the size change work?

For now we just only use static styles. So I recommend should add the props that we can customize container style

It will be great to give the option to display 1/4 and 3/4 of a star ! Thanks :)

Hi Team,
I am having an issue when I am integrating test automation for the rating bar star selection. the issue is this rating bar not contain accessibility for the star index. So is there any solution to this?
Thank you.

打扰一下,我可以滑动打星星吗?还有现在只能显示半颗星星,但是不能点击出来半颗星星.
Excuse me, can I slide the stars? And now I can show only half a star, but not half a star

I want use my resources icon.

It is posible?

Example: fullStar={require('../../../Resources/star.png')}

Hi
I could not find any license information on the repository. Is there a reason? Can you please add one?

Thanks!

I've forked this package and I've made some modifications.

I am trying to use npm link to use the package with one of my projects. However, I am not managing to make it work.

Has anybody found a way of doing it?

It does work with npm install $PATH. npm link is more convenient.

I want to increase decrease rating by swipe gesture but it did not work.

how can I make halfStarColor rtl

config:

"react-native": "0.47.2"
"react-native-star-rating": "^1.0.8"
Android 7.1.0 real device

my code

<StarRating
  disabled={false}
  maxStars={5}
  rating={this.state.rating}
  selectedStar={rating => this.setState({ rating })}
  starStyle={{paddingHorizontal: 6}}
  starSize={50}
  starColor={colors.active}
  emptyStarColor={colors.active}
  emptyStar="star-border"
  iconSet="MaterialIcons"
/>

Error stack:

TypeError: Cannot create property 'transform' on number '351'
    at update (index.js:157)
    at StarButton.renderIcon (star-button.js:76)
    at StarButton.render (star-button.js:131)
    at ReactNativeStack-dev.js:1863
    at measureLifeCyclePerf (ReactNativeStack-dev.js:1610)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactNativeStack-dev.js:1862)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactNativeStack-dev.js:1872)
    at ReactCompositeComponentWrapper.performInitialMount (ReactNativeStack-dev.js:1696)
    at ReactCompositeComponentWrapper.mountComponent (ReactNativeStack-dev.js:1655)
    at Object.mountComponent (ReactNativeStack-dev.js:1327)

UPDATE
@djchie If I remove starStyle everything works, so I think the code expects a style structured in a particular way.

Hello, for some reason StarRating.js is not parsing during compile in a standard React projet. Any ideas?
Compiler message:
/node_modules/react-native-star-rating/StarRating.js
Module parse failed: Unexpected token (121:8)
You may need an appropriate loader to handle this file type.
|
| const starButtonElement = (
| <StarButton
| activeOpacity={0.20}
| buttonStyle={buttonStyle}
@ ./node_modules/react-native-star-rating/index.js 2:0-38 4:15-25
@ ./components/Stars.js
@ ./app.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app

i would like to render the stars from right to left , is there any way to do that ?

I have a star view that doesn't expect any rating action, where I only need the star display feature.

Failed to build DependencyGraph: Naming collision detected: /Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/react-native-star-rating/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with /Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js
Error: Naming collision detected: /Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/react-native-star-rating/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with /Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js
    at HasteMap._updateHasteMap (HasteMap.js:132:13)
    at HasteMap.js:103:28
    at tryCallOne (/Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/promise/lib/core.js:37:12)
    at /Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/promise/lib/core.js:123:15
    at flush (/Users/hms-mac/research/react-native/maps/MapViewExample/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:428:9)
    at process._tickCallback (node.js:357:13)

I have React-Native 0.20.0 installed.

The react-native-vector-icons has a method createIconSetFromIcoMoon, which creates an icon sets using an IcoMoon json configuration file.
I would like to propose that the StarRating and StarButton components had an optional prop to receive a IcoMoon configuration json, so that the user is able to use his own icon set if needed.
Below follows an example to illustrate how we could use a prop for loading a custom icon set from a config json:

// star-button.js
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
.
.
.
  iconSetFromProps() {
    const {
      iconSet,
      icoMoonJson
    } = this.props;
    if (icoMoonJson) {
      return createIconSetFromIcoMoon(icoMoonJson);
    } else {
      return iconSets[iconSet];
    }
  }

ReactNative has make lots of changes in 0.28.

The package [email protected] does not satisfy its siblings' peerDependencies requirements!

React: 15.4.2
React Native: 0.41.0
Flow: 0.37.4

Error:

generateIconSetFromCss. Duplicate module provider
current provider. See: node_modules/react-native-star-rating/node_modules/react-native-vector-icons/lib/generate-icon-set-from-css.js:0

Removing @providesModule generateIconSetFromCss gets rid of the error. I believe this is now defunct in any case.

I'm looking to render this component as a static component over another component. When I do this, the parent component loses touch-ability when touches are happening over the stars.

I'm wondering if we can bubble the touch events up when we do not need to use the stars as an input :) Thanks!

When the component is used just to show a rating w/o interactivity it still requires this function to be passed. This doesn't make sense

I used my icon pass as image (require(...)) and i paint with tintColor.
First i try use emptyStartColor/fullStartColor but it does't have effect.
Then i pass tintColor in starStyle object, it is work perfect, but i got warning

Warning: Failed prop type: Invalid props.starStyle key `tintColor` supplied to `StarButton`.

I think probably lib use not current PropsType for Image

how could i change the size of star ?

Can the view update while I'm swiping over it and when releasing the selectedStar gets triggered?

Hello !
Is it possible to set a different color for each star?
Like, the first is red, second orange, third yellow, fourth pale green, fifth green ...
Thank you !

**Star icon not displaying instead blank screen gets displayed".
Example Code as follows:

import React from 'react-native';
var {
AppRegistry,
Component,
View,
} = React;

import StarRating from 'react-native-star-rating';

class CustomStarExample extends Component {

constructor(props) {
super(props);
this.state = {
starCount: 2.5
};
}

onStarRatingPress(rating) {
this.setState({
starCount: rating
});
}

render() {
return (
<StarRating
disabled={false}
emptyStar={'android-star-outline'}
fullStar={'android-star'}
halfStar={'android-star-half'}
iconSet={'Ionicons'}
maxStars={5}
rating={this.state.starCount}
selectedStar={(rating) => this.onStarRatingPress(rating)}
starColor={'yellow'}
/>
);
}
}
AppRegistry.registerComponent('AbcProject', () => CustomStarExample);

When I installed the lib, I had this error in my packager:

Error building DependencyGraph:
 Error: Naming collision detected: /home/cloud/React-native/ReactProject/node_modules/react-native-star-rating/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/polyfills.js collides with /home/cloud/React-native/ReactProject/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/polyfills.js
    at HasteMap._updateHasteMap (HasteMap.js:123:13)
    at HasteMap.js:94:28
    at tryCallOne (/home/cloud/React-native/ReactProject/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /home/cloud/React-native/ReactProject/node_modules/react-native/node_modules/promise/lib/core.js:123:15
    at flush (/home/cloud/React-native/ReactProject/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:419:9)
    at process._tickCallback (node.js:348:13)

I tried to delete the react-native folder in the lib's node_modules but it didn't work.

I'm using rn 0.17.

Kind regards,

No matter how many stars and different icons I try tho draw from the react-native-vector-icons package, I always end up missing one of the middle stars.

Here the bad star is highlighted in the debugger:

This is the code:

			import Stars from 'react-native-stars';
			import Icon from 'react-native-vector-icons/FontAwesome';
				<View style={styles.header}>
                    <View style={{alignItems:'center'}}>
                        <Stars
                            display={3}
                            spacing={8}
                            count={6}
                            backingColor='white'
                            fullStar={<Icon name={'star'} size={30}/>}
                            emptyStar={<Icon name={'star-half-empty'} size={30} />}
                            halfStar={<Icon name={'star-o'} size={30} />}
                        />
                    </View>
                </View>

and this is how it looks like:

Ability to pass custom react component for fullstar or empty star would be great

So I have list view and when I refresh list view it caches rating for the list item.

And just sets new props.

The script is uses state for rendering and doesn't watch for props changes what causes the same rating as before.

It would be amazing to have the posiblitity to set different icons if the if developer wants to do so, at least up to five. Something like this:

import StarRating from 'react-native-star-rating';

class DifferentIcons extends Component {

  constructor(props) {
    super(props);
    this.state = {
      starCount: 5
    };
  }

  onStarRatingPress(rating) {
    this.setState({
      starCount: rating
    });
  }

  render() {
    return (
      <StarRating
        disabled={false}
        maxStars={5}
		starOne={'$'}
		starTwo={'$$'}
		starThree={'$$$'}
		starFour={'$$$$'}
		starFive={'$$$$$'}
        rating={this.state.starCount}
        selectedStar={(rating) => this.onStarRatingPress(rating)}
      />
    );
  }
}

export default DifferentIcons;

@djchie are you planning on keep maintaining this package?

Thanks,

Not compatible with ReactNative 0.25

HI can u update this? It's causing dependency collisions in my project.

I've forked this package and I've made some modifications.

I am trying to use npm link to use the package with one of my projects. However, I am not managing to make it work.

Has anybody found a way of doing it?

react-native-cli: 1.3.0
react-native: 0.41.2

the star icon show ? ? ? ? ,

this is my code

<StarRating
                            disabled={false}
                            emptyStar={'android-star-outline'}
                            fullStar={'android-star'}
                            halfStar={'android-star-half'}
                            iconSet={'Ionicons'}
                            maxStars={3}
                            rating={this.state.starCount}
                            selectedStar={(rating) => this.onStarRatingPress(rating)}
                            starColor={'red'}
                            starSize={18}
                        />

I see in the documentation that it is possible to display a half-star rating (i.e. 3.5/5), however I was wondering if there is a way to rate with half-star, and if so, how do you make this possible?

We've implemented the component and it's working nicely, but we haven't been able to rate with a half-star rating so far. Thank you very much for any help.