Add a basic documentation for custom styles (#14)

Author: raphaelpor

README.md

@@ -40,6 +40,8 @@ const MyApp = () => (
 AppRegistry.registerComponent('MyApp', () => MyApp);
 ```
 
+See our [`sample`](https://github.com/globocom/react-native-draftjs-render/tree/master/sample) folder for more details.
+
 ### Adding custom styles
 RNDraftJSRender comes with default styles, but you can use your own:
 
@@ -74,7 +76,7 @@ const MyApp = () => (
 AppRegistry.registerComponent('MyApp', () => MyApp);
 ```
 
-See our [`sample`](https://github.com/globocom/react-native-draftjs-render/tree/master/sample) folder for more details.
+See more at **[Custom Styles](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/CustomStyles.md)** documentation.
 
 ## Developing
 

docs/CustomStyles.md

@@ -0,0 +1,89 @@
+# Custom Styles
+RNDraftJSRender comes with default styles, but you can use your own with the `customStyles` property:
+
+```js
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+} from 'react-native';
+
+import RNDraftJSRender from 'react-native-draftjs-render';
+import contentState from 'DraftJs/contentState';
+
+const styles = StyleSheet.create({
+  'header-one': {
+    fontSize: 20,
+  },
+  paragraph: {
+    color: 'pink',
+    fontSize: 14,
+  },
+  link: {
+    color: 'blue',
+    fontWeight: 'bold',
+  },
+});
+
+const MyApp = () => (
+  <RNDraftJSRender
+    contentState={contentState}
+    customStyles={styles}
+  />
+);
+
+AppRegistry.registerComponent('MyApp', () => MyApp);
+```
+
+## List of styles available
+
+### Text styles
+
+All the elements (except `'code-block'`) can have inner styles and been customized with:
+
+- `bold`
+
+- `italic`
+
+- `link`
+
+- `underline`
+
+- `strikethrough`
+
+### Elements
+
+Each element have your own style and helper styles to use:
+
+- `blockquote`
+  - `blockquoteContainer`
+  - `blockquoteIconBefore`
+  - `blockquoteIconAfter`
+
+- `'code-block'`
+
+- `'header-one'`
+
+- `'header-two'`
+
+- `'header-three'`
+
+- `'header-four'`
+
+- `'header-five'`
+
+- `'header-six'`
+
+- `'ordered-list-item'`
+  - `orderedListItemContainer`
+  - `orderedListItemNumber`
+
+- `paragraph`
+
+- `'unordered-list-item'`
+  - `unorderedListItemContainer`
+  - `unorderedListItemBullet`
+
+- `unstyled`
+
+- `viewAfterList` (View placed after a list to handle styles at the end of each one)