{"id":1398,"date":"2018-02-08T13:34:42","date_gmt":"2018-02-08T13:34:42","guid":{"rendered":"https:\/\/2018.miami.wordcamp.org\/?post_type=wcb_session&#038;p=1398"},"modified":"2018-03-18T21:22:23","modified_gmt":"2018-03-19T01:22:23","slug":"building-a-mobile-app-with-react-native-live","status":"publish","type":"wcb_session","link":"https:\/\/miami.wordcamp.org\/2018\/session\/building-a-mobile-app-with-react-native-live\/","title":{"rendered":"Building A Mobile App With React Native (Live)"},"content":{"rendered":"<p>This session is intended to explain and show how to create a mobile app for a WordPress based site using React Native.<\/p>\n<p>We recently built a mobile app for iOS and Android for Red Bull Global Rallycross.<br \/>\nTheir website is powered by WordPress and the idea was to create a mobile app to access the same content.<br \/>\nThis talk will take this app as an example and highlight some of the things we learned while building it.<\/p>\n<p>This session will be 90% live coding.<\/p>\n<p>First, I&#8217;m going to cover the basics of React Native:<br \/>\n&#8211; How it works<br \/>\n&#8211; React 101 (components, jsx, lifecycle)<br \/>\n&#8211; Layout system<br \/>\n&#8211; Styling views<\/p>\n<p>Then I&#8217;m going to create a React Native app from scratch with a WordPress backend:<br \/>\n&#8211; Creating a project<br \/>\n&#8211; Adding basic navigation<br \/>\n&#8211; Building the news feed screen<br \/>\n&#8211; Adding the news details screen<br \/>\n&#8211; Adding a simple parallax animation<\/p>\n<p>After this session I&#8217;m confident people will realize how easy it is to create native mobile apps with React Native.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This session is intended to explain and show how to create a mobile app for a WordPress based site using React Native. We recently built a mobile app for iOS and Android for Red Bull Global Rallycross. Their website is powered by WordPress and the idea was to create a mobile app to access the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/miami.wordcamp.org\/2018\/session\/building-a-mobile-app-with-react-native-live\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Building A Mobile App With React Native (Live)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":23114,"featured_media":0,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1521399000,"_wcpt_session_duration":3000,"_wcpt_session_type":"session","_wcpt_session_slides":"https:\/\/snack.expo.io\/@jeanregisser\/wcmia2018-react-native","_wcpt_session_video":"","_wcpt_speaker_id":[845],"footnotes":""},"session_track":[1225853],"session_category":[],"class_list":["post-1398","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-learn-javascript-deeply"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9i5nN-my","session_date_time":{"date":"March 18, 2018","time":"2:50 pm"},"session_speakers":[{"id":"845","slug":"jean-regisser","name":"Jean Regisser","link":"https:\/\/miami.wordcamp.org\/2018\/speaker\/jean-regisser\/"}],"session_cats_rendered":null,"_links":{"self":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/types\/wcb_session"}],"author":[{"embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/users\/23114"}],"version-history":[{"count":2,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1398\/revisions"}],"predecessor-version":[{"id":2502,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1398\/revisions\/2502"}],"speakers":[{"embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/speakers\/845"}],"wp:attachment":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/media?parent=1398"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_track?post=1398"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_category?post=1398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}