react-native-paper/app.data.js

module.exports = [
  (function() {
  var e = require("/home/circleci/react-native-paper/docs/pages/0.index.js");
  var c = e.__esModule ? e.default : e;
  var m = c.meta || {};
  return {
     title: m.title || "Home",
     path: m.permalink || "index",
     description: m.description,
     type: "custom",
     data: c
  };
}()),{"title":"Getting Started","path":"getting-started","data":"\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\nyarn add react-native-paper\n```\n\nIf you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). If you use CRNA or Expo, you don't need this step.\n\n```sh\nyarn add react-native-vector-icons\nreact-native link react-native-vector-icons\n```\n\n## Usage\n\nWrap your root component in `Provider` from `react-native-paper`. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have a CRNA or Expo project, you can do this inside the exported component in the `App.js` file.\n\nExample:\n\n```js\nimport * as React from 'react';\nimport { AppRegistry } from 'react-native';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nexport default function Main() {\n  return (\n    <PaperProvider>\n      <App />\n    </PaperProvider>\n  );\n}\n\nAppRegistry.registerComponent('main', () => Main);\n```\n\nThe `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.\n\nIf you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:\n\n```js\nimport * as React from 'react';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport { Provider as StoreProvider } from 'redux';\nimport App from './src/App';\nimport store from './store';\n\nexport default function Main() {\n  return (\n    <StoreProvider store={store}>\n      <PaperProvider>\n        <App />\n      </PaperProvider>\n    </StoreProvider>\n  );\n}\n```\n\n## Customization\n\nYou can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.js) to see what customization options are supported.\n\nExample:\n\n```js\nimport * as React from 'react';\nimport { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';\nimport color from 'color';\nimport App from './src/App';\n\nconst theme = {\n  ...DefaultTheme,\n  colors: {\n    ...DefaultTheme.colors,\n    primary: 'tomato',\n    primaryDark: color('tomato').darken(0.2).rgb().string(),\n    accent: 'yellow',\n  },\n};\n\nexport default function Main() {\n  return (\n    <PaperProvider theme={theme}>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n","type":"markdown"},{"title":"Theming","path":"theming","data":"\n## Applying a theme to the whole app\n\nTo support custom themes, paper exports a `Provider` component. You need to wrap your root component with the provider to be able to support themes.\n\n```js\nimport * as React from 'react';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nexport default function Main() {\n  return (\n    <PaperProvider>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n\nIf no prop is specified, this will apply the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.js) to the components. You can also provide a `theme` prop with a theme object with same properties as the default theme:\n\n```js\nimport * as React from 'react';\nimport { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nconst theme = {\n  ...DefaultTheme,\n  roundness: 2,\n  colors: {\n    ...DefaultTheme.colors,\n    primary: '#3498db',\n    accent: '#f1c40f',\n  }\n};\n\nexport default function Main() {\n  return (\n    <PaperProvider theme={theme}>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n\nYou can change the theme prop dynamically and all the components will automatically update to reflect the new theme.\n\n## Applying a theme to a paper component\n\nIf you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `Provider`.\n\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nexport default function ButtonExample() {\n  return (\n    <Button raised theme={{ roundness: 3 }}>\n      Press me\n    </Button>\n  );\n}\n```\n\n## Using the theme in your own components\n\nTo access the theme in your own components, you can use the `withTheme` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop.\n\n```js\nimport * as React from 'react';\nimport { withTheme } from 'react-native-paper';\n\nfunction MyComponent(props) {\n  const { colors } = props.theme;\n  return <Text style={{ color: colors.primary }}>Yo!</Text>;\n}\n\nexport default withTheme(MyComponent);\n```\n\nComponents wrapped with `withTheme` support the theme from the `Provider` as well as from the `theme` prop.\n\n## Gotchas\n\nThe `Provider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `Provider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.\n\nThe `Modal` component from the library already handles this edge case, so you won't need to do anything.\n","type":"markdown"},{"title":"Icons","path":"icons","data":"\n## Configuring icons\n\nMany of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using CRNA or Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.\n\n## Using the `icon` prop\n\nMany components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following type of values:\n\n### 1. An icon name\n\nYou can pass the name of an icon from [`MaterialIcon`](https://material.io/icons/). This will use the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library to display the icon.\n\nExample:\n\n```js\n<Button icon=\"add-a-photo\">\n  Press me\n</Button>\n```\n\n### 2. An image source\n\nYou can pass an image source, such as an object of shape `{ uri: 'https://path.to' }` or a local image: `require('../path/to/image.png')` to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an `Image` element.\n\nRemote image:\n\n```js\n<Button icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}>\n  Press me\n</Button>\n```\n\nLocal image:\n\n```js\n<Button icon={require('../assets/chameleon.jpg')}>\n  Press me\n</Button>\n```\n\n### 3. A React element\n\nYou can pass any react element to be used an icon. The element is used as is without any modification. However, it might get clipped if the provided element's size are bigger than what the component renders. It's upto you to make sure that the size of the element is correct.\n\nExample:\n\n```js\n<Button\n  icon={\n    <Image\n     source={require('../assets/chameleon.jpg')}\n     style={{ width: 16, height: 16, borderRadius: 10 }}\n    />\n  }\n>\n  Press me\n</Button>\n```\n","type":"markdown"},{"type":"separator"},{"title":"Button","description":"A button is component that the user can press to trigger an action.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/button-raised.png\" />\n  <img src=\"screenshots/button-primary.png\" />\n  <img src=\"screenshots/button-custom.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Button raised onPress={() => console.log('Pressed')}>\n    Press me\n  </Button>\n);\n```","path":"button","data":{"description":"A button is component that the user can press to trigger an action.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/button-raised.png\" />\n  <img src=\"screenshots/button-primary.png\" />\n  <img src=\"screenshots/button-custom.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Button raised onPress={() => console.log('Pressed')}>\n    Press me\n  </Button>\n);\n```","displayName":"Button","methods":[{"name":"_handlePressIn","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_handlePressOut","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."},"compact":{"flowType":{"name":"boolean"},"required":false,"description":"Use a compact look, useful for flat buttons in a row."},"raised":{"flowType":{"name":"boolean"},"required":false,"description":"Add elevation to button, as opposed to default flat appearance. Typically used on a flat surface."},"primary":{"flowType":{"name":"boolean"},"required":false,"description":"Use to primary color from theme. Typically used to emphasize an action."},"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Text color of button, a dark button will render light text and vice-versa."},"loading":{"flowType":{"name":"boolean"},"required":false,"description":"Whether to show a loading indicator."},"icon":{"flowType":{"name":"IconSource"},"required":false,"description":"Name of the icon. Can be a string (name of `MaterialIcon`),\nan object of shape `{ uri: 'https://path.to' }`,\na local image: `require('../path/to/image.png')`,\nor a valid React Native component."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom text color for flat button, or background color for raised button."},"children":{"flowType":{"name":"union","raw":"string | Array<string>","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"Array<string>"}]},"required":true,"description":"Label text of the button."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Caption","description":"Typography component for showing a caption.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/caption.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Caption>Caption</Caption>\n);\n```","path":"caption","data":{"description":"Typography component for showing a caption.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/caption.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Caption>Caption</Caption>\n);\n```","methods":[],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"Card","description":"A card is a sheet of material that serves as an entry point to more detailed information.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/card-1.png\" />\n  <img class=\"medium\" src=\"screenshots/card-2.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardContent>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </CardContent>\n    <CardCover source={{ uri: 'https://picsum.photos/700' }} />\n    <CardActions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </CardActions>\n  </Card>\n);\n```","path":"card","data":{"description":"A card is a sheet of material that serves as an entry point to more detailed information.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/card-1.png\" />\n  <img class=\"medium\" src=\"screenshots/card-2.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardContent>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </CardContent>\n    <CardCover source={{ uri: 'https://picsum.photos/700' }} />\n    <CardActions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </CardActions>\n  </Card>\n);\n```","displayName":"Card","methods":[{"name":"_handlePressIn","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_handlePressOut","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"elevation":{"flowType":{"name":"number"},"required":false,"description":"Resting elevation of the card which controls the drop shadow.","defaultValue":{"value":"2","computed":false}},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `Card`."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"CardActions","description":"A component to show a list of actions inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardActions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </CardActions>\n  </Card>\n);\n```","path":"card-actions","data":{"description":"A component to show a list of actions inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardActions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </CardActions>\n  </Card>\n);\n```","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `CardActions`."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"CardContent","description":"A component to show content inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardContent>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </CardContent>\n  </Card>\n);\n```","path":"card-content","data":{"description":"A component to show content inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardContent>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </CardContent>\n  </Card>\n);\n```","methods":[],"props":{"index":{"flowType":{"name":"number"},"required":false,"description":"@internal"},"total":{"flowType":{"name":"number"},"required":false,"description":"@internal"},"siblings":{"flowType":{"name":"Array","elements":[{"name":"string"}],"raw":"Array<string>"},"required":false,"description":"@internal"},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"CardCover","description":"A component to show a cover image inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardCover source={{ uri: 'https://picsum.photos/700' }} />\n  </Card>\n);\n```\n\n@extends Image props https://facebook.github.io/react-native/docs/image.html#props","path":"card-cover","data":{"description":"A component to show a cover image inside a Card.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Card>\n    <CardCover source={{ uri: 'https://picsum.photos/700' }} />\n  </Card>\n);\n```\n\n@extends Image props https://facebook.github.io/react-native/docs/image.html#props","methods":[],"props":{"index":{"flowType":{"name":"number"},"required":false,"description":"@internal"},"total":{"flowType":{"name":"number"},"required":false,"description":"@internal"},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Checkbox","description":"Checkboxes allow the selection of multiple options from a set.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/checkbox-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    checked: false,\n  };\n\n  render() {\n    const { checked } = this.state;\n    return (\n      <Checkbox\n        checked={checked}\n        onPress={() => { this.setState({ checked: !checked }); }}\n      />\n    );\n  }\n}\n```","path":"checkbox","data":{"description":"Checkboxes allow the selection of multiple options from a set.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/checkbox-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/checkbox-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    checked: false,\n  };\n\n  render() {\n    const { checked } = this.state;\n    return (\n      <Checkbox\n        checked={checked}\n        onPress={() => { this.setState({ checked: !checked }); }}\n      />\n    );\n  }\n}\n```","displayName":"Checkbox","methods":[],"props":{"checked":{"flowType":{"name":"boolean"},"required":true,"description":"Whether checkbox is checked."},"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"Whether checkbox is disabled."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom color for checkbox."},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Dialog","description":"Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\n\n <div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/dialog-1.png\" />\n  <img class=\"medium\" src=\"screenshots/dialog-2.png\" />\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _showDialog = () => this.setState({ visble: true });\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    const { visible } = this.state;\n    return (\n      <View>\n        <Button onPress={this._showDialog}>Show Dialog</Button>\n        <Dialog\n           visible={visible}\n           onDismiss={this._hideDialog}\n        >\n          <DialogTitle>Alert</DialogTitle>\n          <DialogContent>\n            <Paragraph>This is simple dialog</Paragraph>\n          </DialogContent>\n          <DialogActions>\n            <Button onPress={this._hideDialog}>Done</Button>\n          </DialogActions>\n        </Dialog>\n      </View>\n    );\n  }\n}\n```","path":"dialog","data":{"description":"Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\n\n <div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/dialog-1.png\" />\n  <img class=\"medium\" src=\"screenshots/dialog-2.png\" />\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _showDialog = () => this.setState({ visble: true });\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    const { visible } = this.state;\n    return (\n      <View>\n        <Button onPress={this._showDialog}>Show Dialog</Button>\n        <Dialog\n           visible={visible}\n           onDismiss={this._hideDialog}\n        >\n          <DialogTitle>Alert</DialogTitle>\n          <DialogContent>\n            <Paragraph>This is simple dialog</Paragraph>\n          </DialogContent>\n          <DialogActions>\n            <Button onPress={this._hideDialog}>Done</Button>\n          </DialogActions>\n        </Dialog>\n      </View>\n    );\n  }\n}\n```","displayName":"Dialog","methods":[],"props":{"dismissable":{"flowType":{"name":"boolean"},"required":false,"description":"Determines whether clicking outside the dialog dismiss it.","defaultValue":{"value":"true","computed":false}},"onDismiss":{"flowType":{"name":"Function"},"required":true,"description":"Callback that is called when the user dismisses the dialog."},"visible":{"flowType":{"name":"boolean"},"required":true,"description":"Determines Whether the dialog is visible.","defaultValue":{"value":"false","computed":false}},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `Dialog`."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"DialogActions","description":"A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogActions>\n          <Button onPress={() => console.log(\"Cancel\"))}>Cancel</Button>\n          <Button onPress={() => console.log(\"Ok\")}>Ok</Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n}\n```","path":"dialog-actions","data":{"description":"A component to show a list of actions in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogActions>\n          <Button onPress={() => console.log(\"Cancel\"))}>Cancel</Button>\n          <Button onPress={() => console.log(\"Ok\")}>Ok</Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n}\n```","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `DialogActions`."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"DialogContent","description":"A component to show content in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogContent>\n          <Paragraph>This is simple dialog</Paragraph>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n}\n```","path":"dialog-content","data":{"description":"A component to show content in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogContent>\n          <Paragraph>This is simple dialog</Paragraph>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n}\n```","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `DialogContent`."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"DialogScrollArea","description":"A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogScrollArea>\n          <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>\n            This is a scrollable area\n          </ScrollView>\n        </DialogScrollArea>\n      </Dialog>\n    );\n  }\n}\n```","path":"dialog-scroll-area","data":{"description":"A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogScrollArea>\n          <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>\n            This is a scrollable area\n          </ScrollView>\n        </DialogScrollArea>\n      </Dialog>\n    );\n  }\n}\n```","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `DialogScrollArea`."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"DialogTitle","description":"A component to show a title in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogTitle>This is a title</DialogTitle>\n        <DialogContent>\n          <Paragraph>This is simple dialog</Paragraph>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n}\n```","path":"dialog-title","data":{"description":"A component to show a title in a Dialog.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _hideDialog = () => this.setState({ visble: false });\n\n  render() {\n    return (\n      <Dialog\n        visible={this.state.visible}\n        onDismiss={this._hideDialog}>\n        <DialogTitle>This is a title</DialogTitle>\n        <DialogContent>\n          <Paragraph>This is simple dialog</Paragraph>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n}\n```","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Title text for the `DialogTitle`."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Divider","description":"A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <View>\n    <Text>Apple</Text>\n    <Divider />\n    <Text>Orange</Text>\n    <Divider />\n  </View>\n);\n```","path":"divider","data":{"description":"A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <View>\n    <Text>Apple</Text>\n    <Divider />\n    <Text>Orange</Text>\n    <Divider />\n  </View>\n);\n```","methods":[],"props":{"inset":{"flowType":{"name":"boolean"},"required":false,"description":"Whether divider has a left inset."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"DrawerItem","description":"DrawerItem is a component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <DrawerItem label=\"First Item\" />\n);\n```","path":"drawer-item","data":{"description":"DrawerItem is a component used to show an action item with an icon and a label in a navigation drawer.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <DrawerItem label=\"First Item\" />\n);\n```","methods":[],"props":{"label":{"flowType":{"name":"string"},"required":true,"description":"The label text of the item."},"icon":{"flowType":{"name":"IconSource"},"required":false,"description":"Name of the icon. Can be a string (name of `MaterialIcon`),\nan object of shape `{ uri: 'https://path.to' }`,\na local image: `require('../path/to/image.png')`,\nor a valid React Native component."},"active":{"flowType":{"name":"boolean"},"required":false,"description":"Whether to highlight the drawer item as active."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom color for the drawer text and icon."},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"DrawerSection","description":"A DrawerSection groups content inside a navigation drawer.\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    active: 'First Item',\n  };\n\n  render() {\n    const { active } = this.state;\n    return (\n      <DrawerSection title=\"Some title\">\n        <DrawerItem\n          label=\"First Item\"\n          active={this.state.active === 'First Item'}\n          onPress={() => { this.setState({ active: 'First Item' }); }}\n       />\n        <DrawerItem\n          label=\"Second Item\"\n          active={this.state.active === 'Second Item'}\n          onPress={() => { this.setState({ active: 'Second Item' }); }}\n       />\n     </DrawerSection>\n    );\n  }\n}\n```","path":"drawer-section","data":{"description":"A DrawerSection groups content inside a navigation drawer.\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    active: 'First Item',\n  };\n\n  render() {\n    const { active } = this.state;\n    return (\n      <DrawerSection title=\"Some title\">\n        <DrawerItem\n          label=\"First Item\"\n          active={this.state.active === 'First Item'}\n          onPress={() => { this.setState({ active: 'First Item' }); }}\n       />\n        <DrawerItem\n          label=\"Second Item\"\n          active={this.state.active === 'Second Item'}\n          onPress={() => { this.setState({ active: 'Second Item' }); }}\n       />\n     </DrawerSection>\n    );\n  }\n}\n```","methods":[],"props":{"title":{"flowType":{"name":"string"},"required":false,"description":"Title to show as the header for the section."},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `DrawerSection`."},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"FAB","description":"A floating action button represents the primary action in an application.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <FAB\n    small\n    icon=\"add\"\n    onPress={() => {}}\n  />\n);\n```","path":"fab","data":{"description":"A floating action button represents the primary action in an application.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <FAB\n    small\n    icon=\"add\"\n    onPress={() => {}}\n  />\n);\n```","methods":[],"props":{"small":{"flowType":{"name":"boolean"},"required":false,"description":"Whether FAB is mini-sized, used to create visual continuity with other elements."},"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Icon color of button, a dark button will render light text and vice-versa."},"icon":{"flowType":{"name":"IconSource"},"required":true,"description":"Name of the icon. Can be a string (name of `MaterialIcon`),\nan object of shape `{ uri: 'https://path.to' }`,\na local image: `require('../path/to/image.png')`,\nor a valid React Native component."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom color for the FAB."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Headline","description":"Typography component for showing a headline.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/headline.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Headline>Headline</Headline>\n);\n```","path":"headline","data":{"description":"Typography component for showing a headline.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/headline.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Headline>Headline</Headline>\n);\n```","methods":[],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"Modal","description":"The Modal component is a simple way to present content above an enclosing view.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _showModal = () => this.setState({ visble: true });\n  _hideModal = () => this.setState({ visble: false });\n\n  render() {\n    const { visible } = this.state;\n    return (\n      <Modal visible={visible}>\n        <Text>Example Modal</Text>\n      </Modal>\n    );\n  }\n}\n```","path":"modal","data":{"description":"The Modal component is a simple way to present content above an enclosing view.\n\n## Usage\n```js\nexport default class MyComponent extends React.Component {\n  state = {\n    visible: false,\n  };\n\n  _showModal = () => this.setState({ visble: true });\n  _hideModal = () => this.setState({ visble: false });\n\n  render() {\n    const { visible } = this.state;\n    return (\n      <Modal visible={visible}>\n        <Text>Example Modal</Text>\n      </Modal>\n    );\n  }\n}\n```","displayName":"Modal","methods":[{"name":"_handleBack","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_showModal","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_hideModal","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"dismissable":{"flowType":{"name":"boolean"},"required":false,"description":"Determines whether clicking outside the modal dismiss it.","defaultValue":{"value":"true","computed":false}},"onDismiss":{"flowType":{"name":"Function"},"required":true,"description":"Callback that is called when the user dismisses the modal."},"visible":{"flowType":{"name":"boolean"},"required":true,"description":"Determines Whether the modal is visible.","defaultValue":{"value":"false","computed":false}},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `Modal`."}}},"type":"component"},{"title":"Paper","description":"Paper is a basic container that can give depth to the page.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paper.1_2.png\" />\n  <img src=\"screenshots/paper.4_6.png\" />\n  <img src=\"screenshots/paper.9_12.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Paper style={styles.paper}>\n     <Text>Paper</Text>\n  </Paper>\n);\n\nconst styles = StyleSheet.create({\n  paper: {\n   padding: 8,\n   height: 80,\n   width: 80,\n   alignItems: 'center',\n   justifyContent: 'center',\n   },\n});\n```\nNote: Pass *elevation* style, to apply shadow to the component. Defaults to 2.","path":"paper","data":{"description":"Paper is a basic container that can give depth to the page.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paper.1_2.png\" />\n  <img src=\"screenshots/paper.4_6.png\" />\n  <img src=\"screenshots/paper.9_12.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Paper style={styles.paper}>\n     <Text>Paper</Text>\n  </Paper>\n);\n\nconst styles = StyleSheet.create({\n  paper: {\n   padding: 8,\n   height: 80,\n   width: 80,\n   alignItems: 'center',\n   justifyContent: 'center',\n   },\n});\n```\nNote: Pass *elevation* style, to apply shadow to the component. Defaults to 2.","displayName":"Paper","methods":[],"props":{"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `Paper`."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Paragraph","description":"Typography component for showing a paragraph.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paragraph.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Paragraph>Paragraph</Paragraph>\n);\n```","path":"paragraph","data":{"description":"Typography component for showing a paragraph.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paragraph.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Paragraph>Paragraph</Paragraph>\n);\n```","methods":[],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"ProgressBar","description":"Progress bar is an indicator used to present progress of some activity in the app.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/progress-bar.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <ProgressBar progress={0.5} color={Colors.red800} />\n);\n```","path":"progress-bar","data":{"description":"Progress bar is an indicator used to present progress of some activity in the app.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/progress-bar.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <ProgressBar progress={0.5} color={Colors.red800} />\n);\n```","methods":[],"props":{"progress":{"flowType":{"name":"number"},"required":true,"description":"Progress value (between 0 and 1)."},"color":{"flowType":{"name":"string"},"required":false,"description":"Color of the progress bar."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"RadioButton","description":"Radio buttons allow the selection a single option from a set\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/radio-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    checked: 'firstOption',\n  };\n\n  render() {\n    const { checked } = this.state;\n    return (\n      <View>\n        <RadioButton\n          value=\"firstOption\"\n          checked={checked === 'firstOption'}\n          onPress={() => { this.setState({ checked: 'firstOption' }); }}\n        />\n        <RadioButton\n          value=\"secondOption\"\n          checked={checked === 'secondOption'}\n          onPress={() => { this.setState({ checked: 'secondOption' }); }}\n        />\n      </View>\n    );\n  }\n}\n```","path":"radio-button","data":{"description":"Radio buttons allow the selection a single option from a set\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/radio-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    checked: 'firstOption',\n  };\n\n  render() {\n    const { checked } = this.state;\n    return (\n      <View>\n        <RadioButton\n          value=\"firstOption\"\n          checked={checked === 'firstOption'}\n          onPress={() => { this.setState({ checked: 'firstOption' }); }}\n        />\n        <RadioButton\n          value=\"secondOption\"\n          checked={checked === 'secondOption'}\n          onPress={() => { this.setState({ checked: 'secondOption' }); }}\n        />\n      </View>\n    );\n  }\n}\n```","displayName":"RadioButton","methods":[],"props":{"checked":{"flowType":{"name":"boolean"},"required":true,"description":"Whether radio is checked."},"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"Whether radio is disabled."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom color for radio."},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"SearchBar","description":"SearchBar is a simple input box where users can type search queries.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/searchbar.png\" />\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    firstQuery: '',\n  };\n\n  render() {\n    const { firstQuery } = this.state;\n    return (\n      <SearchBar\n        placeholder=\"Search\"\n        onChangeText={query => { this.setState({ firstQuery: query }); }}\n        value={firstQuery}\n      />\n    );\n  }\n}\n```","path":"search-bar","data":{"description":"SearchBar is a simple input box where users can type search queries.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/searchbar.png\" />\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    firstQuery: '',\n  };\n\n  render() {\n    const { firstQuery } = this.state;\n    return (\n      <SearchBar\n        placeholder=\"Search\"\n        onChangeText={query => { this.setState({ firstQuery: query }); }}\n        value={firstQuery}\n      />\n    );\n  }\n}\n```","displayName":"SearchBar","methods":[{"name":"_handleClearPress","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"placeholder":{"flowType":{"name":"string"},"required":false,"description":"Hint text shown when the input is empty."},"value":{"flowType":{"name":"string"},"required":true,"description":"The value of the text input."},"icon":{"flowType":{"name":"IconSource"},"required":false,"description":"Icon name for the left icon button (see `onIconPress`)."},"onChangeText":{"flowType":{"name":"signature","type":"function","raw":"(query: string) => void","signature":{"arguments":[{"name":"query","type":{"name":"string"}}],"return":{"name":"void"}}},"required":true,"description":"Callback that is called when the text input's text changes."},"onIconPress":{"flowType":{"name":"Function"},"required":false,"description":"Callback to execute if we want the left icon to act as button."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Subheading","description":"Typography component for showing a subheading.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/subheading.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Subheading>Subheading</Subheading>\n);\n```","path":"subheading","data":{"description":"Typography component for showing a subheading.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/subheading.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Subheading>Subheading</Subheading>\n);\n```","methods":[],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"Switch","description":"Switch is a visual toggle between two mutually exclusive states — on and off.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/switch-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    isSwitchOn: false,\n  };\n\n  render() {\n    const { isSwitchOn } = this.state;\n    return (\n      <Switch\n        value={isSwitchOn}\n        onValueChange={() =>\n          { this.setState({ isSwitchOn: !isSwitchOn }); }\n        }\n      />\n    );\n  }\n}\n```","path":"switch","data":{"description":"Switch is a visual toggle between two mutually exclusive states — on and off.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/switch-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/switch-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  state = {\n    isSwitchOn: false,\n  };\n\n  render() {\n    const { isSwitchOn } = this.state;\n    return (\n      <Switch\n        value={isSwitchOn}\n        onValueChange={() =>\n          { this.setState({ isSwitchOn: !isSwitchOn }); }\n        }\n      />\n    );\n  }\n}\n```","displayName":"Switch","methods":[],"props":{"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"Disable toggling the switch."},"value":{"flowType":{"name":"boolean"},"required":false,"description":"Switch value- true or false."},"color":{"flowType":{"name":"string"},"required":false,"description":"Custom color for checkbox."},"onValueChange":{"flowType":{"name":"Function"},"required":false,"description":"Invoked with the new value when the value changes."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Text","description":"Text component which follows styles from the theme.\n\n@extends Text props https://facebook.github.io/react-native/docs/text.html#props","path":"text","data":{"description":"Text component which follows styles from the theme.\n\n@extends Text props https://facebook.github.io/react-native/docs/text.html#props","displayName":"Text","methods":[{"name":"setNativeProps","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null}],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"TextInput","description":"TextInputs allow users to input text.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/textinput.unfocused.png\" />\n    <figcaption>Unfocused</span>\n  </figure>\n  <figure>\n    <img src=\"screenshots/textinput.focused.png\" />\n    <figcaption>Focused</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nclass MyComponent extends React.Component {\n  state = {\n    text: ''\n  };\n\n  render(){\n    return (\n      <TextInput\n        label='Email'\n        value={this.state.text}\n        onChangeText={text => this.setState({ text })}\n      />\n    );\n  }\n}\n```\n\n@extends TextInput props https://facebook.github.io/react-native/docs/textinput.html#props","path":"text-input","data":{"description":"TextInputs allow users to input text.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/textinput.unfocused.png\" />\n    <figcaption>Unfocused</span>\n  </figure>\n  <figure>\n    <img src=\"screenshots/textinput.focused.png\" />\n    <figcaption>Focused</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nclass MyComponent extends React.Component {\n  state = {\n    text: ''\n  };\n\n  render(){\n    return (\n      <TextInput\n        label='Email'\n        value={this.state.text}\n        onChangeText={text => this.setState({ text })}\n      />\n    );\n  }\n}\n```\n\n@extends TextInput props https://facebook.github.io/react-native/docs/textinput.html#props","displayName":"TextInput","methods":[{"name":"_setPlaceholder","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_removePlaceholder","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_setRef","docblock":null,"modifiers":[],"params":[{"name":"c","type":{"name":"Object","alias":"Object"}}],"returns":null},{"name":"_animateFocus","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_animateBlur","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"_handleFocus","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"_handleBlur","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"setNativeProps","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"isFocused","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"clear","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"focus","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null},{"name":"blur","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null}],"props":{"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"If true, user won't be able to interact with the component.","defaultValue":{"value":"false","computed":false}},"label":{"flowType":{"name":"string"},"required":false,"description":"The text to use for the floating label."},"placeholder":{"flowType":{"name":"string"},"required":false,"description":"Placeholder for the input."},"onChangeText":{"flowType":{"name":"Function"},"required":false,"description":"Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler."},"underlineColor":{"flowType":{"name":"string"},"required":false,"description":"Underline color of the input."},"multiline":{"flowType":{"name":"boolean"},"required":true,"description":"Whether the input can have multiple lines."},"numberOfLines":{"flowType":{"name":"number"},"required":true,"description":"The number of lines to show in the input (Android only)."},"onFocus":{"flowType":{"name":"Function"},"required":false,"description":"Callback that is called when the text input is focused."},"onBlur":{"flowType":{"name":"Function"},"required":false,"description":"Callback that is called when the text input is blurred."},"value":{"flowType":{"name":"string"},"required":false,"description":"Value of the text input."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"Title","description":"Typography component for showing a title.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/title.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Title>Title</Title>\n);\n```","path":"title","data":{"description":"Typography component for showing a title.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/title.png\" />\n</div>\n\n## Usage\n```js\nconst MyComponent = () => (\n  <Title>Title</Title>\n);\n```","methods":[],"props":{"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"Toolbar","description":"Toolbar is usually used as a header placed at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/toolbar.android.png\" />\n    <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class=\"medium\" src=\"screenshots/toolbar.ios.png\" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  render() {\n    return (\n      <Toolbar>\n        <ToolbarBackAction\n          onPress={this._goBack}\n        />\n        <ToolbarContent\n          title=\"Title\"\n          subtitle=\"Subtitle\"\n        />\n        <ToolbarAction icon=\"search\" onPress={this._onSearch} />\n        <ToolbarAction icon=\"more-vert\" onPress={this._onMore} />\n      </Toolbar>\n    );\n  }\n}\n```","path":"toolbar","data":{"description":"Toolbar is usually used as a header placed at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/toolbar.android.png\" />\n    <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class=\"medium\" src=\"screenshots/toolbar.ios.png\" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nexport default class MyComponent extends Component {\n  render() {\n    return (\n      <Toolbar>\n        <ToolbarBackAction\n          onPress={this._goBack}\n        />\n        <ToolbarContent\n          title=\"Title\"\n          subtitle=\"Subtitle\"\n        />\n        <ToolbarAction icon=\"search\" onPress={this._onSearch} />\n        <ToolbarAction icon=\"more-vert\" onPress={this._onMore} />\n      </Toolbar>\n    );\n  }\n}\n```","displayName":"Toolbar","methods":[],"props":{"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Theme color for the toolbar, a dark toolbar will render light text and vice-versa\nChild elements can override this prop independently."},"statusBarHeight":{"flowType":{"name":"number"},"required":false,"description":"Space added it Toolbar to adapt to the StatusBar.","defaultValue":{"value":"Platform.OS === 'ios' ? 20 : 0","computed":false}},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `Toolbar`."},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"ToolbarAction","description":"The ToolbarAction component is used for displaying an action item in the toolbar.","path":"toolbar-action","data":{"description":"The ToolbarAction component is used for displaying an action item in the toolbar.","displayName":"ToolbarAction","methods":[],"props":{"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Theme color for the action icon, a dark action icon will render a light icon and vice-versa."},"icon":{"flowType":{"name":"IconSource"},"required":true,"description":"Name of the icon to show."},"size":{"flowType":{"name":"number"},"required":false,"description":"Optional icon size, defaults to 24."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"ToolbarBackAction","description":"The ToolbarBackAction component is used for displaying a back button in the toolbar.","path":"toolbar-back-action","data":{"description":"The ToolbarBackAction component is used for displaying a back button in the toolbar.","methods":[],"props":{"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Theme color for the back icon, a dark action icon will render a light icon and vice-versa."},"onPress":{"flowType":{"name":"Function"},"required":false,"description":"Function to execute on press."},"style":{"flowType":{"name":"any"},"required":false,"description":""}}},"type":"component"},{"title":"ToolbarContent","description":"The ToolbarContent component is used for displaying a title and optional subtitle in a toolbar.","path":"toolbar-content","data":{"description":"The ToolbarContent component is used for displaying a title and optional subtitle in a toolbar.","displayName":"ToolbarContent","methods":[],"props":{"dark":{"flowType":{"name":"boolean"},"required":false,"description":"Theme color for the text, a dark toolbar will render light text and vice-versa."},"title":{"flowType":{"name":"union","raw":"string | React.Node","elements":[{"name":"string"},{"name":"unknown"}]},"required":true,"description":"Text for the title."},"titleStyle":{"flowType":{"name":"any"},"required":false,"description":"Style for the title."},"subtitle":{"flowType":{"name":"union","raw":"string | React.Node","elements":[{"name":"string"},{"name":"unknown"}]},"required":false,"description":"Text for the subtitle."},"subtitleStyle":{"flowType":{"name":"any"},"required":false,"description":"Style for the subtitle."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"},{"title":"TouchableRipple","description":"Ripple provides components with a material \"ink ripple\" interaction effect.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <TouchableRipple\n    onPress={() => {}}\n    borderless\n    rippleColor=\"rgba(0, 0, 0, .32)\"\n  >\n    <View>\n      <Paragraph>Press me</Paragrpah>\n    </View>\n  </TouchableRipple>\n);\n```","path":"touchable-ripple","data":{"description":"Ripple provides components with a material \"ink ripple\" interaction effect.\n\n## Usage\n```js\nconst MyComponent = () => (\n  <TouchableRipple\n    onPress={() => {}}\n    borderless\n    rippleColor=\"rgba(0, 0, 0, .32)\"\n  >\n    <View>\n      <Paragraph>Press me</Paragrpah>\n    </View>\n  </TouchableRipple>\n);\n```","displayName":"TouchableRipple","methods":[],"props":{"borderless":{"flowType":{"name":"boolean"},"required":false,"description":"Whether to render the ripple outside the view bounds.","defaultValue":{"value":"false","computed":false}},"background":{"flowType":{"name":"Object"},"required":false,"description":"Type of background drawabale to display the feedback.\nhttps://facebook.github.io/react-native/docs/touchablenativefeedback.html#background"},"disabled":{"flowType":{"name":"boolean"},"required":false,"description":"Whether to prevent interaction with the touchable."},"onPress":{"flowType":{"name":"Function","nullable":true},"required":false,"description":"Function to execute on press. If not set, will cause the touchable to be disabled."},"rippleColor":{"flowType":{"name":"string"},"required":false,"description":"Color of the ripple effect."},"underlayColor":{"flowType":{"name":"string"},"required":false,"description":"Color of the underlay for the highlight effect."},"children":{"flowType":{"name":"unknown"},"required":true,"description":"Content of the `TouchableRipple`."},"style":{"flowType":{"name":"any"},"required":false,"description":""},"theme":{"flowType":{"name":"Theme"},"required":true,"description":"@optional"}}},"type":"component"}
]