<NME> HomeComponent.js
<BEF> /**
 * @providesModule HomeComponent
 *
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Linking,
} from 'react-native';

var callDetector = undefined

import CallDetectorManager from 'react-native-call-detection'

export default class HomeComponent extends Component {
  startListenerTapped() {
    callDetector = new CallDetectorManager((event)=>{
      console.log(event)
    })
  }

      {
        title: 'Phone State Permission',
        message: 'This app needs access to your phone state in order to react and/or to adapt to incoming calls.'
      } // a custom permission request message to explain to your user, why you need the permission [recommended] - this is the default one
    )
  }

  callFriendTapped() {
    Linking.openURL('tel:5555555555')
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.startListenerTapped}
          title="Start Listener"
          color="#841584"
        />

        <Button
          onPress={this.callFriendTapped}
          title="Call your friend"
          color="#341584"
        />

        <Button
          onPress={this.stopListenerTapped}
          title="Stop Listener"
          color="#841584"
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
        <ListView

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
  callLogs: {
    textAlign:'center',
    fontSize: 15,
    color: '#333333',
    marginBottom: 5
  }
});

<MSG> Updated example
<DFF> @@ -9,6 +9,7 @@ import {
   View,
   Button,
   Linking,
+  ListView
 } from 'react-native';
 
 var callDetector = undefined
@@ -16,9 +17,20 @@ var callDetector = undefined
 import CallDetectorManager from 'react-native-call-detection'
 
 export default class HomeComponent extends Component {
+  constructor(props) {
+    super(props)
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+
+    this.state = {callStates : [], ds: ds} //call states
+    this.startListenerTapped = this.startListenerTapped.bind(this);
+  }
+
   startListenerTapped() {
     callDetector = new CallDetectorManager((event)=>{
-      console.log(event)
+      var updatedCallStates = this.state.callStates
+      updatedCallStates.push(event)
+      var previousDS = this.state.ds
+      this.setState({ callStates:  updatedCallStates, ds: previousDS.cloneWithRows(updatedCallStates)});
     })
   }
 
@@ -34,35 +46,37 @@ export default class HomeComponent extends Component {
   }
 
   render() {
+    console.log(this.state.callStates)
     return (
       <View style={styles.container}>
         <Button
           onPress={this.startListenerTapped}
           title="Start Listener"
           color="#841584"
+          style = {styles.bottomMargin}
         />
 
         <Button
           onPress={this.callFriendTapped}
           title="Call your friend"
           color="#341584"
+          style = {styles.bottomMargin}
         />
-
         <Button
           onPress={this.stopListenerTapped}
           title="Stop Listener"
           color="#841584"
+          style = {styles.bottomMargin}
         />
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
+
+        <Text style = {styles.text}>
+          Call State Logs
         </Text>
+
+        <ListView
+          dataSource={this.state.ds}
+          renderRow={(rowData) => <Text style = {styles.callLogs}>{rowData}</Text>}
+        />
       </View>
     );
   }
@@ -70,19 +84,25 @@ export default class HomeComponent extends Component {
 
 const styles = StyleSheet.create({
   container: {
+    paddingTop: 40,
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  welcome: {
+  bottomMargin: {
+    marginBottom: 10
+  },
+  text: {
+    marginTop: 30,
+    textAlign:'center',
     fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+    color: '#341584'
   },
-  instructions: {
-    textAlign: 'center',
+  callLogs: {
+    textAlign:'center',
+    fontSize: 15,
     color: '#333333',
-    marginBottom: 5,
-  },
+    marginBottom: 5
+  }
 });

{'commit': 'diff --git a/CallDetectionExample/src/HomeComponent.js b/CallDetectionExample/src/HomeComponent.js\nindex b654346f..32f74c00 100644\n--- a/CallDetectionExample/src/HomeComponent.js\n+++ b/CallDetectionExample/src/HomeComponent.js\n@@ -9,6 +9,7 @@ import {\n   View,\n   Button,\n   Linking,\n+  ListView\n } from \'react-native\';\n \n var callDetector = undefined\n@@ -16,9 +17,20 @@ var callDetector = undefined\n import CallDetectorManager from \'react-native-call-detection\'\n \n export default class HomeComponent extends Component {\n+  constructor(props) {\n+    super(props)\n+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});\n+\n+    this.state = {callStates : [], ds: ds} //call states\n+    this.startListenerTapped = this.startListenerTapped.bind(this);\n+  }\n+\n   startListenerTapped() {\n     callDetector = new CallDetectorManager((event)=>{\n-      console.log(event)\n+      var updatedCallStates = this.state.callStates\n+      updatedCallStates.push(event)\n+      var previousDS = this.state.ds\n+      this.setState({ callStates:  updatedCallStates, ds: previousDS.cloneWithRows(updatedCallStates)});\n     })\n   }\n \n@@ -34,35 +46,37 @@ export default class HomeComponent extends Component {\n   }\n \n   render() {\n+    console.log(this.state.callStates)\n     return (\n       <View style={styles.container}>\n         <Button\n           onPress={this.startListenerTapped}\n           title="Start Listener"\n           color="#841584"\n+          style = {styles.bottomMargin}\n         />\n \n         <Button\n           onPress={this.callFriendTapped}\n           title="Call your friend"\n           color="#341584"\n+          style = {styles.bottomMargin}\n         />\n-\n         <Button\n           onPress={this.stopListenerTapped}\n           title="Stop Listener"\n           color="#841584"\n+          style = {styles.bottomMargin}\n         />\n-        <Text style={styles.welcome}>\n-          Welcome to React Native!\n-        </Text>\n-        <Text style={styles.instructions}>\n-          To get started, edit index.ios.js\n-        </Text>\n-        <Text style={styles.instructions}>\n-          Press Cmd+R to reload,{\'\\n\'}\n-          Cmd+D or shake for dev menu\n+\n+        <Text style = {styles.text}>\n+          Call State Logs\n         </Text>\n+\n+        <ListView\n+          dataSource={this.state.ds}\n+          renderRow={(rowData) => <Text style = {styles.callLogs}>{rowData}</Text>}\n+        />\n       </View>\n     );\n   }\n@@ -70,19 +84,25 @@ export default class HomeComponent extends Component {\n \n const styles = StyleSheet.create({\n   container: {\n+    paddingTop: 40,\n     flex: 1,\n     justifyContent: \'center\',\n     alignItems: \'center\',\n     backgroundColor: \'#F5FCFF\',\n   },\n-  welcome: {\n+  bottomMargin: {\n+    marginBottom: 10\n+  },\n+  text: {\n+    marginTop: 30,\n+    textAlign:\'center\',\n     fontSize: 20,\n-    textAlign: \'center\',\n-    margin: 10,\n+    color: \'#341584\'\n   },\n-  instructions: {\n-    textAlign: \'center\',\n+  callLogs: {\n+    textAlign:\'center\',\n+    fontSize: 15,\n     color: \'#333333\',\n-    marginBottom: 5,\n-  },\n+    marginBottom: 5\n+  }\n });\n', 'commit_subject': 'Updated example', 'repo_name': 'priteshrnandgaonkar/react-native-call-detection', 'committer': {'name': 'Pritesh Nandgaonkar', 'email': '610f9b364ace44b95d550466316be30318823837@gmail.com', 'time_sec': '1502964476', 'tz_offset': '330', 'date': {'seconds': '1502964476'}}, 'commit_tree': '6aa113bea40c82e69737d8a84e0a4c4ebebf1c19', 'commit_message': 'Updated example', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': '@@ -9,6 +9,7 @@ import {\n   View,\n   Button,\n   Linking,\n+  ListView\n } from \'react-native\';\n \n var callDetector = undefined\n@@ -16,9 +17,20 @@ var callDetector = undefined\n import CallDetectorManager from \'react-native-call-detection\'\n \n export default class HomeComponent extends Component {\n+  constructor(props) {\n+    super(props)\n+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});\n+\n+    this.state = {callStates : [], ds: ds} //call states\n+    this.startListenerTapped = this.startListenerTapped.bind(this);\n+  }\n+\n   startListenerTapped() {\n     callDetector = new CallDetectorManager((event)=>{\n-      console.log(event)\n+      var updatedCallStates = this.state.callStates\n+      updatedCallStates.push(event)\n+      var previousDS = this.state.ds\n+      this.setState({ callStates:  updatedCallStates, ds: previousDS.cloneWithRows(updatedCallStates)});\n     })\n   }\n \n@@ -34,35 +46,37 @@ export default class HomeComponent extends Component {\n   }\n \n   render() {\n+    console.log(this.state.callStates)\n     return (\n       <View style={styles.container}>\n         <Button\n           onPress={this.startListenerTapped}\n           title="Start Listener"\n           color="#841584"\n+          style = {styles.bottomMargin}\n         />\n \n         <Button\n           onPress={this.callFriendTapped}\n           title="Call your friend"\n           color="#341584"\n+          style = {styles.bottomMargin}\n         />\n-\n         <Button\n           onPress={this.stopListenerTapped}\n           title="Stop Listener"\n           color="#841584"\n+          style = {styles.bottomMargin}\n         />\n-        <Text style={styles.welcome}>\n-          Welcome to React Native!\n-        </Text>\n-        <Text style={styles.instructions}>\n-          To get started, edit index.ios.js\n-        </Text>\n-        <Text style={styles.instructions}>\n-          Press Cmd+R to reload,{\'\\n\'}\n-          Cmd+D or shake for dev menu\n+\n+        <Text style = {styles.text}>\n+          Call State Logs\n         </Text>\n+\n+        <ListView\n+          dataSource={this.state.ds}\n+          renderRow={(rowData) => <Text style = {styles.callLogs}>{rowData}</Text>}\n+        />\n       </View>\n     );\n   }\n@@ -70,19 +84,25 @@ export default class HomeComponent extends Component {\n \n const styles = StyleSheet.create({\n   container: {\n+    paddingTop: 40,\n     flex: 1,\n     justifyContent: \'center\',\n     alignItems: \'center\',\n     backgroundColor: \'#F5FCFF\',\n   },\n-  welcome: {\n+  bottomMargin: {\n+    marginBottom: 10\n+  },\n+  text: {\n+    marginTop: 30,\n+    textAlign:\'center\',\n     fontSize: 20,\n-    textAlign: \'center\',\n-    margin: 10,\n+    color: \'#341584\'\n   },\n-  instructions: {\n-    textAlign: \'center\',\n+  callLogs: {\n+    textAlign:\'center\',\n+    fontSize: 15,\n     color: \'#333333\',\n-    marginBottom: 5,\n-  },\n+    marginBottom: 5\n+  }\n });\n', 'addition_count': 38, 'deletion_count': 18, 'src_file': 'a/CallDetectionExample/src/HomeComponent.js', 'tgt_file': 'b/CallDetectionExample/src/HomeComponent.js', 'file_extension': '.js', 'before_file': '/**\n * @providesModule HomeComponent\n *\n */\nimport React, { Component } from \'react\';\nimport {\n  StyleSheet,\n  Text,\n  View,\n  Button,\n  Linking,\n} from \'react-native\';\n\nvar callDetector = undefined\n\nimport CallDetectorManager from \'react-native-call-detection\'\n\nexport default class HomeComponent extends Component {\n  startListenerTapped() {\n    callDetector = new CallDetectorManager((event)=>{\n      console.log(event)\n    })\n  }\n\n      {\n        title: \'Phone State Permission\',\n        message: \'This app needs access to your phone state in order to react and/or to adapt to incoming calls.\'\n      } // a custom permission request message to explain to your user, why you need the permission [recommended] - this is the default one\n    )\n  }\n\n  callFriendTapped() {\n    Linking.openURL(\'tel:5555555555\')\n  }\n\n  render() {\n    return (\n      <View style={styles.container}>\n        <Button\n          onPress={this.startListenerTapped}\n          title="Start Listener"\n          color="#841584"\n        />\n\n        <Button\n          onPress={this.callFriendTapped}\n          title="Call your friend"\n          color="#341584"\n        />\n\n        <Button\n          onPress={this.stopListenerTapped}\n          title="Stop Listener"\n          color="#841584"\n        />\n        <Text style={styles.welcome}>\n          Welcome to React Native!\n        </Text>\n        <Text style={styles.instructions}>\n          To get started, edit index.ios.js\n        </Text>\n        <Text style={styles.instructions}>\n          Press Cmd+R to reload,{\'\\n\'}\n          Cmd+D or shake for dev menu\n        </Text>\n      </View>\n    );\n  }\n        <ListView\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    backgroundColor: \'#F5FCFF\',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: \'center\',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: \'center\',\n    color: \'#333333\',\n    marginBottom: 5,\n  },\n});\n  callLogs: {\n    textAlign:\'center\',\n    fontSize: 15,\n    color: \'#333333\',\n    marginBottom: 5\n  }\n});\n', 'message': 'Updated example', 'author_name': 'Pritesh Nandgaonkar', 'lang': 'js'}