jumpValue set value properly, but UI not set jumped value.

[xkguq007]

First of all, Sorry for bad english.

We currently use in react native v64.

I expected that jumpValue equals 0.5, I set & looks like steps to jump. 0.5 should set value 0.5 and looks like half filled star, 1.5 should set value 1.5 and looks like one full filled star and one half filled star.

However, setting and getting value works properly, but UI rendered as not jumped value. For example, If I clicked at 4.2, this value is 4.5, but looks 4.2.

below is part of my code.

import React, {useState} from 'react';
import {View} from 'react-native';
import {Rating, SwipeRatingProps} from 'react-native-ratings';
import styled from 'styled-components/native';
type Props = React.PropsWithChildren<
  {
    stars?: number;
    readonly?: boolean;
    precision?: number;
    size?: number;
    defaultValue?: number;
    getRatingValue?: (rating: number) => void;
  } & SwipeRatingProps
>;
const StyledRating = styled(Rating)``;
const Atom = ({
  stars = 5,
  readonly = false,
  precision = 0.5,
  size = 40,
  defaultValue = 3,
  getRatingValue,
  ...rest
}: Props) => {
  return (
    <View>
      <StyledRating
        type={'custom'}
        ratingCount={stars}
        ratingColor={'#DF3A3F'}
        ratingBackgroundColor={'#E9ECEF'}
        readonly={readonly}
        startingValue={defaultValue}
        fractions={1}
        imageSize={size}
        jumpValue={0.5}
        tintColor={'#fff'}
        {...rest}
      />
    </View>
  );
};
export default Atom;

[ShindoSensei]

I have the same issue, used jumpValue, set it to 0.5 and fractions 1 (Same as the example above) and it doesn't show half stars. Still goes in 0.1 increments

[xkguq007]

any improvements? or answers?

[ShindoSensei]

Could I suggest an alternative? Instead of swiping, tapping an unfilled star once makes it half filled, and then clicking it again fills it fully.

[xkguq007]

Hmm, I should try it first, then I can decide using alternative or other package. thanks any way.

I still open this issue because this is not a proper answer but alternative. so I hope someone uploaded PR or merged or I make PR.

[yawarshah1]

did you guys find any solutions for this, I am also stuck :(

[ravirajw]

See this code: In this, I'm setting startingValue={ratingValue} Initially, ratingValue is 2.5. Then on change in ratings I update ratingValue state. Which re-renders the rating component with proper star fillings.

<Rating ratingCount={5} imageSize={24} onFinishRating={(rating) => { console.log("rating: ", rating); setRatingValue(rating); }} style={{ marginTop: 15, alignSelf: "center", borderColor: "red", borderWidth: 2, }} jumpValue={0.5} fractions={1} startingValue={ratingValue} />

[chourafiDev]

set jumpValue={0.1} and fractions={1}

[brayancode2004]

See this code: In this, I'm setting startingValue={ratingValue} Initially, ratingValue is 2.5. Then on change in ratings I update ratingValue state. Which re-renders the rating component with proper star fillings.

<Rating ratingCount={5} imageSize={24} onFinishRating={(rating) => { console.log("rating: ", rating); setRatingValue(rating); }} style={{ marginTop: 15, alignSelf: "center", borderColor: "red", borderWidth: 2, }} jumpValue={0.5} fractions={1} startingValue={ratingValue} />

This worked for me. Thanks man!