content: import React from 'react'
  import markdown from 'markdown-in-js'
  
  import markdownOptions from '../utils/MarkdownOptions'
  import DefaultPage from './DefaultPage'
  import { WebPlayer } from '../components'
  
  const code = `import React, { Component } from 'react'
  import { AppRegistry, ScrollView, View, StyleSheet } from 'react-native'
  
  class App extends Component {
    render() {
      return (
        <ScrollView style={styles.container}>
          <View style={styles.boxLarge} />
          <ScrollView horizontal>
            <View style={styles.boxSmall} />
            <View style={styles.boxSmall} />
            <View style={styles.boxSmall} />
          </ScrollView>
          <View style={styles.boxLarge} />
          <View style={styles.boxSmall} />
          <View style={styles.boxLarge} />
        </ScrollView>
      )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    boxSmall: {
      width: 200,
      height: 200,
      marginBottom: 10,
      marginRight: 10,
      backgroundColor: 'skyblue',
    },
    boxLarge: {
      width: 300,
      height: 300,
      marginBottom: 10,
      marginRight: 10,
      backgroundColor: 'steelblue',
    },
  })
  
  AppRegistry.registerComponent('App', () => App)
  `
  
  const content = markdown(markdownOptions)`
  \`ScrollView\`s are used for scrollable content. They're well suited for scrolling small quantities of content (< 30 items). They can scroll horizontally or vertically. For large quantities of items, consider using a \`ListView\` for better performance.
  
  ${<WebPlayer code={code} />}
  `
  
  export default props => <DefaultPage {...props}>{content}</DefaultPage>
  