Package Exports

react-native-tableview-simple

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-tableview-simple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-tableview-simple

This cross-platform component is a copy of the iOS-TableView made with pure CSS. The intention is to provide a flexible and lightweight alternative to a bridged component. The focus is set on the presentation. The component is therefore not intended to render large data sets. A possible use case might be an about- or a settings-screen with a few rows.
Have a look at the Examples below! :-)

Installation

npm i react-native-tableview-simple --save
Add components import {Cell, Section, TableView} from 'react-native-tableview-simple'

Extensible

This component provides you with some predefined CSS-styles, inspired by the native TableView. You can always mix the Cell-instances inside a Section, with some Custom-Components.
Therefore the Cell-Component itself can't be manipulated. If you aren't satisfied with a component, feel free to create a PR or just create and use a custom component. Get inspired by the predefined cellstyles.

Submit a 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! :-)

Props

TableView

Currently TableView doesn't support any properties.

Section

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
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 cellstyles are inspired by the native ones. Just like the available accessories.

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`
detail	-	`string` or `number`	Detail value
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
leftDetailColor	#007AFF	`string`	Text color of left detail
rightDetailColor	#8E8E93	`string`	Text color of right detail
title	-	`string` or `number`	Title value
titleTextColor	#000	`string`	Text color of title
onPress	-	`func` or `false`	If set, cell will be automaticaly initialized with TouchableHighlight

CustomCell

While the Cell component is intended as reproduction of the original cell known from the UITableView, the CustomCell could be customized at the most. Use a CustomCell to define the whole content and its structure on your own. Pass any component as a children to a CustomCell. Have a look at the example below, which uses ActivityIndicatorIOS and SwitchIOS.

Prop	Default	Type	Description
contentContainerStyle	{}	`View.propTypes.style`	These styles will be applied to the content container which wraps all of the child views
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
onPress	-	`func` or `false`	If set, cell will be automaticaly initialized with TouchableHighlight

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
npm i
run /example/ios/example.xcodeproj via Xcode

Use case: About-screen

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

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

class Example 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
  },
});

AppRegistry.registerComponent('example', () => Example);