@impulse-ui-native/flat-list 15.0.5 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
# @impulse-ui-native/flat-list
|
|
2
|
-
|
|
3
|
-
Native React Native FlatList and a small hook for initial positioning with known row sizes.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```sh
|
|
8
|
-
pnpm add @impulse-ui-native/flat-list
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
React and React Native are peer dependencies. No theme provider is required. The toolkit also exports this package.
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import {
|
|
17
|
-
FlatList,
|
|
18
|
-
useFlatListInitialScroll,
|
|
19
|
-
} from "@impulse-ui-native/flat-list";
|
|
20
|
-
|
|
21
|
-
function OptionsList({ options, selectedIndex, rowHeight, renderItem }) {
|
|
22
|
-
const initialScroll = useFlatListInitialScroll({
|
|
23
|
-
itemSize: rowHeight,
|
|
24
|
-
initialScrollIndex: selectedIndex,
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
return <FlatList {...initialScroll} data={options} renderItem={renderItem} />;
|
|
28
|
-
}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
The hook returns only native `initialScrollIndex` and a stable `getItemLayout`. FlatList itself performs initial scrolling and virtualization. `FlatList` is the native component, so all native props, callbacks, and refs work directly.
|
|
32
|
-
|
|
33
|
-
| Hook option | Meaning |
|
|
34
|
-
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
35
|
-
| `itemSize` | Actual fixed row height, or item width for a horizontal list. Include row padding. |
|
|
36
|
-
| `initialScrollIndex` | Native initial row index. Omit when no target is selected. |
|
|
37
|
-
| `separatorSize` | Separator height/width, default 0. |
|
|
38
|
-
| `headerSize` | Known header height/width included in offsets, default 0. |
|
|
39
|
-
|
|
40
|
-
Use the same size for rendered rows and `itemSize`. For multiple columns, use the native row index, not an individual item index. For rows with different known sizes, provide your own accurate native `getItemLayout` instead of this fixed-size helper.
|
|
41
|
-
|
|
42
|
-
Initial positioning follows native FlatList's mount behavior. Remount the list when a fresh initial position is needed, and mount it after asynchronously loaded data is available. Changing the selected value after initialization does not scroll an existing list.
|
|
43
|
-
|
|
44
|
-
Exports: `FlatList`, `useFlatListInitialScroll`, `FlatListProps`, `FlatListRef`, and `UseFlatListInitialScrollOptions`.
|
|
45
|
-
|
|
46
|
-
## Agent and design reference
|
|
47
|
-
|
|
48
|
-
Start with the [capability guide](../../docs/design-system/capabilities/flat-list.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|
|
1
|
+
# @impulse-ui-native/flat-list
|
|
2
|
+
|
|
3
|
+
Native React Native FlatList and a small hook for initial positioning with known row sizes.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/flat-list
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
React and React Native are peer dependencies. No theme provider is required. The toolkit also exports this package.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import {
|
|
17
|
+
FlatList,
|
|
18
|
+
useFlatListInitialScroll,
|
|
19
|
+
} from "@impulse-ui-native/flat-list";
|
|
20
|
+
|
|
21
|
+
function OptionsList({ options, selectedIndex, rowHeight, renderItem }) {
|
|
22
|
+
const initialScroll = useFlatListInitialScroll({
|
|
23
|
+
itemSize: rowHeight,
|
|
24
|
+
initialScrollIndex: selectedIndex,
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
return <FlatList {...initialScroll} data={options} renderItem={renderItem} />;
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
The hook returns only native `initialScrollIndex` and a stable `getItemLayout`. FlatList itself performs initial scrolling and virtualization. `FlatList` is the native component, so all native props, callbacks, and refs work directly.
|
|
32
|
+
|
|
33
|
+
| Hook option | Meaning |
|
|
34
|
+
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
35
|
+
| `itemSize` | Actual fixed row height, or item width for a horizontal list. Include row padding. |
|
|
36
|
+
| `initialScrollIndex` | Native initial row index. Omit when no target is selected. |
|
|
37
|
+
| `separatorSize` | Separator height/width, default 0. |
|
|
38
|
+
| `headerSize` | Known header height/width included in offsets, default 0. |
|
|
39
|
+
|
|
40
|
+
Use the same size for rendered rows and `itemSize`. For multiple columns, use the native row index, not an individual item index. For rows with different known sizes, provide your own accurate native `getItemLayout` instead of this fixed-size helper.
|
|
41
|
+
|
|
42
|
+
Initial positioning follows native FlatList's mount behavior. Remount the list when a fresh initial position is needed, and mount it after asynchronously loaded data is available. Changing the selected value after initialization does not scroll an existing list.
|
|
43
|
+
|
|
44
|
+
Exports: `FlatList`, `useFlatListInitialScroll`, `FlatListProps`, `FlatListRef`, and `UseFlatListInitialScrollOptions`.
|
|
45
|
+
|
|
46
|
+
## Agent and design reference
|
|
47
|
+
|
|
48
|
+
Start with the [capability guide](../../docs/design-system/capabilities/flat-list.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|