REACT NATIVE DYNAMIC STAR RATING

 renderRatings(rating){

    let stars = [];

    // Loop 5 times

    for (var i = 1; i <= 5; i++) {

      // Set the path to filled stars

      let path = <Icon name="star" style={{fontSize: 10, color: '#eb9534',marginHorizontal:2}}/>;

      // If ratings is lower, set the path to unfilled stars

      if (i > rating) {

        path = <Icon name="star" style={{fontSize: 10, color: theme.LIGHT_GREY_COLOR, marginHorizontal:2}}/>;

      }

      // Push the Image tag in the stars array

      stars.push(path);

    }

    return (

      <View style={{flexDirection:"row",marginTop: 5,}}>   

        {stars}

      </View>

    )

  }  

  render() {

    const {rating} = this.props

    return (  <View>

                  { rating && this.renderRatings(rating) } 

                </View>);

  }