react-native-tableview-simple

If you like my component and want to buy me a coffee, checkout my Patreon page – Thanks!

This 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.

A possible use case might be an about- or a settings-screen with a few rows. For displaying long datalists it is recommended to use the FlatList Component together with Cell and Separator Components. (see example)

Have a look at the examples below! :-)

Installation

Install as dependency:

// yarn
yarn add react-native-tableview-simple
// or npm
npm i react-native-tableview-simple --S

Add needed components:

import {
  Cell, 
  Section,
  TableView,
} from 'react-native-tableview-simple';

Extensible

react-native-tableview-simple provides you with some predefined CSS-styles, inspired by the native TableView. You can always mix the Cell-instances inside a Section, with other (React-Native)-Views.
Therefore the Cell-Component itself can't be manipulated heavily.

If you aren't satisfied with a component, feel free to create a PR or just create and use a custom component.

Submit a Custom `Cell`-Component

Maybe you want to add your lovely designed Cell-Component to the project. Just move your component to the folder components and choose a meaningful name! :-)

`TableView`

Currently TableView doesn't support any properties.

`Section`

The Section component is needed to render the Cells together with Separators. It's possible to use the Flatlist component instead (Example).

Prop	Default	Type	Description
allowFontScaling	`true`	`bool`	Respect Text Size accessibility setting on iOS
footerComponent	-	`React.Component`	Inject any component to replace original footer (optional)
headerComponent	-	`React.Component`	Inject any component to replace original header (optional)
footer	-	`string`	Footer value
footerTextColor	`#6d6d72`	`string`	Text color of footer
header	-	`string`	Header value
headerTextColor	`#6d6d72`	`string`	Text color of header
hideSeparator	`false`	`bool`	Hide separators
sectionPaddingBottom	`15`	`number`	Padding bottom of section
sectionPaddingTop	`15`	`number`	Padding top of section
sectionTintColor	`#EFEFF4`	`string`	Background color of section
separatorInsetLeft	`15`	`number`	Left inset of separator
separatorInsetRight	`0`	`number`	Right inset of separator
separatorTintColor	`#C8C7CC`	`string`	Color of separator

`Cell`

The style of the Cell component is inspired by the native UITableView. Because the Cell component is created with CSS only, its highly flexible. The content of the cell is separated in three views, which can all be modified via props: cellImageView | cellContentView | cellAccessoryView.

To get an idea what you can modify via props, have a look at the examples below.

Prop	Default	Type	Description
accessory	-	`string`	Predefined accessory: `DisclosureIndicator`, `Detail`, `DetailDisclosure`, `Checkmark`
accessoryColor	`#007AFF`	`string`	Color of accessory
allowFontScaling	`true`	`bool`	Respect Text Size accessibility setting on iOS
backgroundColor	`#FFF`	`string`	Background color of cell
cellStyle	`Basic`	`string`	Predefined styles: `Basic`, `RightDetail`, `LeftDetail`, `Subtitle`
cellAccessoryView	-	`React.Component`	Replace accessory view component (e.g.: add Switch or ActivityIndicator)
cellContentView	-	`React.Component`	Replace content view component
cellImageView	-	`React.Component`	Replace image view component
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)
detail	-	`string` or `number`	Detail value
detailTextStyle	`{}`	`Text.propTypes.style`	These styles will be applied to the (left- / right-) detail `Text`-Component.
disableImageResize	`false`	`bool`	Disable resizing of image
highlightActiveOpacity	`0.8`	`number`	Opacity of cell when touch is active
highlightUnderlayColor	`black`	`string`	Color of underlay that will show through when touch is active
isDisabled	`false`	`bool`	Cell is disabled. `onPress` will not get triggered
image	-	`React.Component (Image)`	Image component displayed on the left. Will resized automatically
leftDetailColor	`#007AFF`	`string`	Text color of left detail
rightDetailColor	`#8E8E93`	`string`	Text color of right detail
subtitleColor	`#000`	`string`	Text color of subtitle
subtitleTextStyle	`{}`	`Text.propTypes.style`	These styles will be applied to the subtitle `Text`-Component.
title	-	`string` or `number` or `React.Component`	Title value
titleTextColor	`#000`	`string`	Text color of title
titleTextStyle	`{}`	`Text.propTypes.style`	These styles will be applied to the title `Text`-Component (e.g.: update `fontSize` or `fontFamily`)
titleTextStyleDisabled	`{}`	`Text.propTypes.style`	These styles will be applied to the title `Text`-Component, when the cell is disabled
onPress	-	`func` or `false`	If set, cell will be automaticaly initialized with TouchableHighlight

