1616
1717## Contents
1818
19- * [ Features] ( #features )
20- * [ Installation] ( #installation )
21- * [ Styles] ( #supported-styles )
22- * [ Examples] ( #examples )
23- * [ Customization] ( #customization )
19+ - [ Features] ( #features )
20+ - [ Installation] ( #installation )
21+ - [ Styles] ( #supported-styles )
22+ - [ Examples] ( #examples )
23+ - [ Customization] ( #customization )
2424
2525## Features
2626
27- * Look and feel of iOS TableView - ** because it is!** (with group/plain
27+ - Look and feel of iOS TableView - ** because it is!** (with group/plain
2828 tableview type, sections headers, etc)
29- * Display long lists of data (like country list) with no performance loss
30- * Built-in accessory types (checkmark or disclosure indicator)
31- * Pull to refresh!
32- * Automatic scroll to initial selected value during component initialization
29+ - Display long lists of data (like country list) with no performance loss
30+ - Built-in accessory types (checkmark or disclosure indicator)
31+ - Pull to refresh!
32+ - Automatic scroll to initial selected value during component initialization
3333 (autoFocus property)
34- * Automatic item selection with "checkmark" with old item de-selection
34+ - Automatic item selection with "checkmark" with old item de-selection
3535 (optionally), see demo, useful to select country/state/etc.
36- * Render Native Section Index Titles (sectionIndexTitlesEnabled property)
37- * Native JSON support for datasource. If you need to display large dataset,
36+ - Render Native Section Index Titles (sectionIndexTitlesEnabled property)
37+ - Native JSON support for datasource. If you need to display large dataset,
3838 generated Javascript will became very large and impact js loading time. To
3939 solve this problem the component could read JSON directly from app bundle
4040 without JS!
41- * Filter JSON datasources using NSPredicate syntax. For example you could select
41+ - Filter JSON datasources using NSPredicate syntax. For example you could select
4242 states for given country only (check demo)
43- * Create custom UITableView cells with flexible height using React Native syntax
43+ - Create custom UITableView cells with flexible height using React Native syntax
4444 (TableView.Cell tag)
45- * Use TableView as menu to navigate to other screens (check included demo, using
45+ - Use TableView as menu to navigate to other screens (check included demo, using
4646 react-navigation https://reactnavigation.org )
47- * Native editing mode for table - move/delete option is supported by using
47+ - Native editing mode for table - move/delete option is supported by using
4848 attributes canMove, canEdit for items/sections
4949
5050## Installation
5151
52521 . Installation
53- * Using npm: ` npm install react-native-tableview --save `
54- * Using yarn: ` yarn add react-native-tableview `
53+ - Using npm: ` npm install react-native-tableview --save `
54+ - Using yarn: ` yarn add react-native-tableview `
55552 . Link
56- * ` react-native link react-native-tableview `
57- * If fails, follow manual linking steps below
56+ - ` react-native link react-native-tableview `
57+ - If fails, follow manual linking steps below
58583 . (optional) If you will use JSON file, add it to iOS application bundle
59594 . Import it in your JS:
6060
6161 ``` js
62- import TableView from ' react-native-tableview'
62+ import TableView from ' react-native-tableview' ;
6363 ```
6464
6565### Manual Linking
70703 . In the XCode project navigator, select your project, select the Build Phases
7171 tab and in the Link Binary With Libraries section add libRNTableView.a
72724 . And in the Build Settings tab in the Search Paths/Header Search Paths section
73- add $(SRCROOT)/../node_modules/react-native-tableview (make sure it's
73+ add \ $ (SRCROOT)/../node_modules/react-native-tableview (make sure it's
7474 recursive).
7575
7676## Supported Styles
@@ -137,7 +137,6 @@ Checkmark can also be applied by adding the `selected` prop on the Item.
137137For a full list of props on all components check out
138138[ the typescript definitions file] ( ./src/index.d.ts ) .
139139
140-
141140### Methods
142141
143142#### ` scrollTo() `
@@ -230,7 +229,7 @@ render() {
230229``` jsx
231230// list spanish provinces and add 'All states' item at the beginning
232231
233- const country = ' ES'
232+ const country = ' ES' ;
234233
235234return (
236235 < View style= {{ flex: 1 }}>
@@ -244,7 +243,7 @@ return (
244243 onPress= {event => alert (JSON .stringify (event ))}
245244 / >
246245 < / View>
247- )
246+ );
248247```
249248
250249### Built-in editing
@@ -340,53 +339,53 @@ render() {
340339
341340The following style props are supported:
342341
343- * ` tableViewCellStyle `
344- * ` tableViewCellEditingStyle `
345- * ` separatorStyle `
346- * ` contentInset `
347- * ` contentOffset `
348- * ` scrollIndicatorInsets `
349- * ` cellLayoutMargins `
350- * ` cellSeparatorInset `
342+ - ` tableViewCellStyle `
343+ - ` tableViewCellEditingStyle `
344+ - ` separatorStyle `
345+ - ` contentInset `
346+ - ` contentOffset `
347+ - ` scrollIndicatorInsets `
348+ - ` cellLayoutMargins `
349+ - ` cellSeparatorInset `
351350
352351Colors:
353352
354- * ` textColor `
355- * ` tintColor `
356- * ` selectedTextColor `
357- * ` detailTextColor `
358- * ` separatorColor `
359- * ` headerTextColor `
360- * ` headerBackgroundColor `
361- * ` footerTextColor `
353+ - ` textColor `
354+ - ` tintColor `
355+ - ` selectedTextColor `
356+ - ` detailTextColor `
357+ - ` separatorColor `
358+ - ` headerTextColor `
359+ - ` headerBackgroundColor `
360+ - ` footerTextColor `
362361
363362Base font:
364363
365- * ` fontSize `
366- * ` fontWeight `
367- * ` fontStyle `
368- * ` fontFamily `
364+ - ` fontSize `
365+ - ` fontWeight `
366+ - ` fontStyle `
367+ - ` fontFamily `
369368
370369"Subtitle" font:
371370
372- * ` detailFontSize `
373- * ` detailFontWeight `
374- * ` detailFontStyle `
375- * ` detailFontFamily `
371+ - ` detailFontSize `
372+ - ` detailFontWeight `
373+ - ` detailFontStyle `
374+ - ` detailFontFamily `
376375
377376Header font:
378377
379- * ` headerFontSize `
380- * ` headerFontWeight `
381- * ` headerFontStyle `
382- * ` headerFontFamily `
378+ - ` headerFontSize `
379+ - ` headerFontWeight `
380+ - ` headerFontStyle `
381+ - ` headerFontFamily `
383382
384383Footer font:
385384
386- * ` footerFontSize `
387- * ` footerFontWeight `
388- * ` footerFontStyle `
389- * ` footerFontFamily `
385+ - ` footerFontSize `
386+ - ` footerFontWeight `
387+ - ` footerFontStyle `
388+ - ` footerFontFamily `
390389
391390## Images / Icons
392391
@@ -396,14 +395,14 @@ An `image` prop can be a string pointing to the name of an asset in your "Asset
396395Catalog". In this case an ` imageWidth ` prop is recommended.
397396
398397``` jsx
399- ; < Item image= " icon-success.png" imageWidth= {40 } / >
398+ < Item image= " icon-success.png" imageWidth= {40 } / > ;
400399```
401400
402401Alternatively, you can ` require ` the image from your local app code. In this case
403402an ` imageWidth ` is unnecessary.
404403
405404``` jsx
406- ; < Item image= {require (' ../images/icon-success.png' )} / >
405+ < Item image= {require (' ../images/icon-success.png' )} / > ;
407406```
408407
409408### Editable Complex Components
@@ -449,24 +448,25 @@ For example,
449448
450449class TableViewExampleCell extends React.Component {
451450 render() {
452- var style = { borderColor: '#aaaaaa', borderWidth: 1, borderRadius: 3 }
451+ var style = { borderColor: '#aaaaaa', borderWidth: 1, borderRadius: 3 };
453452
454453 // Fill the full native table cell height.
455- style.flex = 1
454+ style.flex = 1;
456455
457456 // All Item props get passed to this cell inside this.props.data. Use them to control the rendering, for example background color:
458457 if (this.props.data.backgroundColor !== undefined) {
459- style.backgroundColor = this.props.data.backgroundColor
458+ style.backgroundColor = this.props.data.backgroundColor;
460459 }
461460
462461 return (
463462 <View style={style}>
464463 <Text>
465- section:{this.props.section},row:{this.props.row},label:{this.props.data.label}
464+ section:{this.props.section},row:{this.props.row},label:
465+ {this.props.data.label}
466466 </Text>
467467 <Text> message:{this.props.data.message}</Text>
468468 </View>
469- )
469+ );
470470 }
471471}
472472```
@@ -482,17 +482,17 @@ For more examples, see examples/TableViewDemo.
482482#### Create list of items, passing props
483483
484484``` jsx
485- ; < Section canEdit= {true }>
485+ < Section canEdit= {true }>
486486 {this .props .items .map (function (item ) {
487487 return (
488488 < Item
489489 key= {' i' + item .data .date }
490490 label= {item .label }
491491 message= {item .message }
492492 / >
493- )
493+ );
494494 })}
495- < / Section>
495+ < / Section> ;
496496```
497497
498498Note that the props you pass must be primitive types: they cannot be objects.
0 commit comments