diff --git a/docs/stylesheet.md b/docs/stylesheet.md
index a4b89004619..09b59242713 100644
--- a/docs/stylesheet.md
+++ b/docs/stylesheet.md
@@ -5,14 +5,27 @@ title: StyleSheet
 
 A StyleSheet is an abstraction similar to CSS StyleSheets
 
-Create a new StyleSheet:
+Creates a StyleSheet style reference from the given object:
+
+```SnackPlayer name=Create
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const isActive = true;
+
+export default App = () => (
+  <View style={styles.container}>
+    <Text style={[styles.title, isActive && styles.activeTitle]}>Inside</Text>
+  </View>
+);
 
-```jsx
 const styles = StyleSheet.create({
   container: {
     borderRadius: 4,
-    borderWidth: 0.5,
+    borderWidth: 2,
     borderColor: '#d6d7da',
+    padding: 4,
+    backgroundColor: '#eaeaea'
   },
   title: {
     fontSize: 19,
@@ -24,14 +37,6 @@ const styles = StyleSheet.create({
 });
 ```
 
-Use a StyleSheet:
-
-```jsx
-<View style={styles.container}>
-  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
-</View>
-```
-
 Code quality:
 
 - By moving styles away from the render function, you're making the code easier to understand.
@@ -53,50 +58,39 @@ WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will not
 
 Sets a function to use to pre-process a style property value. This is used internally to process color and transform values. You should not use this unless you really know what you are doing and have exhausted other options.
 
----
-
-### `create()`
-
-```jsx
-static create(obj)
-```
-
-Creates a StyleSheet style reference from the given object.
-
----
-
 ### `flatten`
 
-```jsx
-static flatten(style)
-```
-
 Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by `StyleSheet.register`.
 
 > _NOTE_: Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Refering to style objects directly will deprive you of these optimizations.
 
 Example:
 
-```jsx
-const styles = StyleSheet.create({
-  listItem: {
+```SnackPlayer name=Flatten
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default App = () => (
+  <View>
+    <Text style={styles}>Inside</Text>
+  </View>
+);
+
+const page = StyleSheet.create({
+  container: {
     flex: 1,
-    fontSize: 16,
-    color: 'white',
+    backgroundColor: '#000000',
+    flexDirection: 'column',
   },
-  selectedListItem: {
-    color: 'green',
+  text: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: '#FFFFFF'
   },
-});
-
-StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
-// returns { flex: 1, fontSize: 16, color: 'green' }
-```
 
-Alternative use:
+});
 
-```jsx
-const styles = StyleSheet.create({
+const lists = StyleSheet.create({
   listItem: {
     flex: 1,
     fontSize: 16,
@@ -107,9 +101,8 @@ const styles = StyleSheet.create({
   },
 });
 
-StyleSheet.flatten(styles.listItem);
-// returns { flex: 1, fontSize: 16, color: 'white' }
-// Simply styles.listItem would return its ID (number)
+const styles = StyleSheet.flatten([page.text, lists.selectedListItem]);
+// returns { flex: 1, fontSize: 16, color: 'green' }
 ```
 
 This method internally uses `StyleSheetRegistry.getStyleByID(style)` to resolve style objects represented by IDs. Thus, an array of style objects (instances of `StyleSheet.create()`), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use.
@@ -120,8 +113,44 @@ This method internally uses `StyleSheetRegistry.getStyleByID(style)` to resolve
 
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
-```jsx
-static compose(style1, style2)
+```SnackPlayer name=Compose
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default App = () => (
+  <View style={container}>
+    <Text style={text}>Inside</Text>
+  </View>
+);
+
+const page = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000',
+    flexDirection: 'column',
+  },
+  text: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: '#FFFFFF'
+  },
+});
+
+const lists = StyleSheet.create({
+  listItem: {
+    flex: 1,
+    fontSize: 16,
+    color: 'white',
+    backgroundColor: 'yellow',
+  },
+  selectedListItem: {
+    fontStyle: 'italic',
+    color: 'green',
+  },
+});
+
+const container = StyleSheet.compose(page.container, lists.listItem);
+const text = StyleSheet.compose(page.text, lists.selectedListItem);
 ```
 
 ## Properties
@@ -130,10 +159,19 @@ static compose(style1, style2)
 
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
-```jsx
-const styles = StyleSheet.create({
+```SnackPlayer name=hairlineWidth
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default App = () => (
+  <View>
+    <Text style={space.separator}>Inside</Text>
+  </View>
+);
+
+const space = StyleSheet.create({
   separator: {
-    borderBottomColor: '#bbb',
+    borderBottomColor: 'red',
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
 });
@@ -149,10 +187,56 @@ A line with hairline width may not be visible if your simulator is downscaled.
 
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
-```jsx
-<View style={StyleSheet.absoluteFill}>
-  <SomeOtherView />
-</View>
+```SnackPlayer name=absoluteFill
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default App = () => (
+  <View style={styles.container}>
+    <View style={styles.box1}>
+      <Text style={styles.text}>1</Text>
+    </View>
+    <View style={styles.box2}>
+      <Text style={styles.text}>2</Text>
+    </View>
+    <View style={styles.box3}>
+      <Text style={styles.text}>3</Text>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  box1: {
+    position: 'absolute',
+    top: 40,
+    left: 40,
+    width: 100,
+    height: 100,
+    backgroundColor: 'red'
+  },
+  box2: {
+    ...StyleSheet.absoluteFill,
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue'
+  },
+  box3: {
+    position: 'absolute',
+    top: 120,
+    left: 120,
+    width: 100,
+    height: 100,
+    backgroundColor: 'green'
+  },
+  text: {
+    color: '#FFF',
+    fontSize: 80
+  }
+});
+
 ```
 
 ---
@@ -161,13 +245,56 @@ A very common pattern is to create overlays with position absolute and zero posi
 
 Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be used to create a customized entry in a `StyleSheet`, e.g.:
 
-```jsx
+```SnackPlayer name=absoluteFillObject
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default App = () => (
+  <View style={styles.container}>
+    <View style={styles.box1}>
+      <Text style={styles.text}>1</Text>
+    </View>
+    <View style={styles.box2}>
+      <Text style={styles.text}>2</Text>
+    </View>
+    <View style={styles.box3}>
+      <Text style={styles.text}>3</Text>
+    </View>
+  </View>
+);
+
 const styles = StyleSheet.create({
-  wrapper: {
+  container: {
+    flex: 1
+  },
+  box1: {
+    position: 'absolute',
+    top: 40,
+    left: 40,
+    width: 100,
+    height: 100,
+    backgroundColor: 'red'
+  },
+  box2: {
+    ...StyleSheet.absoluteFill,
+    top: 120,
+    left: 50,
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue'
+  },
+  box3: {
     ...StyleSheet.absoluteFillObject,
-    top: 10,
-    backgroundColor: 'transparent',
+    top: 120,
+    left: 120,
+    width: 100,
+    height: 100,
+    backgroundColor: 'green'
   },
+  text: {
+    color: '#FFF',
+    fontSize: 80
+  }
 });
 ```
 
@@ -175,4 +302,4 @@ const styles = StyleSheet.create({
 
 ### `absoluteFill` vs. `absoluteFillObject`
 
-Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject` as you can see in the [source code](https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L255)
+Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject`.
