React Native Flatlist - swipe to delete item
Swipeable flatlist item
What is react native reanimated?
React Native is a framework for building mobile apps using JavaScript and React. It allows you to build apps for both iOS and Android using a single codebase. With React Native, you can use the same components and methods you would use in a React web app, but the components are mapped to their mobile equivalents, so you can create a truly native user experience.
Reanimated is a library for building high-performance animations in React Native. It allows you to use JavaScript to animate your app's UI elements, rather than relying on the native animation libraries, which can often be clunky or difficult to work with. With Reanimated, you have more control over your animations, and you can create custom animations that wouldn't be possible with the native libraries alone.
Reanimated provides a set of primitives to create powerful animations which runs on the native thread, it also includes a lower-level declarative animation library, called Animated which uses an imperative programming model. When compared to native animated library its much more performant and flexible.
When using both React Native and Reanimated together, you can create engaging, smooth, and responsive user interfaces that look and feel like true native apps.
Advantages:
There are several advantages to using React Native and Reanimated together:
Cross-platform development: React Native allows you to build mobile apps for both iOS and Android using a single codebase. This can save a lot of time and effort, as you don't need to maintain separate codebases for each platform.
Performance: Reanimated allows you to create high-performance animations that run on the native thread, which means they're smoother and more responsive than animations created with JavaScript alone.
Flexibility: Reanimated provides a set of primitives that you can use to create custom animations that wouldn't be possible with the native libraries alone. This means you have more control over the look and feel of your app, and you can create truly unique and engaging user experiences.
Easy to learn: React Native uses a similar syntax to React, the most popular JavaScript library for building web applications. Therefore, developers already familiar with React, have an easy time learning React Native.
Large community: React Native and React has a large, active community of developers who contribute to the ecosystem by creating and maintaining libraries and tools. Therefore, you can leverage these contributions to increase the efficiency and quality of your codebase.
Reusability of code: With React Native, you can reuse up to 99% of the codebase of your web application, which helps you speed up development and maintainability.
Continuous integration and deployment: React Native apps can be easily integrated with popular CI/CD tools like Fastlane, CircleCI, Jenkins, and many more.
Code for Swipeable flatlist list item:
import React, { useRef } from "react";
import { View, FlatList, StyleSheet, Text, Dimensions } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
const deviceWidth = Dimensions.get('window').width;
const threshold = -deviceWidth * 0.4;
const FlatListItem = ({ item }) => {
const dragX = useSharedValue(0);
const height = useSharedValue(65);
const opacity = useSharedValue(1);
const gestureHander = useAnimatedGestureHandler({
onActive: (e) => {
dragX.value = e.translationX;
},
onEnd: (e) => {
if (threshold < e.translationX) {
dragX.value = withTiming(0);
} else {
dragX.value = withTiming(-deviceWidth);
height.value = withTiming(0);
opacity.value = withTiming(0);
}
}
});
const itemContainerStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateX: dragX.value,
}
],
height: height.value,
opacity: opacity.value,
marginTop: opacity.value === 1 ? 10 : 0
}
})
return (
<PanGestureHandler onGestureEvent={gestureHander}>
<Animated.View style={[styles.itemContainer, itemContainerStyle]}>
<Text style={styles.itemText}>Swipeable item {item}</Text>
</Animated.View>
</PanGestureHandler>
);
};
const SwipeableFlatlist = () => {
return (
<View style={styles.container}>
<Text style={styles.heading}>Swipe to delete</Text>
<FlatList
style={styles.flatlistStyle}
data={[1, 2, 3, 4, 5]}
renderItem={({ item }) => <FlatListItem item={item} />}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(255,255,255, 0.8)",
},
flatlistStyle: { backgroundColor: "rgba(190,0,90, .2)" },
itemContainer: {
backgroundColor: "white",
borderRadius: 10,
marginHorizontal: 16,
shadowOpacity: 0.2,
shadowOffset: {
width: 0,
height: 5,
},
},
itemText: {
padding: 20,
fontSize: 20,
},
heading: {
padding: 15,
fontSize: 26,
},
});
export default SwipeableFlatlist;
Youtube link: https://youtu.be/eQAXkuyjpwY
In conclusion, "Swipe to delete" feature is an essential part of any mobile app and is widely used in applications like email clients, to-do lists, social media apps and many others. With React Native and Reanimated, you can easily create a smooth and responsive swipe to delete feature that looks and feels like a true native app.
Reanimated provides a set of primitives that can be used to create powerful animations and gestures, which can be used to implement swipe to delete feature. One common way to implement swipe to delete is by using the PanResponder component provided by React Native, which allows you to detect gestures such as swipe, drag, and pinch. You can use the PanResponder in conjunction with the Animated library provided by Reanimated, to animate the position and size of the elements on the screen, giving you the feel of native animations.
It's also possible to use libraries built on top of React Native and Reanimated, like react-native-gesture-handler, which can simplify the implementation and make it more accessible for developers.
When implementing a swipe to delete feature, it's important to consider the user experience and make it easy for users to understand and use. Providing clear visual cues, such as a background color change on swipe, and clear confirmation prompts before deletion can help make the feature more user-friendly.
About the Creator
Aashik Hameed AJ
Im a software engineer.
Keep reading
More stories from Aashik Hameed AJ and writers in Education and other communities.
Animated loading button in react native using reanimated
What is React Native? React Native is a framework for building native mobile apps using JavaScript and the React library. It is possible to use animation in React Native apps by using the Animated component provided by the framework.
By Aashik Hameed AJ3 years ago in Education
What should you do if you accidentally cut off your finger
After a long day helping patients in the emergency room, Priya is calmly preparing dinner when her knife slips and cleanly severs her finger. Fortunately, as an ER doctor, she knows exactly how to respond. First, she carefully cleans the wound with a wet paper towel and bandages her finger— making sure not to wrap it too tightly. To manage the pain, she knows not to take ibuprofen, which could interfere with clotting, and instead chooses acetaminophen. Then she gently rinses the severed finger, wraps it in a clean, slightly moist towel, and places it in a cooler while avoiding any direct contact with ice. Finally, she rushes to the hospital, where, fortunately, a skilled hand surgeon is available. Thanks to the clean cut and Priya's quick reaction, the surgeon can begin immediately. They set the bones and secure them with wires before repairing the tendons, nerves, blood vessels, and finally, the skin. The entire procedure is completed in about eight hours, and after a few months of occupational therapy, Priya's hand is fully functional again. This represents the ideal outcome for reattaching a body part. Unfortunately, it’s also extremely rare— and not only because most people aren’t as prepared as Priya. In reality, many complications arise with most accidental amputations. First, there’s the injury itself. Unlike Priya's clean cut, most traumatic amputations happen in car crashes or industrial accidents that cause severe, uneven tissue damage and contaminate the wound in ways that prevent reattachment. Additionally, more than half of all limb amputations in the United States are caused by disease, and limbs removed for medical reasons clearly aren’t safe to reattach. Then comes preserving the limb. When a body part is severed, its blood circulation stops, cutting off oxygen and essential nutrients. Surprisingly, severed tissues can survive for a limited time without these resources. Keeping them cool further slows tissue death, generally giving surgeons a 6-to-12-hour window for reattachment. But once the tissues die, reconnecting them won’t restore function. This narrow timeline is especially difficult for surgeons. Because of the challenges already mentioned, reattachment surgeries are relatively uncommon. As a result, many hospitals lack the tools and expertise needed to perform these time-sensitive procedures. And even when they can, nerve repair remains extremely complex. With perfectly clean cuts, surgeons may attempt to stitch nerves back together directly. When a cut is jagged, they might use nerve conduits— tunnels between nerve ends that allow nerves to reconnect gradually. However, neither these nor any other surgical methods reliably restore full movement and sensation. These limitations make successful reattachment unlikely. Fortunately, medical technology has developed another reliable solution for amputation: prosthetics. Today, prostheses come in many forms designed to replace different body parts. Prosthetic legs perform well for walking and running. Prosthetic arms have long struggled to replicate fine hand movements. However, modern myoelectric prostheses can detect electrical signals from nearby muscles and translate them into more precise movements. Perhaps the most dramatic advancement in prosthetic technology is transcutaneous osseointegration. First successfully performed in 1990, this procedure surgically anchors a metal implant into the remaining bone. Over time, the bone grows into the metal’s surface, creating a permanent connection. These implants extend through the skin and attach to prosthetic devices, solving several common prosthetic challenges. Where traditional prosthetics can feel heavy, a direct skeletal connection makes their weight feel more natural. Osseointegrated prosthetics are also less likely to irritate the skin and can provide more sensation by transmitting vibrations through the implant to the bone. Even with these advances, not everyone chooses to replace or reattach a lost limb. After an amputation, some people prefer to rely on their remaining limbs, with or without the support of mobility aids and other adaptive equipment.Follow for more stories like this.
By Munesh Yadav2 days ago in Education
How Social Media Helps Small Businesses Grow Faster
Small businesses need smart ways to grow without large budgets. Social media offers one of the fastest and most affordable paths. When used well, it helps small brands reach new customers, build trust, and drive steady sales. Growth that once took years can now happen in months.
By Michael Kazma2 days ago in Education
The Devil's Cut
“Comrade, finally you’re awake.” The voice was smooth, sensual. A flickering incandescent bar was all that lit the white, sterile room. All Vladimir remembered was everything going black. He tried to move his arms and found them strapped to the gurney.
By Matthew J. Fromm4 days ago in Fiction
Comments
There are no comments for this story
Be the first to respond and start the conversation.