You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This class facilitates the use of the [`ListView`](https://facebook.github.io/react-native/docs/listview.html) class. Please make sure you read this [note](#stylesnote) before using it.
132
-
133
-
import { ListViewHelper } from "react-native-common-utils";
134
-
135
-
A minimal usage example rendering a ListView with 3 items (10, 20, "abc"):
136
-
137
-
class Item extends React.Component {
138
-
render() {
139
-
return <Text>{this.props.data}</Text>;
140
-
}
141
-
}
142
-
143
-
class Test extends React.Component {
144
-
constructor(props) {
145
-
super(props);
146
-
147
-
this.lv = new ListViewHelper([10, 20, "abc"], Item);
148
-
}
149
-
150
-
render() {
151
-
return this.lv.createListView();
152
-
}
153
-
}
154
-
155
-
**Please keep in mind** that `ListViewHelper` uses the `@autobind` annotation, so if you extend it don't forget to use this annotation on your class as well.
156
-
157
-
Class methods:
158
-
159
-
- constructor()
160
-
161
-
Creates and initializes a class instance. All parameters are optional.
162
-
163
-
this.lv = new ListViewHelper(
164
-
items, // Array with data for items.
165
-
itemType, // A React Native component to render items.
166
-
ref // String. Used as a ref for the ListView.
167
-
);
168
-
169
-
- setItems()
170
-
171
-
Specifies items data.
172
-
173
-
this.lv.setItems([{
174
-
name: "Leslie",
175
-
kind: "dog"
176
-
}, {
177
-
name: "Alice",
178
-
kind: "cat"
179
-
}]);
180
-
181
-
You can pass an `Array` as the data for a particular item. In this case the array's first element must be a React Native component to render this item and its second element must be the data itself. This allows different React Native components to be used for different items.
182
-
183
-
this.lv.setItems([{
184
-
name: "Leslie",
185
-
kind: "dog"
186
-
}, {
187
-
name: "Alice",
188
-
kind: "cat"
189
-
},
190
-
[Hippogriff, {
191
-
name: "Buckbeak"
192
-
}]]);
193
-
194
-
In this case the component set by the `constructor()` or `setItemType()` will be used for the first two items while the component `Hippogriff` will be used for the third one.
195
-
196
-
- setItemType()
197
-
198
-
Sets a React Native component to render items.
199
-
200
-
- setCallback()
201
-
202
-
Sets a callback function to be invoked from an item-rendering component in response to a user action.
Sets a JS-object to be passed to **each** item in the list view.
238
-
239
-
this.lv.setRowParams({
240
-
owner: "Danny"
241
-
});
242
-
243
-
- renderRow()
244
-
245
-
Renders an item. See [`ListView.renderRow()`](https://facebook.github.io/react-native/docs/listview.html#renderrow) for parameter description .
246
-
247
-
Apart from the item data, each item receives the following:
248
-
- parameters from `renderRow()`;
249
-
- itemCount: the number of items in the list view;
250
-
- callbacks: the callbacks `Map`;
251
-
- onPress: the callback set by `setOnPress()`;
252
-
- onLongPress: the callback set by `setOnLongPress()`;
253
-
- params: the JS-object set by `setRowParams()`.
254
-
255
-
All these can be referenced from within an item-rendering component through `this.props`.
256
-
257
-
- renderSeparator()
258
-
259
-
Renders a row separator, invoking `renderLastRowSeparator()` for the last row and `renderRowSeparator()` for all the others.
260
-
261
-
See [`ListView.renderSeparator()`](https://facebook.github.io/react-native/docs/listview.html#renderseparator) for parameter description.
262
-
263
-
- renderLastRowSeparator()
264
-
265
-
Renders the last row separator simply returning `null`.
266
-
267
-
- renderRowSeparator()
268
-
269
-
Renders a row separator returning a `View` with a style set by `setSeparatorStyle()`.
270
-
271
-
- setEmptyItemsRenderer()
272
-
273
-
Sets a callback to be invoked if there are no items in this list view. The callback must return a renderable object.
274
-
275
-
- createListView()
276
-
277
-
Returns a `ListView` if there are any items set. Otherwise it invokes the callback set by `setEmptyItemsRenderer()` or simply returns `null` if the latter is undefined.
A collection of different `static` utility methods extending [StaticUtils](https://www.npmjs.com/package/simple-common-utils#staticutils) from [simple-common-utils](https://www.npmjs.com/package/simple-common-utils).
@@ -418,18 +262,6 @@ Apart from these, there are <a name="stylescomplexstyles"></a>styles that depend
418
262
419
263
The same as `scene` but with margins set to `marginPadding`.
420
264
421
-
- listView
422
-
423
-
A style for [`ListViewHelper`](#listviewhelper) and list view items.
424
-
425
-
- $itemHeight
426
-
427
-
A list view item height.
428
-
429
-
- separatorStyle
430
-
431
-
A style for list view item separators.
432
-
433
265
- screen
434
266
435
267
Used to style top-level views.
@@ -464,6 +296,7 @@ Font sizes are calculated as `baseFontSize + numberOfSteps * step`. `font` conta
464
296
465
297
Version number|Changes
466
298
-|-
299
+
v7.0.0|**Backwards-incompatible changes**:<br>1. `ListViewHelper` / `styles.listView` removed.<br>2. `AlterStyles` removed.<br>3. `core-decorators` and `@autobind` are no longer used.
467
300
v6.0.1|1. `AlterStyles` deprecated in favour of `combineStyles()` from `react-native-common-ui-components/js/styles.js`.<br>2. `@babel/plugin-proposal-decorators` is specified as a dev dependency and the postinstall script is deleted.
468
301
v6.0.0|1. The latest version of [react-native-localization](https://www.npmjs.com/package/react-native-localization) is specified in `package.json`.<br>2. **Backwards-incompatible change** in `strings.js`: `strings.formatString()` is no longer available if a sub-object name was specified. `strings.all.formatString()` has to be used instead.
469
302
v5.1.0|1. An iOS-only bug fixed in `ApplicationSession.manage()`.<br>2. State changes can be optionally logged to the console. An argument`ApplicationSession._setSessionType()`
0 commit comments