Conversation
| <View style={styles.screen}> | ||
| <Text style={styles.title}>Inbox</Text> |
There was a problem hiding this comment.
May not be relevant to this - but one thing to be mindful of
- On iOS, it usually traverses through the first descendant chain to find the relevant scrollview (it can be nested within other views, but needs to be first). This is used to adjust the scrollview for things like the header large title. The text before the scrollview breaks such functionality.
- For newer functionality, React Native screens also uses this approach to apply things like bottom tab insets.
So, in general it's better to avoid views before scrollview as usually they are used in a screen
| renderItem={({ item }) => { | ||
| return ( | ||
| <View style={styles.row}> | ||
| <Text style={styles.sender}>{item.sender}</Text> | ||
| <Text style={styles.preview}>{item.preview}</Text> | ||
| </View> | ||
| ) | ||
| }} |
There was a problem hiding this comment.
Would be better to extract to separate component with React.memo as per recommendation, no?
React compiler extracts the renderItem function, but the actual content is not memoized so it's not quiite the same https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAKgmDgBQCURwAOsUTAjrMZY0d0QDwBiAGwCGOADJ4KXHtwAmo4QF5gAWQCiAZQ0BBAOKaAvtJkBzVgEkcCALZjhAT2g5llAPoAaInkyyEAD1pFAD4iSgYmGW5vXz93Y0jBBEwTHAALZCIAJQB5AHVXAAk1c10CkiIAaiINNQAFbUztEmzMwuLSkjiIyIg0NDBWDMoc-KKSssrquoamlrbxkloAKi8ffy7IogNqI26ozDx8YUENOBgIQUFzNb9lNDwYCgBVTBZhWWuYokUfogBaACMRAA-EQAAxEDL3R44F5vD43XabSw2DQIAAOwhgoggMAAwhBrOjCElnMAaN8QrwAGp4BAAdyIFHsiWUzMSYAAdANMdicLiDEQAPRBJGRADWCHsaj8OGxuFxLkONkCIWV1k5eFkYpkLDWMBR1hcwC8VmsW1VdHiutY7FC1siNLpjPZCDZOBZ5E553pBiCDs2vDIsqZHtZwFdXIG+r9wHV3KSvhgBl4QuDOH9e02fHToc97s9XPRLAAbs7Y-HiwgywyU2n-BmAzxU7SGZns0RqA6DDrhe3O4wDCB3CA4IR7iYUCA8ETcTgiB70Qg6ERaoIoCZvNl0fhCGAtkQ0OdzQByABGwjPCEEf3R683mD+b1wfzHRLwiRgQtkkhwJ4A3IwjBhNIQpCm+6IfqIBCYCoEC+Bk9AgMcghIYOTLQWA9zkKu95bjuMFgNQ-7DuAqQQPS1xWDAmDHGAKBoHRCAGEAA
| keyExtractor={(item) => item.id} | ||
| onViewableItemsChanged={handleViewableItemsChanged} | ||
| renderItem={({ item }) => { | ||
| const isVisible = visibleIds.includes(item.id) |
There was a problem hiding this comment.
I maybe misremembering, but iirc flat list needs extraData if using state not present in data. Otherwise it may not consistently re-render.
The alternative is to use a context.
2 participants
Beginning to work on a new group of evals. Will follow-up with a group on FlashList and LegendList. Targeting around 5-7 groups per library to keep it contained.