react-native-swipe-list-view

react-native-swipe-list-view

<SwipeListView> is a vertical FlatList (or SectionList) with rows that swipe open and closed. It handles the expected native behavior: closing rows when the list scrolls or when another row is opened.

It also exports <SwipeRow> for using a swipeable row on its own.

Full documentation: https://jessesessler.com/react-native-swipe-list-view/

---

v4

v4 is a full rewrite on TypeScript, react-native-gesture-handler v2, and react-native-reanimated v3 — gestures and animation now run on the UI thread. The component API is prop-for-prop compatible with v3 apart from a short list of breaking changes (new peer deps, removed dead ListView props, a changed swipeGestureEnded payload, and more).

Upgrading from v3? Read the Migration guide.

Installation

npm install react-native-swipe-list-view
npm install react-native-gesture-handler react-native-reanimated

react-native-gesture-handler and react-native-reanimated are peer dependencies (≥2.14.0 and ≥3.6.0). After installing them:

1. Add the Reanimated Babel plugin (must be last in the list) to babel.config.js:

   module.exports = {
       presets: ['module:@react-native/babel-preset'],
       plugins: ['react-native-reanimated/plugin'],
   };
   

2. Wrap your app root in GestureHandlerRootView:

   import { GestureHandlerRootView } from 'react-native-gesture-handler';
   
   export default function App() {
       return (
           <GestureHandlerRootView style={{ flex: 1 }}>
               {/* ... */}
           </GestureHandlerRootView>
       );
   }
   

3. Rebuild the native app (both are native modules).

See the official setup guides for gesture-handler and reanimated.

Requirements: react ≥18, react-native ≥0.73.

Quick start

…

Touchable rows: if your row is a Touchable* with an onPress, make sure renderItem returns the Touchable as the topmost element, otherwise the press and the swipe gesture will conflict.

// Good
renderItem={data => (
    <TouchableHighlight onPress={doSomething}>
        <View><Text>{data.item.text}</Text></View>
    </TouchableHighlight>
)}

Component APIs

• <SwipeListView />
• <SwipeRow />

Guides

• Migration v3 → v4
• Manually closing rows
• Per-row behavior
• Actions (swipe-to-delete / status changes)

Example app

A managed Expo app under example/ showcases every feature: basic list, SectionList, per-row config, standalone SwipeRow, swipe-to-delete, swipe-value-driven UI (both the legacy onSwipeValueChange and the recommended swipeAnimatedValue approach), actions, manual close, and accessibility.

cd example
npm install
npx expo start

License

MIT