Add documentation for Atomic Types

Author: Raphael Freitas

README.md

@@ -19,8 +19,8 @@ Join the [#react-native-render](https://draftjs.slack.com/messages/react_native_
 ## Documentation
 
 * [Get Started](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/GetStarted.md)
-* [Custom Styles](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/CustomStyles.md)
-* Atomic Types (to do).
+* [Add Custom Styles](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/CustomStyles.md)
+* [Handle Atomic Types](https://github.com/globocom/react-native-draftjs-render/blob/master/docs/AtomicTypes.md)
 
 ## Getting Started
 Install **React Native Draft.js Render** on your React Native project, using NPM or Yarn:

docs/AtomicTypes.md

@@ -0,0 +1,47 @@
+# Atomic Types
+
+RNDraftJSRender makes it easy to handle atomic elements with a `atomicHandler` function. Take a look at this example:
+
+Let's say that we have a atomic of type `image` inside our `contentState.blocks`.
+
+```json
+{
+  "blocks": [
+    {
+      "key": "3tvln",
+      "type": "atomic",
+      "data": {
+        "type": "image",
+        "uri": "https://lorempixel.com/400/200/"
+      }
+    }
+  ]
+}
+```
+
+You can render this atomic passing a callback called `atomicHandler` to RNDraftJSRender.
+
+```js
+const atomicHandler = (item: Object, entityMap: Object): ?React$Element<*> => {
+  switch (item.data.type) {
+    case 'image':
+      return (
+        <View key={item.key} style={{ flex: 1 }}>
+          <Image
+            style={{ width: 288, height: 161 }}
+            source={{ uri: item.data.uri }}
+          />
+        </View>
+      );
+    default:
+      return null;
+  }
+};
+
+const props = {
+  contentState,
+  atomicHandler,
+};
+
+const blocks = getRNDraftJSBlocks(props);
+```