diff --git a/docs/systrace.md b/docs/systrace.md
index 9c79d595715..cad816e0af3 100644
--- a/docs/systrace.md
+++ b/docs/systrace.md
@@ -3,6 +3,127 @@ id: systrace
 title: Systrace
 ---
 
+`Systrace` is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
+
+## Example
+
+`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
+
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Systrace%20Function%20Component%20Example
+import React from "react";
+import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+
+const App =  () =>  {
+
+  const enableProfiling = () => {
+    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
+    Systrace.beginEvent('event_label')
+    Systrace.counterEvent('event_label', 10);
+  }
+
+  const stopProfiling = () => {
+    Systrace.endEvent()
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+      <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
+      <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 44,
+    padding: 8
+  },
+   header: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  paragraph: {
+    margin: 24,
+    textAlign: "center"
+  }
+});
+
+export default App
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Systrace%20Class%20Component%20Example
+import React from "react";
+import { Button, Text, View, StyleSheet, Systrace } from "react-native";
+
+export default class App extends React.Component {
+
+  enableProfiling(){
+    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
+    Systrace.beginEvent('event_label')
+    Systrace.counterEvent('event_label', 10);
+  }
+
+  stopProfiling(){
+    Systrace.endEvent()
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
+        <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
+        <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 44,
+    padding: 8
+  },
+   header: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  paragraph: {
+    margin: 24,
+    textAlign: "center"
+  }
+});
+```
+
+<block class="endBlock syntax" />
+
+---
+
 # Reference
 
 ## Methods