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
footer	-	`string`	Footer value
footerTintColor	#6d6d72	`string`	Text color of footer
header	-	`string`	Header value
headerTintColor	#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
cellstyle	Basic	`string`	Predefined styles: `Basic`, `RightDetail`, `LeftDetail`, `Subtitle`
cellTintColor	#fff	`string`	Background color of cell
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
title	-	`string` or `number`	Title value
titleTintColor	#000	`string`	Text color of title
onPress	-	`func` or `false`	If set, cell will be automaticaly initialized with TouchableHighlight

CustomCell

CustomCells allow you to define the whole content on your own. This makes it possible to use components like ActivityIndicatorIOS or SwitchIOS as seen in the example below.

Prop	Default	Type	Description
cellHeight	44	`number`	Set cell height
cellTintColor	#fff	`string`	Background color of cell
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, {
  ActivityIndicatorIOS,
  AppRegistry,
  Component,
  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" titleTintColor="#007AFF" onPress={() => console.log('open Help/FAQ')}/>
              <Cell title="Contact Us" titleTintColor="#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);