{"id":44,"date":"2018-04-20T13:28:46","date_gmt":"2018-04-20T12:28:46","guid":{"rendered":"https:\/\/blog.bham.ac.uk\/itinnovation\/?p=44"},"modified":"2018-05-18T10:38:56","modified_gmt":"2018-05-18T09:38:56","slug":"react-native-using-react-js-to-develop-native-ios-and-android-mobile-applications","status":"publish","type":"post","link":"https:\/\/blog.bham.ac.uk\/itinnovation\/2018\/04\/20\/react-native-using-react-js-to-develop-native-ios-and-android-mobile-applications\/","title":{"rendered":"Do you have an idea for a mobile app?"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignleft size-full wp-image-2240\" src=\"http:\/\/blog.bham.ac.uk\/itnews\/wp-content\/uploads\/sites\/26\/2018\/04\/react-native-logo1.jpg\" alt=\"\" width=\"100%\" height=\"250\" \/>The IT Innovation team is about to commence on a project to evaluate <a href=\"https:\/\/www.techworld.com\/apps-wearables\/what-is-react-native-3625529\/\">React Native<\/a> \u2013 an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Open-source_software\">open source<\/a> mobile development framework for creating native mobile applications for iOS and Android platforms.<\/p>\n<h3>What do we mean by native mobile applications?<\/h3>\n<p>A <a href=\"https:\/\/www.techopedia.com\/definition\/27568\/native-mobile-app\">native mobile app<\/a> is a smartphone app that is coded in a specific programming language. In the case of React Native, this uses the popular <a href=\"https:\/\/reactjs.org\/\">React.js<\/a> user interface (UI) framework to allow JavaScript developers to write fully functioning native mobile apps.<\/p>\n<h3>How is this relevant at the University?<\/h3>\n<p>The purpose of this activity is to evaluate the use of React Native for the development of high performance native mobile applications, and assess how the framework might be used in other areas of the University to support native mobile developments.<\/p>\n<h3>Who can submit an idea for an app?<\/h3>\n<p>Anyone from IT Services with an idea or requirement for a mobile application.<\/p>\n<h3>How do I go about submitting my idea?<\/h3>\n<p>Please contact <a href=\"mailto:t.a.packwood@bham.ac.uk\">Tim Packwood, IT Innovation Centre,<\/a> to discuss the possible use of your idea as the basis for this project. The app will be of production standard, allowing it to be published in the future.<\/p>\n<p>We will not require significant amounts of your time; you may wish to act as an informal product owner, but the IT Innovation team will take care of the rest.<\/p>\n<h3>The techy stuff<\/h3>\n<h5>React Native: the basics<\/h5>\n<p>Unlike traditional React.js which renders components in the <a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\">browser DOM<\/a>, React Native utilises <a href=\"https:\/\/en.wikipedia.org\/wiki\/Objective-C\">Objective-C<\/a> and <a href=\"https:\/\/www.javaworld.com\/article\/2077392\/java-se\/just-what-is-the-java-api-anyway.html\">Java APIs<\/a> to render React components into the respective iOS and Android platforms. This allows the use of native device features such as geolocation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2229\" src=\"http:\/\/blog.bham.ac.uk\/itnews\/wp-content\/uploads\/sites\/26\/2018\/04\/React-Native-workflow.png\" alt=\"\" width=\"678\" height=\"314\" \/><\/p>\n<h5>Project outputs<\/h5>\n<p>The project will have the following outputs.<\/p>\n<ul>\n<li>A production quality prototype iOS and Android mobile application (that can be published at a later stage)<\/li>\n<li>A <a href=\"https:\/\/git-scm.com\/book\/en\/v2\/Git-Basics-Getting-a-Git-Repository\">GIT repository<\/a> of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Boilerplate_code\">boilerplate code<\/a> for use by others<\/li>\n<li>A concise overview of the React Native framework including;\n<ul>\n<li>An overview of development best practices<\/li>\n<li>A React Native performance assessment<\/li>\n<li>A comparison with other frameworks (such as <a href=\"https:\/\/cordova.apache.org\/\">Apache Cordova<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.xamarin.com\/\">Xamarin<\/a>)<\/li>\n<li>An overview of the process for publishing on the iOS and Android app stores<\/li>\n<\/ul>\n<\/li>\n<li>A regular blog summarising the key findings from the evaluation<\/li>\n<\/ul>\n<h3>Questions?<\/h3>\n<p>If you have any other ideas, thoughts or questions regarding either this evaluation project, mobile application development frameworks or similar technologies please email <a href=\"mailto:t.a.packwood@bham.ac.uk\">Tim Packwood, IT Innovation Centre<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The IT Innovation team is about to commence on a project to evaluate React Native \u2013 an open source mobile development framework for creating native mobile applications for iOS and Android platforms. What do we mean by native mobile applications? A native mobile app is a smartphone app that is coded in a specific programming &hellip; <a href=\"https:\/\/blog.bham.ac.uk\/itinnovation\/2018\/04\/20\/react-native-using-react-js-to-develop-native-ios-and-android-mobile-applications\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Do you have an idea for a mobile app?&#8221;<\/span><\/a><\/p>\n","protected":false},"author":242,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-mobile-development","category-virtual-reality"],"_links":{"self":[{"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/users\/242"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":20,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/posts\/44\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bham.ac.uk\/itinnovation\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}