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
{{ message }}
Repository navigation
Commit 8ab19d2
Browse filesBrowse the repository at this point in the historyBrowse files
If you were using `inverted` prop (common in chat apps), replace it with `maintainVisibleContentPosition` and reverse your data array:
81
-
82
-
```diff
83
-
// v1 - Inverted list for chat
84
-
<FlashList
85
-
data={messages}
86
-
renderItem={renderMessage}
87
-
- inverted={true}
88
-
- onEndReached={handler}
89
-
/>
90
-
91
-
// v2 - Use maintainVisibleContentPosition
92
-
<FlashList
93
-
data={reversedMessages}
94
-
renderItem={renderMessage}
95
-
+ maintainVisibleContentPosition={{
96
-
+ autoscrollToBottomThreshold: 0.2,
97
-
+ startRenderingFromBottom: true,
98
-
+ }}
99
-
+ onStartReached={handler}
100
-
/>
101
-
```
102
-
103
-
### Step 5: Migrate MasonryFlashList to FlashList with masonry prop
76
+
### Step 4: Migrate MasonryFlashList to FlashList with masonry prop
104
77
105
78
```diff
106
79
// v1
@@ -126,7 +99,7 @@ If you were using `inverted` prop (common in chat apps), replace it with `mainta
126
99
127
100
Note: `getColumnFlex` from MasonryFlashList is not supported in v2.
128
101
129
-
### Step 6: Update Ref Types
102
+
### Step 5: Update Ref Types
130
103
131
104
The ref type for FlashList has changed from `FlashList` to `FlashListRef`:
132
105
@@ -146,6 +119,6 @@ The ref type for FlashList has changed from `FlashList` to `FlashListRef`:
146
119
/>
147
120
```
148
121
149
-
### Step 7: Replace CellContainer with View
122
+
### Step 6: Replace CellContainer with View
150
123
151
124
`CellContainer` is no longer exported in v2. Replace it with React Native's `View`. Apps forwarding custom `CellRendererComponent` might need this change.
0 commit comments