import React from 'react'
import markdown from 'markdown-in-js'
import markdownOptions from '../utils/MarkdownOptions'
import DefaultPage from './DefaultPage'
import { WebPlayer, SnackPlayer } from '../components'
const content = markdown(markdownOptions)`
\`SectionList\`s are like \`FlatList\`s, but they can have section headers to separate groups of rows.
\`SectionList\`s render each item in their input \`sections\` using the \`renderSectionHeader\` and \`renderItem\` prop. Each item in \`sections\` should be an object with a unique id (the key), and an array \`data\` of row data. Each item in \`data\` should also be an object with a unique id. The \`renderSectionHeader\` prop is a function which takes an item from the \`sections\` array and maps it to a React Element. The \`renderItem\` prop, just like for \`FlatList\`, is a function which takes an item from the \`data\` array (for a section) and returns a React Element.
# Homogenous Row Example
If each row is rendered with the same \`renderItem\` function, we call this homogenous rendering.
${<SnackPlayer id="HJDgGWugb" />}
# Heterogenous Row Example
A \`renderItem\` function may be specified as part of the \`sections\` data, one per section, rather than as a \`prop\` of the \`SectionList\`. This lets us render each section differently. Alternately, you could use the item data to determine how to render items differently.
${<SnackPlayer id="BJO0NZ_eW" />}
`
export default props => <DefaultPage {...props}>{content}</DefaultPage>
import markdown from 'markdown-in-js'
import asPost from '../../layouts/post'
import { Code, InlineCode } from '../../components/code'
import Link from '../../components/link'
import P from '../../components/paragraph'
import { Ref, FootNotes, Note } from '../../components/footnotes'
import components from '../../components'
import json from 'highlight.js/lib/languages/json'
import bash from 'highlight.js/lib/languages/bash'
export default asPost({
id: 'canary',
hasCover: true
})(markdown(components)`
At the moment of writing, our ecosystem spans
several major applications that are crucial for the
day-to-day operations of the company.
The list not only
includes [Now CLI](https://zeit.co/download#command-line) and [Now Desktop](https://zeit.co/download) (which,
along with [our site](https://zeit.co), represents the most
important entry points to
our platform), but also projects
like [Hyper](https://hyper.is) and [Next.js](https://github.com/zeit/next.js) - which
eliminate all of the primary
pain points you come across when building something online.
Summa summarum: They're all equally important to us and we
love working on them and pushing all of them into the direction
of a even brighter future with the help of our