{"id":279,"date":"2021-01-07T04:19:41","date_gmt":"2021-01-07T04:19:41","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=279"},"modified":"2021-01-07T04:19:42","modified_gmt":"2021-01-07T04:19:42","slug":"react-native-how-to-add-background-image","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/","title":{"rendered":"React Native: How to add Background Image"},"content":{"rendered":"\n<p>As a software developer, there are times when you may need to set background image for your application based on the app requirements, React Native allows you to set background image for your app nice and easy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Let&#8217;s see how.<\/h3>\n\n\n\n<p>First, you need to import the ImageBackground component from React Native like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\nimport { ImageBackground, StyleSheet, Text, View } from \"react-native\";<\/code><\/pre>\n\n\n\n<p>Secondly, you need to import the image that you want to use as the background like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import image from 'assets\/images\/image.png';<\/code><\/pre>\n\n\n\n<p>This example references the image path assets\/images\/image.png, this gives the folder path where your image is stored and you can adjust yours accordingly.<\/p>\n\n\n\n<p>Finally, you add your image to the background using the ImageBackground component like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;ImageBackground source={image}>\n    &lt;\/ImageBackground><\/code><\/pre>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:codeflarelimited.com\" target=\"_blank\" rel=\"noreferrer noopener\">Begin your software development journey<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Full code<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\nimport { ImageBackground, StyleSheet, Text, View } from \"react-native\";\nimport image from 'assets\/images\/image.png';\n\nclass YourClassName extends Component {\nrender(){\nreturn(\n&lt;View>\n&lt;ImageBackground source={image}>\n&lt;\/ImageBackground>\n&lt;\/View>\n);\n}\n}\n\nexport default YourClassName;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>As a software developer, there are times when you may need to set background image for your application<\/p>\n","protected":false},"author":1,"featured_media":280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-279","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: How to add Background Image<\/title>\n<meta name=\"description\" content=\"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.\" \/>\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-how-to-add-background-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native: How to add Background Image\" \/>\n<meta property=\"og:description\" content=\"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-07T04:19:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-07T04:19:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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-how-to-add-background-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"React Native: How to add Background Image\",\"datePublished\":\"2021-01-07T04:19:41+00:00\",\"dateModified\":\"2021-01-07T04:19:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/\"},\"wordCount\":124,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react-one.jpg\",\"articleSection\":[\"react native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/\",\"name\":\"React Native: How to add Background Image\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react-one.jpg\",\"datePublished\":\"2021-01-07T04:19:41+00:00\",\"dateModified\":\"2021-01-07T04:19:42+00:00\",\"description\":\"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react-one.jpg\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/react-one.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"software development training in abuja\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-how-to-add-background-image\\\/#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: How to add Background Image\"}]},{\"@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: How to add Background Image","description":"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.","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-how-to-add-background-image\/","og_locale":"en_US","og_type":"article","og_title":"React Native: How to add Background Image","og_description":"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.","og_url":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-01-07T04:19:41+00:00","article_modified_time":"2021-01-07T04:19:42+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg","type":"image\/jpeg"}],"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-how-to-add-background-image\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"React Native: How to add Background Image","datePublished":"2021-01-07T04:19:41+00:00","dateModified":"2021-01-07T04:19:42+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/"},"wordCount":124,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg","articleSection":["react native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/","url":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/","name":"React Native: How to add Background Image","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg","datePublished":"2021-01-07T04:19:41+00:00","dateModified":"2021-01-07T04:19:42+00:00","description":"As a software developer, there are times when you may need ... React Native allows you to set background image for your app nice and easy.","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/01\/react-one.jpg","width":1920,"height":1080,"caption":"software development training in abuja"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-how-to-add-background-image\/#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: How to add Background Image"}]},{"@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\/01\/react-one.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/279","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=279"}],"version-history":[{"count":1,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}