Skip to content

Commit e00eabe

Browse files
docs: avoid list flickering
1 parent 7727c9f commit e00eabe

1 file changed

Lines changed: 24 additions & 2 deletions

File tree

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,9 @@ Activate animations on hover (web only):
208208
</PressablesConfig>
209209
```
210210

211-
### ScrollView Integration
211+
### Avoid highlight flicker effect in Scrollable List
212212

213-
Use `FlatList` from `react-native-gesture-handler` to prevent tap conflicts:
213+
Since pressto is built on top of the BaseButton from react-native-gesture-handler, it handles tap conflict detection automatically when used with a FlatList imported from react-native-gesture-handler.
214214

215215
```jsx
216216
import { FlatList } from 'react-native-gesture-handler';
@@ -230,6 +230,28 @@ function App() {
230230
}
231231
```
232232

233+
You can also use whatever Scrollable component you want, as long as it supports the renderScrollComponent prop.
234+
235+
```jsx
236+
import { WhateverList } from 'your-favorite-list-package'
237+
import { ScrollView } from 'react-native-gesture-handler';
238+
import { PressableScale } from 'pressto';
239+
240+
function App() {
241+
return (
242+
<WhateverList
243+
data={data}
244+
renderItem={({ item }) => (
245+
<PressableScale onPress={() => console.log(item)}>
246+
<Text>{item.title}</Text>
247+
</PressableScale>
248+
)}
249+
renderScrollComponent={(props) => <ScrollView {...props} />}
250+
/>
251+
);
252+
}
253+
```
254+
233255
---
234256

235257
## API Reference

0 commit comments

Comments
 (0)