Wrap `Cell`

Sometimes custom Cell components are needed. By creating new component, which is based on Cell, its only necessary to set the props once.

...

import {
  Cell,
  Section,
  TableView,
} from 'react-native-tableview-simple';

const CellVariant = (props) => (
  <Cell
    {...props}
    cellContentView={
      <View
        style={{ alignItems: 'center', flexDirection: 'row', flex: 1, paddingVertical: 10 }}
      >
        <Text
          allowFontScaling
          numberOfLines={1}
          style={{ flex: 1, fontSize: 20 }}
        >
          {props.title}
        </Text>
      </View>
    }
  />
);

...

<TableView>
  <Section>
    <CellVariant title="Element 1" />
    <CellVariant title="Element 2" />
    <CellVariant title="Element 3" />
    <CellVariant title="Element 4" />
  </Section>
</TableView>

...

`Separator`

In general the Separator component is used internally by the Section component. But additionally this component can be used together with FlatList. See the example below.

Prop	Default	Type	Description
backgroundColor	`#EFEFF4`	`string`	Background color
insetLeft	`15`	`number`	Left inset of separator
insetRight	`0`	`number`	Right inset of separator
isHidden	`false`	`bool`	Hide separator but keeping its height
tintColor	`#C8C7CC`	`string`	Color of separator

Examples

The following examples can be found in the folder example.
To run the example project, follow these steps:

git clone https://github.com/Purii/react-native-tableview-simple
cd example
yarn or npm i
run /example/ios/example.xcodeproj via Xcode

Quick look
Use case: About-screen
Complete example / vs. native iOS
Render with FlatList

Quick look

// ActivityIndicator as accessory
  <Cell
    title="Switch"
    cellAccessoryView={<Switch />}
    contentContainerStyle={{ paddingVertical: 4 }} // Adjust height
  />

// Switch as accessory
  <Cell
    title="ActivityIndicator"
    cellAccessoryView={<ActivityIndicator />}
  />

// TextInput
  <Cell
    cellContentView={<TextInput style={{fontSize: 16, flex: 1}} placeholder="TextInput"/>}
  />

// Image
  <Cell
    title="Image"
    image={
      <Image
        style={{ borderRadius: 5 }}
        source={{
          uri: 'https://facebook.github.io/react/img/logo_og.png',
        }}
      />
    }
  />

Use case: About-screen

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {
  Component
} from 'react';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Cell,
  Section,
  TableView
} from 'react-native-tableview-simple';

export default class App extends Component<{}> {
  render() {
    return (
      <ScrollView contentContainerStyle={styles.stage}>
          <View style={{
            backgroundColor: '#37474F',
            height: 500,
            alignItems: 'center',
            justifyContent: 'center'
          }}>
            <View style={{
              backgroundColor: '#ffc107',
              width: 80,
              height: 80,
              borderRadius: 10
            }}></View>
          </View>
          <TableView>
            <Section footer="All rights reserved.">
              <Cell title="Help / FAQ" titleTextColor="#007AFF" onPress={() => console.log('open Help/FAQ')}/>
              <Cell title="Contact Us" titleTextColor="#007AFF" onPress={() => console.log('open Contact Us')}/>
            </Section>
          </TableView>
      </ScrollView>
    );
  }
};

const styles = StyleSheet.create({
  stage: {
    backgroundColor: '#EFEFF4',
    paddingBottom: 20,
    flex: 1
  },
});