{"id":4053,"url":"https://github.com/Purii/react-native-tableview-simple","last_synced_at":"2025-08-04T00:31:30.512Z","repository":{"id":1898513,"uuid":"44929790","full_name":"Purii/react-native-tableview-simple","owner":"Purii","description":"Flexible and lightweight React Native component for UITableView made with pure CSS","archived":false,"fork":false,"pushed_at":"2024-09-09T04:12:11.000Z","size":7830,"stargazers_count":560,"open_issues_count":17,"forks_count":61,"subscribers_count":12,"default_branch":"main","last_synced_at":"2024-11-28T23:09:20.822Z","etag":null,"topics":["css","ios","javascript","react","react-native","tableview","uitableview"],"latest_commit_sha":null,"homepage":"https://snack.expo.io/@purii/react-native-tableview-simple","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Purii.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Purii","patreon":"purii"}},"created_at":"2015-10-25T21:05:29.000Z","updated_at":"2024-10-25T19:31:28.000Z","dependencies_parsed_at":"2024-01-08T01:01:19.673Z","dependency_job_id":"960dd2e8-75be-4f67-bd62-17d0402d34e4","html_url":"https://github.com/Purii/react-native-tableview-simple","commit_stats":{"total_commits":652,"total_committers":19,"mean_commits":34.31578947368421,"dds":"0.41104294478527603","last_synced_commit":"6b8f3aa7564df153e62b0f87776a836d745e7dd7"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Purii%2Freact-native-tableview-simple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Purii%2Freact-native-tableview-simple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Purii%2Freact-native-tableview-simple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Purii%2Freact-native-tableview-simple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Purii","download_url":"https://codeload.github.com/Purii/react-native-tableview-simple/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","ios","javascript","react","react-native","tableview","uitableview"],"created_at":"2024-01-05T20:16:59.660Z","updated_at":"2024-12-07T07:31:07.151Z","avatar_url":"https://github.com/Purii.png","language":"TypeScript","readme":"# react-native-tableview-simple\n\n[![Donate](https://img.shields.io/badge/Donate-Patreon-green.svg)](https://www.patreon.com/purii)\n[![Build Status](https://travis-ci.org/Purii/react-native-tableview-simple.svg?branch=master)](https://travis-ci.org/Purii/react-native-tableview-simple)\n[![npm version](http://img.shields.io/npm/v/react-native-tableview-simple.svg?style=flat)](https://www.npmjs.com/package/react-native-tableview-simple)\n[![npm](https://img.shields.io/npm/dm/react-native-tableview-simple.svg)](https://www.npmjs.com/package/react-native-tableview-simple)\n[![Package Quality](http://npm.packagequality.com/shield/react-native-tableview-simple.svg)](http://packagequality.com/#?package=react-native-tableview-simple)\n[![Known Vulnerabilities](https://snyk.io/test/npm/react-native-tableview-simple/badge.svg)](https://snyk.io/test/npm/react-native-tableview-simple)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Purii/react-native-tableview-simple/master/LICENSE)\n\n\u003c!-- prettier-ignore --\u003e\n:point_right: _This component is used in my production app [**Game ideas**](https://apps.apple.com/us/app/game-ideas-get-inspired/id1450078546). Make sure to check it out!_ :point_left:\n\nThis cross-platform component is inspired by the iOS-TableView. Made with pure CSS, the intention is to provide **a flexible and lightweight alternative to a bridged component**. Don't be scared of React-Native upgrades anymore!\n\nA possible use case might be an about- or a settings-screen with a few rows.\nFor displaying long datalists it is recommended to use the `FlatList` Component together with `Cell` and `Separator` Components. ([see example](#render-with-flatlist) or [live demo with expo](https://snack.expo.io/@purii/react-native-tableview-simple))\n\n:rocket: If you like my component and want to buy me a coffee press the `Sponsor` Button and find out about GitHub Sponsors – Thanks! :point_left:\n\n|                                                                                               |                                                                                           |\n| :-------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: |\n| ![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshotStandard.png) | ![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshotDark.png) |\n\nHave a look at the [examples below](https://github.com/Purii/react-native-tableview-simple#examples)! :-)\n\n- [Installation](#installation)\n- [Extensible](#extensible)\n- [Props](#props): [`TableView`](#tableview) [`Cell`](#cell) [`Section`](#section) [`Separator`](#separator)\n- [Examples](#examples)\n- [Try it out](#try-it-out)\n\n## Installation\n\n1.  _Install as dependency:_\n\n```sh\n// yarn\nyarn add react-native-tableview-simple\n// or npm\nnpm i react-native-tableview-simple --S\n```\n\n2.  _Add needed components:_\n\n```javascript\nimport { Cell, Section, TableView } from 'react-native-tableview-simple';\n```\n\n## Extensible\n\n`react-native-tableview-simple` provides you with some predefined CSS-styles, inspired by the native TableView.\nYou can always mix the `Cell`-instances inside a `Section`, with other (React-Native)-Views.\n\n### Override defaults of `Cell`-Component\n\nDon't repeat yourself.\nIf you override the default props over and over again, just pass them as an object.\n\n```jsx\nconst cellPropsCustom = {\n  cellStyle: 'Basic',\n  title: 'Basic Custom',\n  backgroundColor: 'black',\n};\n\n\n\u003cCell onPress={console.log} {...cellPropsCustom} /\u003e\n\u003cCell onPress={console.log} {...cellPropsCustom} /\u003e\n```\n\n### Separator BackgroundColor is derived from Cell BackgroundColor\n\nThe `Separator`-Component is a line from the left end to the right end.\nAccording to the original iOS TableView there should be an insent on the left end.\nThis is done by separating the `Separator`-Component in two parts: `SeparatorContainer` (full width) and `SeparatorInner` (width - inset). (See: [`Separator.tsx`](/src/components/Separator.tsx))\nThe `SeparatorContainer` has the same color that the `Cell`-Component above.\nThe `SeparatorInner` has the default Separator Color.\nPressing a Cell Component will change the color of `SeparatorInner` to `transparent`.\n\n#### Why is that so complicated?\n\nBecause just hiding the separator would make the height of the component jump.\n\n## Props\n\n- [`TableView`](#tableview)\n- [`Cell`](#cell)\n- [`Section`](#section)\n- [`Separator`](#separator)\n\n### `TableView`\n\nThe `TableView` component controls the theme.\n\n| Prop              | Default |        Type        | Description                                                                                                                               |\n| :---------------- | :-----: | :----------------: | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| children          |    -    | `React.ReactNode`  | Children. Should be of type `Section`                                                                                                     |\n| appearance        | `auto`  |      `string`      | `auto`: System Appearance; `light`: Light Appearance; `dark`: Dark Appearance; `[string]`: Appearance defined through `customAppearances` |\n| customAppearances |    -    | `THEME_APPEARANCE` |                                                                                                                                           |\n| style             |    -    |    `ViewStyle`     | Applied to the table wrapper                                                                                                              |\n\n### `Section`\n\nThe `Section` component is needed to render the `Cells` together with `Separators`.\nIt's possible to use the `Flatlist` component instead ([Example](#render-with-flatlist)).\n\n| Prop                      |            Default            |          Type          | Description                                                         |\n| :------------------------ | :---------------------------: | :--------------------: | ------------------------------------------------------------------- |\n| allowFontScaling          |            `true`             |         `bool`         | Respect Text Size accessibility setting on iOS                      |\n| footerComponent           |               -               |   `React.Component`    | Inject any component to replace original footer (optional)          |\n| headerComponent           |               -               |   `React.Component`    | Inject any component to replace original header (optional)          |\n| footer                    |               -               |        `string`        | Footer value                                                        |\n| footerTextColor           |           `#6d6d72`           |        `string`        | Text color of footer                                                |\n| footerTextStyle           |             `{}`              | `Text.propTypes.style` | These styles will be applied to the footer `Text`-Component.        |\n| header                    |               -               |        `string`        | Header value                                                        |\n| headerTextColor           |           `#6d6d72`           |        `string`        | Text color of header                                                |\n| headerTextStyle           |             `{}`              | `Text.propTypes.style` | These styles will be applied to the header `Text`-Component.        |\n| hideSeparator             |            `false`            |         `bool`         | Hide separators                                                     |\n| hideSurroundingSeparators |            `false`            |         `bool`         | Hide surrounding separators, best combined with roundedCorners      |\n| roundedCorners            |            `false`            |         `bool`         | Enable rounded corners, best combined with hideSurroundingSeparator |\n| sectionPaddingBottom      |             `15`              |        `number`        | Padding bottom of section                                           |\n| sectionPaddingTop         |             `15`              |        `number`        | Padding top of section                                              |\n| sectionTintColor          |           `#EFEFF4`           |        `string`        | Background color of section                                         |\n| separatorInsetLeft        |             `15`              |        `number`        | Left inset of separator                                             |\n| separatorInsetRight       |              `0`              |        `number`        | Right inset of separator                                            |\n| separatorTintColor        |           `#C8C7CC`           |        `string`        | Color of separator                                                  |\n| withSafeAreaView          | `true / false (on iOS \u003c= 10)` |         `bool`         | Render section header and footer with SafeAreaView                  |\n\n### `Cell`\n\nThe style of the `Cell` component is inspired by the native `UITableView`.\nBecause the `Cell` component is created with CSS only, its highly flexible.\nThe content of the cell is separated in three views, which can all be modified via `props`: `cellImageView` | `cellContentView` | `cellAccessoryView`.\n\nTo get an idea what you can modify via `props`, have a look at the [examples below](https://github.com/Purii/react-native-tableview-simple#examples).\n\n| Prop                              |            Default            |                   Type                    | Description                                                                                                                                                                         |\n| :-------------------------------- | :---------------------------: | :---------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| accessory                         |               -               |                 `string`                  | Predefined accessory: `DisclosureIndicator`, `Detail`, `DetailDisclosure`, `Checkmark`                                                                                              |\n| accessoryColor                    |           `#007AFF`           |                 `string`                  | Color of accessory                                                                                                                                                                  |\n| accessoryColorDisclosureIndicator |           `#C7C7CC`           |                 `string`                  | Color of accessory `DisclosureIndicator`                                                                                                                                            |\n| allowFontScaling                  |            `true`             |                  `bool`                   | Respect Text Size accessibility setting on iOS                                                                                                                                      |\n| backgroundColor                   |            `#FFF`             |                 `string`                  | Background color of cell                                                                                                                                                            |\n| cellStyle                         |            `Basic`            |                 `string`                  | Predefined styles: `Basic`, `RightDetail`, `LeftDetail`, `Subtitle`                                                                                                                 |\n| cellAccessoryView                 |               -               |             `React.Component`             | Replace accessory view component (_e.g.: add Switch or ActivityIndicator_)                                                                                                          |\n| cellContentView                   |               -               |             `React.Component`             | Replace content view component                                                                                                                                                      |\n| cellImageView                     |               -               |             `React.Component`             | Replace image view component                                                                                                                                                        |\nchildren                            |               -               |             `React.Component`             | Additional content to be displayed below the cell. (_e.g: Add Picker or DateTimePicker_)\n| contentContainerStyle             |             `{}`              |          `View.propTypes.style`           | These styles will be applied to the content container which wraps all of the child views. Overrides `cellStyle` (_e.g.: Override paddingLeft and paddingRight or set fixed height_) |\n| detail                            |               -               |           `string` or `number`            | Detail value                                                                                                                                                                        |\n| detailTextProps                   |             `{}`              |             `Text.propTypes`              | These props will be applied to the (left- / right-) detail `Text`-Component.                                                                                                        |\n| detailTextStyle                   |             `{}`              |          `Text.propTypes.style`           | These styles will be applied to the (left- / right-) detail `Text`-Component.                                                                                                       |\n| disableImageResize                |            `false`            |                  `bool`                   | Disable resizing of image                                                                                                                                                           |\n| hideSeparator                     |            `false`            |                  `bool`                   | Hide the following `Separator`-Component                                                                                                                                            |\n| highlightActiveOpacity            |             `0.8`             |                 `number`                  | Opacity of cell when touch is active                                                                                                                                                |\n| highlightUnderlayColor            |            `black`            |                 `string`                  | Color of underlay that will show through when touch is active                                                                                                                       |\n| isDisabled                        |            `false`            |                  `bool`                   | Cell is disabled. `onPress` will not get triggered                                                                                                                                  |\n| image                             |               -               |         `React.Component (Image)`         | Image component displayed on the left. Will resized automatically                                                                                                                   |\n| leftDetailColor                   |           `#007AFF`           |                 `string`                  | Text color of left detail                                                                                                                                                           |\n| rightDetailColor                  |           `#8E8E93`           |                 `string`                  | Text color of right detail                                                                                                                                                          |\n| subtitleColor                     |            `#000`             |                 `string`                  | Text color of subtitle                                                                                                                                                              |\n| subtitleTextStyle                 |             `{}`              |          `Text.propTypes.style`           | These styles will be applied to the subtitle `Text`-Component.                                                                                                                      |\n| testID                            |          `undefined`          |                 `string`                  | Add testID to root component                                                                                                                                                        |\n| title                             |               -               | `string` or `number` or `React.Component` | Title value                                                                                                                                                                         |\n| titleTextColor                    |            `#000`             |                 `string`                  | Text color of title                                                                                                                                                                 |\n| titleTextProps                    |             `{}`              |             `Text.propTypes`              | These props will be applied to the title `Text`-Component.                                                                                                                          |\n| titleTextStyle                    |             `{}`              |          `Text.propTypes.style`           | These styles will be applied to the title `Text`-Component (_e.g.: update `fontSize` or `fontFamily`_)                                                                              |\n| titleTextStyleDisabled            |             `{}`              |          `Text.propTypes.style`           | These styles will be applied to the title `Text`-Component, when the cell is disabled                                                                                               |\n| onPress                           |               -               |             `func` or `false`             | If set, cell will be automaticaly initialized with TouchableHighlight                                                                                                               |\n| onPressDetailAccessory            |               -               |             `func` or `false`             | Listen to onPress event of detail accessory                                                                                                                                         |\n| withSafeAreaView                  | `true / false (on iOS \u003c= 10)` |                  `bool`                   | Render cell with SafeAreaView                                                                                                                                                       |\n\n#### Wrap `Cell`\n\nSometimes custom `Cell` components are needed.\nBy creating a new component, which is based on `Cell`, its only necessary to set the props once.\nHowever, this comes with certain downsides. In order to keep the API as easy to use as possible, I implemented some automations for the `Sections` component.\nFor example, the `Cell.backgroundColor` prop will also decide on the `backgroundColor` of the `Separator` component.\n\nGiven the following pattern:\n\n```javascript\nimport {\n  Cell,\n  Section,\n  TableView,\n} from 'react-native-tableview-simple';\n\nconst CellVariant = (props) =\u003e (\n  \u003cCell\n    {...props}\n    cellContentView={\n      \u003cView\n        style={{ alignItems: 'center', flexDirection: 'row', flex: 1, paddingVertical: 10 }}\n      \u003e\n        \u003cText\n          allowFontScaling\n          numberOfLines={1}\n          style={{ flex: 1, fontSize: 20 }}\n        \u003e\n          {props.title}\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    }\n  /\u003e\n);\n\n// ...\n\n\u003cTableView\u003e\n  \u003cSection\u003e\n    \u003cCellVariant title=\"Element 1\" /\u003e\n    \u003cCellVariant title=\"Element 2\" /\u003e\n    \u003cCellVariant title=\"Element 3\" /\u003e\n    \u003cCellVariant title=\"Element 4\" /\u003e\n  \u003c/Section\u003e\n\u003c/TableView\u003e\n````\n\nThis pattern introduces an additional layer between `Section` and `Cell`: `Section` -\u003e `CellVariant` -\u003e `Cell`.\nThe `Section` component is expecting a `Cell` component as a child and therefor tries to [access the props as defined for the `Cell` component](https://github.com/Purii/react-native-tableview-simple/blob/5e81f61993eea32784cd9b20fa6e73d1240d77e5/src/components/Section.tsx#L131).\nIf following the mentioned pattern, this would fail, because `CellVariant.props` only contains the prop `title`.\nInstead, I recommend to insert your new default props as description in this section: [Override defaults of `Cell`-Component](##override-defaults-of-cell-component).\n\nIf this is not enough for you, and you still need to have a custom cell component, consider merging both approaches:\n\n```javascript\nimport {\n  Cell,\n  Section,\n  TableView,\n} from 'react-native-tableview-simple';\n\n\nconst cellPropsVariant = {\n  hideSeparator: true,\n  backgroundColor: 'black',\n};\n\nconst CellVariant = (props) =\u003e (\n  \u003cCell\n    {...props}\n    cellContentView={\n      \u003cView\n        style={{ alignItems: 'center', flexDirection: 'row', flex: 1, paddingVertical: 10 }}\n      \u003e\n        \u003cText\n          allowFontScaling\n          numberOfLines={1}\n          style={{ flex: 1, fontSize: 20 }}\n        \u003e\n          {props.title}\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    }\n  /\u003e\n);\n\n// ...\n\n\u003cTableView\u003e\n  \u003cSection\u003e\n    \u003cCellVariant title=\"Element 1\" {...cellPropsVariant} /\u003e\n    \u003cCellVariant title=\"Element 2\" {...cellPropsVariant} /\u003e\n    \u003cCellVariant title=\"Element 3\" {...cellPropsVariant} /\u003e\n    \u003cCellVariant title=\"Element 4\" {...cellPropsVariant} /\u003e\n  \u003c/Section\u003e\n\u003c/TableView\u003e\n````\n\n### `Separator`\n\nIn general the `Separator` component is used internally by the `Section` component.\nBut additionally this component can be used together with `FlatList`.\nSee the [example below](#render-with-flatlist).\n\n| Prop             |            Default            |   Type   | Description                           |\n| :--------------- | :---------------------------: | :------: | ------------------------------------- |\n| backgroundColor  |           `#EFEFF4`           | `string` | Background color                      |\n| insetLeft        |             `15`              | `number` | Left inset of separator               |\n| insetRight       |              `0`              | `number` | Right inset of separator              |\n| isHidden         |            `false`            |  `bool`  | Hide separator but keeping its height |\n| tintColor        |           `#C8C7CC`           | `string` | Color of separator                    |\n| withSafeAreaView | `true / false (on iOS \u003c= 10)` |  `bool`  | Render separator with SafeAreaView    |\n\n## Examples\n\nThe following examples can be found in the folder `example`.\nTo run the example project, follow these steps:\n\n1.  `git clone https://github.com/Purii/react-native-tableview-simple`\n1.  `cd example`\n1.  `yarn` or `npm i`\n1.  run `/example/ios/example.xcodeproj` via Xcode\n\n- [Quick look](#quick-look)\n- [Use case: About-screen](#use-case-about-screen)\n- [Complete example / vs. native iOS](#react-native-tableview-simple-vs-native-ios)\n- [Render with `FlatList`](#render-with-flatlist)\n\n### Quick look\n\n```javascript\n// ActivityIndicator as accessory\n  \u003cCell\n    title=\"Switch\"\n    cellAccessoryView={\u003cSwitch /\u003e}\n    contentContainerStyle={{ paddingVertical: 4 }} // Adjust height\n  /\u003e\n\n// Switch as accessory\n  \u003cCell\n    title=\"ActivityIndicator\"\n    cellAccessoryView={\u003cActivityIndicator /\u003e}\n  /\u003e\n\n// TextInput\n  \u003cCell\n    cellContentView={\u003cTextInput style={{fontSize: 16, flex: 1}} placeholder=\"TextInput\"/\u003e}\n  /\u003e\n\n// Image\n  \u003cCell\n    title=\"Image\"\n    image={\n      \u003cImage\n        style={{ borderRadius: 5 }}\n        source={{\n          uri: 'https://facebook.github.io/react/img/logo_og.png',\n        }}\n      /\u003e\n    }\n  /\u003e\n```\n\n### Use case: About-screen\n\n![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshotAboutScreen.png)\n\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n * @flow\n */\n\nimport React, { Component } from 'react';\nimport { AppRegistry, ScrollView, StyleSheet, Text, View } from 'react-native';\nimport { Cell, Section, TableView } from 'react-native-tableview-simple';\n\nexport default class App extends Component\u003c{}\u003e {\n  render() {\n    return (\n      \u003cScrollView contentContainerStyle={styles.stage}\u003e\n        \u003cView\n          style={{\n            backgroundColor: '#37474F',\n            height: 500,\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\u003e\n          \u003cView\n            style={{\n              backgroundColor: '#ffc107',\n              width: 80,\n              height: 80,\n              borderRadius: 10,\n            }}\n          /\u003e\n        \u003c/View\u003e\n        \u003cTableView\u003e\n          \u003cSection footer=\"All rights reserved.\"\u003e\n            \u003cCell\n              title=\"Help / FAQ\"\n              titleTextColor=\"#007AFF\"\n              onPress={() =\u003e console.log('open Help/FAQ')}\n            /\u003e\n            \u003cCell\n              title=\"Contact Us\"\n              titleTextColor=\"#007AFF\"\n              onPress={() =\u003e console.log('open Contact Us')}\n            /\u003e\n          \u003c/Section\u003e\n        \u003c/TableView\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  stage: {\n    backgroundColor: '#EFEFF4',\n    paddingBottom: 20,\n    flex: 1,\n  },\n});\n```\n\n### `react-native-tableview-simple` vs. Native iOS\n\nThe left and middle screens are build using `react-native-tableview-simple`. The right one is native.\n\n|                     `react-native-tableview-simple` (Dark Appearance)                     |                            `react-native-tableview-simple`                            | Native iOS                                                                                  |\n| :---------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------- |\n| ![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshotDark.png) | ![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshot.png) | ![](https://raw.github.com/Purii/react-native-tableview-simple/master/screenshotNative.png) |\n\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n * @flow\n */\n\nimport React, { Component } from 'react';\nimport {\n  ActivityIndicator,\n  AppRegistry,\n  Dimensions,\n  Image,\n  ScrollView,\n  StyleSheet,\n  Switch,\n  Text,\n  TextInput,\n  View,\n} from 'react-native';\nimport { Cell, Section, TableView } from 'react-native-tableview-simple';\n\nexport default class App extends Component\u003c{}\u003e {\n  render() {\n    return (\n      \u003cScrollView contentContainerStyle={styles.stage}\u003e\n        \u003cTableView\u003e\n          \u003cSection header=\"STANDARD\" footer=\"A Footer\"\u003e\n            \u003cCell cellStyle=\"Basic\" title=\"Basic\" /\u003e\n            \u003cCell cellStyle=\"RightDetail\" title=\"RightDetail\" detail=\"Detail\" /\u003e\n            \u003cCell cellStyle=\"LeftDetail\" title=\"LeftDetail\" detail=\"Detail\" /\u003e\n            \u003cCell\n              cellStyle=\"Subtitle\"\n              title=\"Subtitle\"\n              detail=\"No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"Pressable w/ accessory\"\n              accessory=\"DisclosureIndicator\"\n              onPress={() =\u003e console.log('Heyho!')}\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection header=\"DISABLED\"\u003e\n            \u003cCell cellStyle=\"Basic\" isDisabled title=\"Basic\" /\u003e\n            \u003cCell\n              cellStyle=\"RightDetail\"\n              isDisabled\n              title=\"RightDetail\"\n              detail=\"Detail\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"LeftDetail\"\n              isDisabled\n              title=\"LeftDetail\"\n              detail=\"Detail\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Subtitle\"\n              isDisabled\n              title=\"Subtitle\"\n              detail=\"No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              isDisabled\n              title=\"Pressable w/ accessory\"\n              accessory=\"DisclosureIndicator\"\n              onPress={() =\u003e console.log('Heyho!')}\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection header=\"ACCESSORY\"\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              accessory=\"DisclosureIndicator\"\n              title=\"Basic\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"RightDetail\"\n              accessory=\"DetailDisclosure\"\n              title=\"RightDetail\"\n              detail=\"Detail\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"LeftDetail\"\n              accessory=\"Detail\"\n              title=\"LeftDetail\"\n              detail=\"Detail\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Subtitle\"\n              accessory=\"Checkmark\"\n              title=\"Subtitle\"\n              detail=\"No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              accessory=\"Detail\"\n              title=\"Pressable w/ accessory\"\n              onPress={() =\u003e console.log('Heyho!')}\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection header=\"Image\" footer=\"A Footer\"\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"Basic\"\n              image={\n                \u003cImage\n                  style={{ borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n            \u003cCell\n              cellStyle=\"RightDetail\"\n              title=\"RightDetail\"\n              detail=\"Detail\"\n              image={\n                \u003cImage\n                  style={{ borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n            \u003cCell\n              cellStyle=\"LeftDetail\"\n              title=\"LeftDetail\"\n              detail=\"Detail\"\n              image={\n                \u003cImage\n                  style={{ borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n            \u003cCell\n              cellStyle=\"Subtitle\"\n              title=\"Subtitle\"\n              detail=\"No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk\"\n              image={\n                \u003cImage\n                  style={{ borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"Pressable w/ accessory\"\n              accessory=\"DisclosureIndicator\"\n              onPress={() =\u003e console.log('Heyho!')}\n              image={\n                \u003cImage\n                  style={{ borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"Disable image resize\"\n              disableImageResize\n              image={\n                \u003cImage\n                  style={{ height: 50, width: 50, borderRadius: 5 }}\n                  source={{\n                    uri: 'https://facebook.github.io/react/img/logo_og.png',\n                  }}\n                /\u003e\n              }\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection header=\"MISC\"\u003e\n            \u003cCell\n              cellStyle=\"RightDetail\"\n              title=\"RightDetail\"\n              detail=\"Detail\"\n              rightDetailColor=\"#6cc644\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"LeftDetail\"\n              title=\"LeftDetail\"\n              detail=\"Detail\"\n              leftDetailColor=\"#6cc644\"\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"Switch\"\n              cellAccessoryView={\u003cSwitch /\u003e}\n              contentContainerStyle={{ paddingVertical: 4 }}\n            /\u003e\n            \u003cCell\n              cellStyle=\"Basic\"\n              title=\"ActivityIndicator\"\n              cellAccessoryView={\u003cActivityIndicator /\u003e}\n            /\u003e\n            \u003cCell\n              cellContentView={\n                \u003cTextInput\n                  style={{ fontSize: 16, flex: 1 }}\n                  placeholder=\"TextInput\"\n                /\u003e\n              }\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection header=\"CUSTOMCELLS\"\u003e\n            \u003cCell\n              onPress={() =\u003e console.log('Heyho!')}\n              contentContainerStyle={{ alignItems: 'flex-start', height: 60 }}\n              cellContentView={\n                \u003cText style={{ flex: 1, fontSize: 16 }}\u003e\n                  Custom height with Cell-Component\n                \u003c/Text\u003e\n              }\n            /\u003e\n          \u003c/Section\u003e\n          \u003cSection headerComponent={\u003cCustomSectionHeader /\u003e}\u003e\n            \u003cCell cellStyle=\"Basic\" title=\"Section uses prop headerComponent\" /\u003e\n          \u003c/Section\u003e\n        \u003c/TableView\u003e\n        \u003cView\n          style={{\n            minHeight: Dimensions.get('window').height,\n          }}\u003e\n          \u003cView\n            style={{\n              backgroundColor: '#37474F',\n              height: 500,\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\u003e\n            \u003cView\n              style={{\n                backgroundColor: '#ffc107',\n                width: 80,\n                height: 80,\n                borderRadius: 10,\n              }}\n            /\u003e\n          \u003c/View\u003e\n          \u003cTableView\u003e\n            \u003cSection footer=\"All rights reserved.\"\u003e\n              \u003cCell\n                title=\"Help / FAQ\"\n                titleTextColor=\"#007AFF\"\n                onPress={() =\u003e console.log('open Help/FAQ')}\n              /\u003e\n              \u003cCell\n                title=\"Contact Us\"\n                titleTextColor=\"#007AFF\"\n                onPress={() =\u003e console.log('open Contact Us')}\n              /\u003e\n            \u003c/Section\u003e\n          \u003c/TableView\u003e\n        \u003c/View\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  stage: {\n    backgroundColor: '#EFEFF4',\n    paddingTop: 20,\n    paddingBottom: 20,\n  },\n});\n```\n\n### Render with `FlatList`\n\nBe aware of the prop [`keyboardShouldPersistTaps`](https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps) if using `ScrollView` or similar components. (See #85)\n\n```javascript\nimport React from 'react';\nimport { FlatList } from 'react-native';\n\nimport { Cell, Separator, TableView } from 'react-native-tableview-simple';\n\nconst data = [\n  { id: 1, title: '1' },\n  { id: 2, title: '2' },\n  { id: 3, title: '3' },\n  { id: 4, title: '4' },\n];\n\nexport default ExampleWithFlatList = () =\u003e (\n  \u003cTableView style={{ flex: 1 }}\u003e\n    \u003cFlatList\n      data={data}\n      keyExtractor={(item, index) =\u003e item.id}\n      renderItem={({ item, separators }) =\u003e (\n        \u003cCell\n          title={item.title}\n          onPress={console.log}\n          onHighlightRow={separators.highlight}\n          onUnHighlightRow={separators.unhighlight}\n        /\u003e\n      )}\n      ItemSeparatorComponent={({ highlighted }) =\u003e (\n        \u003cSeparator isHidden={highlighted} /\u003e\n      )}\n    /\u003e\n  \u003c/TableView\u003e\n);\n```\n\n# Try it out\n\nTry it in Expo: [https://snack.expo.io/@purii/react-native-tableview-simple](https://snack.expo.io/@purii/react-native-tableview-simple)\n","funding_links":["https://github.com/sponsors/Purii","https://patreon.com/purii","https://www.patreon.com/purii"],"categories":["Components","TypeScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPurii%2Freact-native-tableview-simple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPurii%2Freact-native-tableview-simple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPurii%2Freact-native-tableview-simple/lists"}