/ UI

Native iOS UITableView for React Native with JSON support and more

Native iOS UITableView for React Native with JSON support and more

react-native-tableview

Native iOS UITableView for React Native with JSON support.

aksonovreact-native-tableview

Features

  1. Look and feel native iOS TableView (with group/plain tableview type, sections headers, etc)
  2. Display long lists of data (like country list) - built-in list view has performance issues for long lists
  3. Use built-in accessory types (checkmark or disclosure indicator)
  4. Automatic scroll to initial selected value during component initialization (autoFocus property)
  5. Automatic item selection with "checkmark" with old item de-selection (optionally), see demo, useful to select country/state/etc.
  6. Render Native Section Index Titles (sectionIndexTitlesEnabled property)
  7. Native JSON support for datasource. If you need to display large dataset, generated Javascript will became very large and impact js loading time. To solve this problem the component could read JSON directly from app bundle without JS!
  8. Filter JSON datasources using NSPredicate syntax. For example you could select states for given country only (check demo)
  9. Create custom UITableView cells with flexible height using React Native syntax (TableView.Cell tag)
  10. Use tableview as menu to navigate to other app screen (check included demo, it uses flux router https://github.com/aksonov/react-native-router-flux)
  11. Native editing mode for table - move/delete option is supported by using attributes canMove, canEdit for items/sections

Installation

  1. npm install react-native-tableview --save
  2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  3. add ./node_modules/react-native-tableview/RNTableView.xcodeproj
  4. In the XCode project navigator, select your project, select the Build Phases tab and in the Link Binary With Libraries section add libRNTableView.a
  5. And in the Build Settings tab in the Search Paths/Header Search Paths section add $(SRCROOT)/../node_modules/react-native-tableview (make sure it's recursive).
  6. (optional) If you will use JSON file, add it to iOS application bundle
  7. import TableView from 'react-native-tableview'

GitHub