Merge pull request #30 from react-native-community/Naturalclar-patch-1

Update README with examples and props reference

Author: Naturalclar

README.md

@@ -88,21 +88,123 @@ yarn start
 yarn android
 ```
 
-## Usage
+# Example
 ```jsx
-import { View } from 'react-native'
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
 import { ProgressBar } from '@react-native-community/progress-bar-android';
 
-
-export const Example = () => {
-	return (
-		<View>
-			<ProgressBar styleAttr="Horizontal" />
-		</View>
-	)
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.example}>
+        <Text>Circle Progress Indicator</Text>
+        <ProgressBar />
+      </View>
+      <View style={styles.example}>
+        <Text>Horizontal Progress Indicator</Text>
+        <ProgressBar styleAttr="Horizontal" />
+      </View>
+      <View style={styles.example}>
+        <Text>Colored Progress Indicator</Text>
+        <ProgressBar styleAttr="Horizontal" color="#2196F3" />
+      </View>
+      <View style={styles.example}>
+        <Text>Fixed Progress Value</Text>
+        <ProgressBar
+          styleAttr="Horizontal"
+          indeterminate={false}
+          progress={0.5}
+        />
+      </View>
+    </View>
+  );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  example: {
+    marginVertical: 24,
+  },
+});
 ```
+
+# Reference 
+
+## Props
+
+Inherits [View Props](https://reactnative.dev/docs/view#props).
+
+### `animating`
+
+Whether to show the ProgressBar (true, the default) or hide it (false).
+
+| Type | Required |
+| ---- | -------- |
+| bool | No       |
+
+---
+
+### `color`
+
+Color of the progress bar.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `indeterminate`
+
+If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a `progress` value.
+
+| Type              | Required |
+| ----------------- | -------- |
+| indeterminateType | No       |
+
+---
+
+### `progress`
+
+The progress value (between 0 and 1).
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `styleAttr`
+
+Style of the ProgressBar. One of:
+
+- Horizontal
+- Normal (default)
+- Small
+- Large
+- Inverse
+- SmallInverse
+- LargeInverse
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No       |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   | Required |
+| ------ | -------- |
+| string | No       |
+
 
 [build-badge]: https://img.shields.io/circleci/project/github/react-native-community/progress-bar-android/master.svg?style=flat-square
 [build]: https://circleci.com/gh/react-native-community/progress-bar-android