diff --git a/docs/vibration.md b/docs/vibration.md
index ed300e9c547..dfc1f2980c1 100644
--- a/docs/vibration.md
+++ b/docs/vibration.md
@@ -7,6 +7,108 @@ Vibrates the device.
 
 ## Example
 
+<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=Vibration&supportedPlatforms=ios,android
+import React from "react";
+import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
+
+function Separator() {
+  return <View style={Platform.OS === "android" ? styles.separator : null} />;
+}
+
+const App =  () =>  {
+
+  const ONE_SECOND_IN_MS = 1000;
+
+  const PATTERN = [
+    1 * ONE_SECOND_IN_MS,
+    2 * ONE_SECOND_IN_MS,
+    3 * ONE_SECOND_IN_MS
+  ];
+
+  const PATTERN_DESC =
+    Platform.OS === "android"
+      ? "wait 1s, vibrate 2s, wait 3s"
+      : "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={[styles.header, styles.paragraph]}>Vibration API</Text>
+      <View>
+        <Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
+      </View>
+      <Separator />
+      {Platform.OS == "android"
+        ? [
+            <View>
+              <Button
+                title="Vibrate for 10 seconds"
+                onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
+              />
+            </View>,
+            <Separator />
+          ]
+        : null}
+      <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
+      <Button
+        title="Vibrate with pattern"
+        onPress={() => Vibration.vibrate(PATTERN)}
+      />
+      <Separator />
+      <Button
+        title="Vibrate with pattern until cancelled"
+        onPress={() => Vibration.vibrate(PATTERN, true)}
+      />
+      <Separator />
+      <Button
+        title="Stop vibration pattern"
+        onPress={() => Vibration.cancel()}
+        color="#FF0000"
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 44,
+    padding: 8
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  paragraph: {
+    margin: 24,
+    textAlign: "center"
+  },
+  separator: {
+    marginVertical: 8,
+    borderBottomColor: "#737373",
+    borderBottomWidth: StyleSheet.hairlineWidth
+  }
+});
+
+export default App
+```
+
+<block class="classical syntax" />
+
 ```SnackPlayer name=Vibration&supportedPlatforms=ios,android
 import React from "react";
 import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
@@ -93,6 +195,8 @@ const styles = StyleSheet.create({
 });
 ```
 
+<block class="endBlock syntax" />
+
 > Android apps should request the `android.permission.VIBRATE` permission by adding `<uses-permission android:name="android.permission.VIBRATE"/>` to `AndroidManifest.xml`.
 
 > The Vibration API is implemented as a `AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)` call on iOS.