Rating not choosing more than 3 stars - React Native Elements - Rating) - react-native

Question

I am using the Rating Element from the react-native-elements component. I noticed I can't choose more/less than 3 stars for my rating and I do not understand why.
Here is my code:
<Modal animationType={"slide"} transparent={false}
visible={this.state.showModal}
onDismiss={() => this.openModal()}
onRequestClose={() => this.openModal()}>
<View style={styles.modal}>
<Text style={styles.modalTitle}>Rating</Text>
<Rating
showRating
type="star"
imageSize={30}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
<View style={styles.btnView}>
<Button
onPress={() => { this.handleFormSubmit() }}
color="#512DA8"
title="Submit"
style={styles.formBtn}
/>
<Button
onPress={() => { this.openModal();
this.resetForm(); }}
color="gray"
title="Cancel"
/>
</View>
</View>
</Modal>
What am I doing wrong?

Answer 1

I recommand to use AirbnbRating instead of Rating because it work for me.
Example code :
import {AirbnbRating } from 'react-native-elements';
<AirbnbRating
count={11}
reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
defaultRating={11}
size={20}
onFinishRating={rating => console.log(rating)}
/>

Answer 2

According to,
https://react-native-training.github.io/react-native-elements/docs/rating.html#ratingcount
you can use the prop ratingCount to set the number of rating images to display.
Try setting this to something other than 3.
Edit
Seems I misunderstood the query, please try setting readonly to false explicitly.

Answer 3

I would ask what do you have in function
onFinishRating={this.ratingCompleted}
I also used this component in my project and updated the state there:
<Rating
showRating
startingValue={4}
onFinishRating={rating => this.setState({ rating: rating })}
/>

Answer 4

Move the rating component in a function that returns the rating:
NOTE: this is a little bit strange, but it worked for me
Change your code like the following:
const RatingView=()=>{
return (
<Rating
showRating
type="star"
imageSize={30}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
)
}
You Modal :
<Modal animationType={"slide"} transparent={false}
visible={this.state.showModal}
onDismiss={() => this.openModal()}
onRequestClose={() => this.openModal()}>
<View style={styles.modal}>
<Text style={styles.modalTitle}>Rating</Text>
<RatingView /> // Here ...
<View style={styles.btnView}>
<Button
onPress={() => { this.handleFormSubmit() }}
color="#512DA8"
title="Submit"
style={styles.formBtn}
/>
<Button
onPress={() => { this.openModal();
this.resetForm(); }}
color="gray"
title="Cancel"
/>
</View>
</View>
</Modal>