{"id":681,"date":"2021-06-10T16:40:16","date_gmt":"2021-06-10T15:40:16","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=681"},"modified":"2021-06-10T16:40:18","modified_gmt":"2021-06-10T15:40:18","slug":"react-native-make-a-post-request-with-axios-and-reqres-api","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/","title":{"rendered":"React Native: Make a POST Request With Axios And Reqres API"},"content":{"rendered":"\n<p>When working with React Native applications, you will often want to make API requests and calls either for Login, Registration or perhaps you might just want to retrieve and list out items from a database. <\/p>\n\n\n\n<p>In this tutorial we shall be making a POST request in React Native using Axios and Reqres API.<\/p>\n\n\n\n<p><strong>API<\/strong>\u00a0is the acronym for <strong>Application Programming Interface<\/strong>. It is a software intermediary that allows two applications to talk to each other usually from a single database. <\/p>\n\n\n\n<p>A REST API allows you to push and pull (or retrieve) data from a database without you needing the database credentials. We have already talked extensively on REST APIs<a href=\"https:\/\/codeflarelimited.com\/blog\/working-with-fetch-api\/\" target=\"_blank\" rel=\"noreferrer noopener\"> here<\/a>.<\/p>\n\n\n\n<p>Let us see how we can create a registration form and submit the data to an API using Axios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-axios\">What is Axios?<\/h3>\n\n\n\n<p><a href=\"https:\/\/axios-http.com\/docs\/intro\" target=\"_blank\" rel=\"noreferrer noopener\">According to their website<\/a>, &#8220;<strong><em>Axios is a\u00a0promise-based\u00a0HTTP Client for\u00a0<code>node.js<\/code>\u00a0and the browser<\/em><\/strong>&#8220;. It is based on the\u00a0<code>XMLHttpRequest<\/code>\u00a0interface provided by browsers. Good thing is we can also use Axios to make API calls in our React Native application.<\/p>\n\n\n\n<p>In this demonstration, we shall be using <a href=\"https:\/\/reqres.in\/\" target=\"_blank\" rel=\"noreferrer noopener\">Reqres<\/a> to make our React Native API request. Reqres helps you test your frontend on a real API. It gives you fake and helps you develop with real response codes, GET, POST, PUT &amp; DELETE all included.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-react-native-api-requests\">Make React Native API Requests<\/h3>\n\n\n\n<p>First, let us create the form input with just basic styling.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">render(){\n const {email, password, loading} = this.state;\nreturn(                     \n &lt;Input\n  autoCapitalize=\"none\"\n  autoCorrect={false}\n  returnKeyType=\"next\"\n  onChangeText={(value) => this.onChangeHandle('username', value)} \/>\n \n &lt;Input\n  secureTextEntry={this.state.hidePassword}\n  autoCapitalize=\"none\"\n  autoCorrect={false}\n  returnKeyType=\"next\"\n  onChangeText={(value) => this.onChangeHandle('password',   value)} \/>\n\n &lt;TouchableOpacity \n  style={{\n  ...styles.btn,\n  backgroundColor: loading ? '#ddd' : '#A40606',\n  }}\n  onPress={() => this.doRegister()} >\n\n &lt;Text style={styles.loginText}> \n {loading ? 'Loading ...' : 'Click Here to Register'}\n &lt;\/Text>\n &lt;\/TouchableOpacity>\n)\n}\n\nconst styles = StyleSheet.create({\n      btn: {\n      alignSelf: 'stretch',\n      alignItems: 'center',\n      padding: 20,\n      marginTop: 20,\n      borderRadius: 25,\n      backgroundColor: '#A40606',\n    },\n   loginText: {\n      color: '#333',\n      fontSize: 17,\n      fontWeight: 'bold',\n      textTransform: 'uppercase',\n    },\n});<\/code><\/pre>\n\n\n\n<p>Next, we need to listen for input change. So we will create a function that does that. But in order to do that, we first need to create our state variables like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">constructor(props){\nsuper(props);\nthis.state = {\nemail: '',\npassword: '',\nloading: false\n}\n}\n\n onChangeHandle(state, value) {\n    this.setState({\n      [state]: value,\n    });\n  }<\/code><\/pre>\n\n\n\n<p>Moving forward, we then have to create the function that will handle our form registration.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">        doRegister() {\n          const {email, password} = this.state;\n          if (email &amp;&amp; password) {\n\n            const req = {\n              email: email,\n              password: password,\n            };\n\n            this.setState({\n              loading: true,\n            });\n\n            axios.post('https:\/\/reqres.in\/api\/register', req).then(\n              (response) => {\n                this.setState({\n                  loading: false,\n                });\n\n                if (response.status === 200) {\n                   Alert.alert(\"Registration successful\", response.message);\n                   \/\/do something\n\n                } else {\n                  alert('An error occurred. Please try again later.');\n                }\n\n              },\n\n              (err) => {\n                this.setState({\n                  loading: false,\n                });\n\n                Alert.alert('Could not establish connection',err.message);\n              },\n\n            );\n\n          } else {\n            alert('Please complete registration');\n          }\n        }<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"179\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-15.43.31.png\" alt=\"\" class=\"wp-image-684\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-15.43.31.png 638w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-15.43.31-300x84.png 300w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure>\n\n\n\n<p>This is the response that you should get from the Reqres API and you should also use these values for the email and password fields.<\/p>\n\n\n\n<p><strong>Full code for our React Native API request:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, {Component} from 'react';\nimport {\n  View,\n  Text,\n  KeyboardAvoidingView,\n  TouchableOpacity,\n  Alert,\n  StyleSheet,\n} from 'react-native';\nimport axios from 'axios';\n\nclass Register extends Component {\n \nconstructor(props){\nsuper(props);\nthis.state = {\nemail: '',\npassword: '',\nloading: false\n}\n}\n\n onChangeHandle(state, value) {\n    this.setState({\n      [state]: value,\n    });\n  }\n\n    doRegister() {\n          const {email, password} = this.state;\n          if (email &amp;&amp; password) {\n\n            const req = {\n              email: email,\n              password: password,\n            };\n\n            this.setState({\n              loading: true,\n            });\n\n            axios.post('https:\/\/reqres.in\/api\/register', req).then(\n              (response) => {\n                this.setState({\n                  loading: false,\n                });\n\n                if (response.status === 200) {\n                   Alert.alert(\"Registration successful\", response.message);\n                   \/\/do something\n\n                } else {\n                  alert('An error occurred. Please try again later.');\n                }\n\n              },\n\n              (err) => {\n                this.setState({\n                  loading: false,\n                });\n\n                Alert.alert('Could not establish connection',err.message);\n              },\n\n            );\n\n          } else {\n            alert('Please complete registration');\n          }\n        }\n\n\n render(){\n const {email, password, loading} = this.state;\nreturn(\n&lt;View>\n&lt;KeyboardAvoidingView style={styles.wrapper}>                     \n &lt;Input\n  autoCapitalize=\"none\"\n  autoCorrect={false}\n  returnKeyType=\"next\"\n  onChangeText={(value) => this.onChangeHandle('username', value)} \/>\n \n &lt;Input\n  secureTextEntry={this.state.hidePassword}\n  autoCapitalize=\"none\"\n  autoCorrect={false}\n  returnKeyType=\"next\"\n  onChangeText={(value) => this.onChangeHandle('password',   value)} \/>\n\n &lt;TouchableOpacity \n  style={{\n  ...styles.btn,\n  backgroundColor: loading ? '#ddd' : '#A40606',\n  }}\n  onPress={() => this.doRegister()} >\n\n &lt;Text style={styles.loginText}> \n {loading ? 'Loading ...' : 'Click Here to Register'}\n &lt;\/Text>\n &lt;\/TouchableOpacity>\n&lt;\/KeyboardAvoidingView>\n&lt;\/View>\n)\n}\n}\n\nconst styles = StyleSheet.create({\n      btn: {\n      alignSelf: 'stretch',\n      alignItems: 'center',\n      padding: 20,\n      marginTop: 20,\n      borderRadius: 25,\n      backgroundColor: '#A40606',\n    },\n   loginText: {\n      color: '#333',\n      fontSize: 17,\n      fontWeight: 'bold',\n      textTransform: 'uppercase',\n    },\n});\n\nexport default Register;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/1623337117481-removebg-preview.png\" alt=\"\" class=\"wp-image-686\" width=\"262\" height=\"423\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/1623337117481-removebg-preview.png 393w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/1623337117481-removebg-preview-186x300.png 186w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.codeflare\" target=\"_blank\" rel=\"noreferrer noopener\">Download free mobile app templates for your personal and school projects<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with React Native applications, you will often want to make API requests and calls either for<\/p>\n","protected":false},"author":1,"featured_media":685,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Native: Make a POST Request With Axios And Reqres API<\/title>\n<meta name=\"description\" content=\"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native: Make a POST Request With Axios And Reqres API\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-10T15:40:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-10T15:40:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png\" \/>\n\t<meta property=\"og:image:width\" content=\"892\" \/>\n\t<meta property=\"og:image:height\" content=\"554\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"React Native: Make a POST Request With Axios And Reqres API\",\"datePublished\":\"2021-06-10T15:40:16+00:00\",\"dateModified\":\"2021-06-10T15:40:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/\"},\"wordCount\":335,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Screenshot-2021-06-10-at-16.15.16.png\",\"articleSection\":[\"react native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/\",\"name\":\"React Native: Make a POST Request With Axios And Reqres API\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Screenshot-2021-06-10-at-16.15.16.png\",\"datePublished\":\"2021-06-10T15:40:16+00:00\",\"dateModified\":\"2021-06-10T15:40:18+00:00\",\"description\":\"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Screenshot-2021-06-10-at-16.15.16.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Screenshot-2021-06-10-at-16.15.16.png\",\"width\":892,\"height\":554},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-make-a-post-request-with-axios-and-reqres-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"react native\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React Native: Make a POST Request With Axios And Reqres API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native: Make a POST Request With Axios And Reqres API","description":"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.","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:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/","og_locale":"en_US","og_type":"article","og_title":"React Native: Make a POST Request With Axios And Reqres API","og_description":"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.","og_url":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-06-10T15:40:16+00:00","article_modified_time":"2021-06-10T15:40:18+00:00","og_image":[{"width":892,"height":554,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"React Native: Make a POST Request With Axios And Reqres API","datePublished":"2021-06-10T15:40:16+00:00","dateModified":"2021-06-10T15:40:18+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/"},"wordCount":335,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","articleSection":["react native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/","url":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/","name":"React Native: Make a POST Request With Axios And Reqres API","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","datePublished":"2021-06-10T15:40:16+00:00","dateModified":"2021-06-10T15:40:18+00:00","description":"In this tutorial we shall see at how to make a React Native API request using Axios and Reqres. Axios is a promise-based HTTP Client.","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","width":892,"height":554},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-make-a-post-request-with-axios-and-reqres-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"react native","item":"https:\/\/codeflarelimited.com\/blog\/react-native\/"},{"@type":"ListItem","position":3,"name":"React Native: Make a POST Request With Axios And Reqres API"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-10-at-16.15.16.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":2,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/681\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/681\/revisions\/687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/685"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}