{"id":6777,"date":"2021-04-23T10:53:47","date_gmt":"2021-04-23T05:23:47","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6777"},"modified":"2023-01-20T18:55:04","modified_gmt":"2023-01-20T13:25:04","slug":"swipeable","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/swipeable\/","title":{"rendered":"Swipeable"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Today we are going to discuss how we implement the swipe gesture in react native with the cell of the flat list and section list component in order to do some actions like update to-do and delete some data entry. It renders with its children within a panel and this component allows the children to swipe horizontally or right and perform some actions.<\/span><\/p>\n<p><b>How to use it?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">For using the swipeable component in our component so first, we have to install the <\/span><i><span style=\"font-weight: 400;\">react-native-gesture-handler <\/span><\/i><span style=\"font-weight: 400;\">package in our react native project and then import this component in the following way:<\/span><\/p>\n<p><strong>import Swipeable from &#8216;react-native-gesture-handler\/Swipeable&#8217;;<\/strong><\/p>\n<p><b>Example with code<\/b><\/p>\n<p><b><i>First step: <\/i><\/b><span style=\"font-weight: 400;\">first we write a code for a flat list.<\/span><\/p>\n<pre class=\"lang:default decode:true\">import React from 'react'\r\n\r\nimport { StyleSheet, Text, FlatList, SafeAreaView } from 'react-native'\r\n\r\nexport default function App() {\r\n\r\n\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;SafeAreaView style={styles.container}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={styles.title}&gt;TODOS&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={todos}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keyExtractor={item =&gt; item.id}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={({item, index})=&gt;(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style = {styles.item}&gt;{item.title}&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/SafeAreaView&gt;\r\n\r\n\u00a0\u00a0\u00a0)\r\n\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0\u00a0\u00a0container: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flex: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: \"stretch\"\r\n\r\n\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0title: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textAlign: \"center\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: 20,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: \"bold\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor: \"black\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#05db6a',\r\n\r\n\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0item: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 15,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderBottomWidth: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderBottomColor: '#f3f3f3'\r\n\r\n\u00a0\u00a0\u00a0}\r\n\r\n})<\/pre>\n<p>&nbsp;<\/p>\n<p><b><i>Second step: <\/i><\/b><span style=\"font-weight: 400;\">import the swipeable component in our component and wrap the child of the flat list with the Swipeable component.<\/p>\n<p><\/span><\/p>\n<pre class=\"lang:default decode:true \">import React from 'react'\r\n\r\nimport { StyleSheet, Text, FlatList, SafeAreaView } from 'react-native'\r\n\r\nimport { Swipeable } from 'react-native-gesture-handler'\r\n\r\n\r\n\r\n\r\nexport default function App() {\r\n\r\n\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;SafeAreaView style={styles.container}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={styles.title}&gt;TODOS&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={todos}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keyExtractor={item =&gt; item.id}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={({item, index})=&gt;(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Swipeable&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style =\u00a0 \u00a0 \u00a0 {styles.item}&gt;{item.title}&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Swipeable&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/SafeAreaView&gt;\r\n\r\n\u00a0\u00a0\u00a0)\r\n\r\n}\r\n\r\n\r\n\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0\u00a0\u00a0container: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flex: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: \"stretch\"\r\n\r\n\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0title: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textAlign: \"center\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: 20,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontWeight: \"bold\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor: \"black\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#05db6a',\r\n\r\n\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0item: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 15,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderBottomWidth: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderBottomColor: '#f3f3f3'\r\n\r\n\u00a0\u00a0\u00a0}\r\n\r\n})<\/pre>\n<p>&nbsp;<\/p>\n<p><b><i>Third step: <\/i><\/b><span style=\"font-weight: 400;\">now we have completed the use of the swipeable component but nothing can be changed so we have to pass some props like renderRightAction or renderLeftAction.<\/p>\n<p><\/span><\/p>\n<pre class=\"lang:default decode:true\">const leftAction = () =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style = {styles.leftAction}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style = {styles.textAction}&gt;Completed&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0}\r\n\r\n\r\n\r\n&lt;Swipeable\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderLeftActions = {leftAction}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSwipeableLeftOpen = {() =&gt; console.log(\"opening\")}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style = {styles.container}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style = {styles.item}&gt;{item.title}&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Swipeable&gt;<\/pre>\n<p><span style=\"font-weight: 400;\"><br \/>\n<strong>Now we have completed the code.<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we are going to discuss how we implement the swipe gesture in react native with the cell of the flat list and section list component in order to do some actions like update to-do and delete some data entry. It renders with its children within a panel and this component allows the children to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[412],"tags":[616,615,613,614],"class_list":["post-6777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-creating-swipeable","tag-react-native-gesture-handler","tag-swipeable","tag-swipeable-component"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Swipeable - InnovationM - Blog<\/title>\n<meta name=\"description\" content=\"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left &amp; right.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/swipeable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Swipeable - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left &amp; right.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/swipeable\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-23T05:23:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Swipeable\",\"datePublished\":\"2021-04-23T05:23:47+00:00\",\"dateModified\":\"2023-01-20T13:25:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/\"},\"wordCount\":175,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Swipeable.png\",\"keywords\":[\"Creating Swipeable\",\"React Native Gesture Handler\",\"Swipeable\",\"Swipeable component\"],\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/\",\"name\":\"Swipeable - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Swipeable.png\",\"datePublished\":\"2021-04-23T05:23:47+00:00\",\"dateModified\":\"2023-01-20T13:25:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left & right.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Swipeable.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Swipeable.png\",\"width\":960,\"height\":540,\"caption\":\"Swipeable\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/swipeable\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Swipeable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Swipeable - InnovationM - Blog","description":"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left & right.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/swipeable\/","og_locale":"en_US","og_type":"article","og_title":"Swipeable - InnovationM - Blog","og_description":"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left & right.","og_url":"https:\/\/www.innovationm.com\/blog\/swipeable\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-04-23T05:23:47+00:00","article_modified_time":"2023-01-20T13:25:04+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Swipeable","datePublished":"2021-04-23T05:23:47+00:00","dateModified":"2023-01-20T13:25:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/"},"wordCount":175,"commentCount":1,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png","keywords":["Creating Swipeable","React Native Gesture Handler","Swipeable","Swipeable component"],"articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/swipeable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/","url":"https:\/\/www.innovationm.com\/blog\/swipeable\/","name":"Swipeable - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png","datePublished":"2021-04-23T05:23:47+00:00","dateModified":"2023-01-20T13:25:04+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"The component allows for implementing swipeable rows or similar interaction. It renders container allows for horizontal swiping left & right.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/swipeable\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Swipeable.png","width":960,"height":540,"caption":"Swipeable"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/swipeable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Swipeable"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6777"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6777\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6780"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}