Timeline: Props are transferring without a problem. README is updated

Author: kuraydev

README.md

@@ -11,6 +11,8 @@
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
 
 <p align="center">
+  <img alt="React Native Beautiful Timeline"
+        src="assets/Screenshots/example.gif" />
   <img alt="React Native Beautiful Timeline"
         src="assets/Screenshots/example.png" />
 </p>
@@ -43,29 +45,89 @@ npm i react-native-beautiful-timeline
 import Timeline from "react-native-beautiful-timeline";
 ```
 
-## Component1 Usage
+## Basic Usage
+
+### Data Format
+
+The data format MUST like this example.
+
+```json
+[
+  {
+    "date": 1574342522000,
+    "data": [
+      {
+        "title": "React Native Beautiful Timeline",
+        "subtitle": "Sed at justo eros. Phasellus.",
+        "date": 1574342522000
+      },
+      {
+        "title": "React Native",
+        "subtitle": "Sed viverra. Nam sagittis.",
+        "date": 1574342501000
+      }
+    ]
+  },
+  {
+    "date": 1574248261000,
+    "data": [
+      {
+        "title": "Timeline",
+        "subtitle": "Morbi magna orci, consequat in.",
+        "date": 1574248261000
+      }
+    ]
+  },
+  {
+    "date": 1574125621000,
+    "data": [
+      {
+        "title": "Beauty Timeline",
+        "subtitle": "Nulla a eleifend urna. Morbi. Praesent.",
+        "date": 1574125621000
+      }
+    ]
+  }
+]
+```
 
-```jsx
-<Timeline />
+#### Let's take a look a bit closer:
+
+For each day & there would be limitless objects(Cards) for each day something like this example:
+Each card comes from `data` array and each **day** comes from each `object` from main array.
+
+```json
+{
+  "date": 1574342522000,
+  "data": [
+    {
+      "title": "React Native Beautiful Timeline",
+      "subtitle": "Sed at justo eros. Phasellus.",
+      "date": 1574342522000
+    },
+    {
+      "title": "React Native",
+      "subtitle": "Sed viverra. Nam sagittis.",
+      "date": 1574342501000
+    }
+  ]
+}
 ```
 
-# Configuration - Props
+## Basic Usage
 
-WORK IN PROGRESS
+Please take a look at above data formatting. Library itself solves everything for you if the data format is correct.
 
-<!-- | Property |  Type   | Default | Description                                             |
-| -------- | :-----: | :-----: | ------------------------------------------------------- |
-| outline  | boolean |  true   | make the button outline                                 |
-| solid    | boolean |  false  | make the button with a solid background and a shadow    |
-| gradient | boolean |  false  | make the button with a gradient background and a shadow |
-| width    | number  |   150   | change the button's width                               | -->
+```jsx
+<Timeline data={data} />
+```
 
 ## Future Plans
 
 - [x] ~~LICENSE~~
-- [ ] README: Better Example Image
-- [ ] README: GIF Asset
-- [ ] README: Configuration
+- [x] ~~README: Better Example Image~~
+- [x] ~~README: GIF Asset~~
+- [x] ~~README: Data Formatting~~
 - [ ] Write an article about the lib on Medium
 
 ## Author

assets/Screenshots/example.gif

@@ -8,6 +8,7 @@ import {
   StatusBar
 } from "react-native";
 import Timeline from "./lib/src/Timeline";
+import { ModernHeader } from "@freakycoder/react-native-header-view";
 import { ScreenHeight } from "@freakycoder/react-native-helpers";
 
 const dummyData = [
@@ -45,6 +46,27 @@ const dummyData = [
         date: 1574125621000
       }
     ]
+  },
+  {
+    date: 1574125621000,
+    data: [
+      {
+        title: "Timeline Title",
+        subtitle: "Ut viverra. Nunc interdum.",
+        date: 1574125621000
+      }
+    ]
+  },
+  {
+    date: 1574125621000,
+    data: [
+      {
+        title: "In imperdiet.",
+        subtitle:
+          "Etiam at libero eu lacus.Proin pellentesque tempus neque, quis.",
+        date: 1574125621000
+      }
+    ]
   }
 ];
 
@@ -53,7 +75,32 @@ const App = () => {
     <>
       <StatusBar barStyle="dark-content" />
       <SafeAreaView style={{ flex: 1, backgroundColor: "#fdfdfd" }}>
-        <Timeline data={dummyData} />
+        <ModernHeader
+          backgroundColor="#fdfdfd"
+          text="November 2019"
+          rightIconName="dots-vertical"
+          textStyle={{
+            color: "#566184",
+            fontFamily: "Alata-Regular"
+          }}
+          rightIconType="MaterialCommunityIcons"
+          rightIconColor="#984cf8"
+          leftIconName="arrowleft"
+          leftIconType="AntDesign"
+          leftIconColor="#984cf8"
+        />
+        <Timeline
+          data={dummyData}
+          dayFontFamily="Alata-Regular"
+          dateFontFamily="Alata-Regular"
+          titleFontFamily="Alata-Regular"
+          monthFontFamily="Alata-Regular"
+          subtitleFontFamily="Alata-Regular"
+        />
+
+        <View style={{ height: 100, width: 300 }}>
+          <View style={{ height: "10%", width: "10%" }} />
+        </View>
       </SafeAreaView>
     </>
   );