<!-- Adding the read-only mode and fractions example as it is not added in the comments of Rating Component. -->

### Read-only mode

```js
const { rating } = this.props;

<Rating imageSize={20} readonly startingValue={rating} style={styles.rating} />;
```

### Fractions

```html
<Rating showRating fractions="{1}" startingValue="{3.3}" />
```

![Fractions demo gif](https://cloud.githubusercontent.com/assets/241553/26780040/e8cd1a2c-49f8-11e7-8859-6dd9b4e0a779.gif)

```SnackPlayer name=RNE Rating
import React from 'react';
import { StyleSheet, Text, View, Platform, ScrollView } from 'react-native';
import { Rating, RatingProps } from '@rneui/themed';

type RatingsComponentProps = {};

const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
const ratingCompleted = (rating: number) => {
  console.log('Rating is: ' + rating);
};

const ratingProps = {};
return (
  <View style={styles.container}>
    <ScrollView style={styles.viewContainer}>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: 30,
        }}
      >
        <Rating
          showRating
          imageSize={40}
          onFinishRating={ratingCompleted}
          style={{ paddingVertical: 10 }}
        />
        <Rating
          showRating
          type="star"
          fractions={1}
          startingValue={3.6}
          readonly
          imageSize={40}
          onFinishRating={ratingCompleted}
          style={{ paddingVertical: 10 }}
        />
        <Rating
          type="custom"
          ratingColor="#3498db"
          ratingCount={10}
          imageSize={30}
          onFinishRating={ratingCompleted}
          showRating
          style={{ paddingVertical: 10 }}
        />
        <Rating
          type="heart"
          ratingCount={3}
          fractions={2}
          startingValue={1.57}
          imageSize={40}
          onFinishRating={ratingCompleted}
          showRating
          style={styles.rating}
        />
      </View>
    </ScrollView>
  </View>
);
};

const styles = StyleSheet.create({
container: {
  flex: 1,
},
headingContainer: {
  paddingTop: 50,
},
titleText: {
  fontSize: 25,
  fontWeight: 'bold',
  textAlign: 'center',
  paddingVertical: 5,
  fontFamily: Platform.OS === 'ios' ? 'Menlo-Bold' : '',
  color: '#27ae60',
},
subtitleText: {
  fontSize: 18,
  fontWeight: '400',
  textAlign: 'center',
  fontFamily: Platform.OS === 'ios' ? 'Trebuchet MS' : '',
  color: '#34495e',
},
viewContainer: {
  flex: 1,
},
rating: {
  paddingVertical: 10,
},
});

export default Ratings;
```
