Pull Down to Refresh and Table View Component for React Native

Shuangzuan He joined the army of React Native Components developers by open sourcing two of them: a Pull Down to Refresh and Table View.

RCTRefreshControl on GitHub

A pull down to refresh control for react native.

RCTRefreshControl


RCTTableView on GitHub

A table view component for react native.

"use strict";

var React = require("react-native");
var TableView = require("RCTTableView");
var { AppRegistry, StyleSheet, Text, View } = React;

var RCTTableViewDemo = React.createClass({
  render: function () {
    return (
      <TableView
        style={styles.tableView}
        tableViewStyle={TableView.Style.Grouped}
        tableViewCellStyle={TableView.CellStyle.Value1}
        cellForRowAtIndexPath={[
          [
            {
              textLabel: {
                text: "Section 1: A",
                // textColor: 'red'
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
            {
              textLabel: {
                text: "Section 1: B",
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
          ],
          [
            {
              textLabel: {
                text: "Section 2: C",
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
            {
              textLabel: {
                text: "Section 2: D",
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
          ],
          [
            {
              textLabel: {
                text: "Section 3: E",
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
            {
              textLabel: {
                text: "Section 3: F",
              },
              detailTextLabel: {
                text: "This is detail",
              },
            },
          ],
        ]}
        onPress={(event) => console.log(event.nativeEvent.indexPath)}
      />
    );
  },
});

var styles = StyleSheet.create({
  tableView: {
    flex: 1,
  },
});

AppRegistry.registerComponent("RCTTableViewDemo", () => RCTTableViewDemo);