{"id":7365,"date":"2019-09-01T16:27:54","date_gmt":"2019-09-01T16:27:54","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7365"},"modified":"2021-11-06T10:40:47","modified_gmt":"2021-11-06T10:40:47","slug":"react-native-hello-world","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-native-hello-world\/","title":{"rendered":"React Native “Hello World”"},"content":{"rendered":"

This posts assumes you’ve installed the Android studio<\/a>. I won’t go through the steps for installing as, to be honest, I’ve had an installation too long to recall any steps. <\/p>\n

Getting started<\/strong><\/p>\n

To begin with we need to use npm<\/em> or yarn<\/em> to add the react native scaffolding application.<\/p>\n

\r\nyarn add global create-react-native-app\r\n<\/pre>\n
Assuming everything’s installed we can now run<\/p>\n
\r\nyarn create-react-native-app helloworld\r\n<\/pre>\n
Replace helloworld with your application name.<\/em><\/p>\n
You’ll then be prompted for the template to use, managed workflow, blank, blank (TypeScript), tabs or bare workflow, minimal or minimal (TypeScript).<\/p>\n
Let’s choose minimal (TypeScript).<\/p>\n
Next you’ll enter the name and displayName or your application, finally you’ll be prompted to install dependencies, select Yes.<\/p>\n
From our application folder we can run<\/p>\n
\r\nyarn android\r\nyarn ios\r\n<\/pre>\n
In this case I’m working on Android, so before we go any further you need to run up one of the installed Android emulators before running the next step.<\/p>\n
Now run <\/p>\n
\r\nyarn start\r\n<\/pre>\n
which will run react-native start<\/em> followed by<\/p>\n
\r\nyarn android\r\n<\/pre>\n
in another terminal run. This will run react-native run-android<\/em>.<\/p>\n
If all goes well then the emulator should display some text (depending on the template you used).<\/p>\n
Using the emulator<\/strong><\/p>\n
In emulator type r r in quick succession in the emulator to reload your application. Or you can enable automatic\/hot loading by pressing CTRL+M in the emulator and selecting Enable Live Reload<\/em>.<\/p>\n
Problems<\/strong><\/p>\n
Whilst setting up Android studio on Linux or Windows you need to make sure ANDROID_HOME, ANDROID_PLATFORM_TOOLS and ANDROID_SDK_ROOT environment variables are set up. For example on Windows these are<\/p>\n
    \n
  • ANDROID_HOME – C:\\Users\\<Username>\\AppData\\Local\\Android\\Sdk<\/li>\n
  • ANDROID_SDK_ROOT – C:\\Users\\<Username>\\AppData\\Local\\Android\\Sdk<\/li>\n
  • ANDROID_PLATFORM_TOOLS – C:\\Users\\<Username>\\AppData\\Local\\Android\\Sdk\\platform-tools<\/li>\n<\/ul>\n
    Hello World<\/strong><\/p>\n
    At this point, hopefully we’ve got everything running so let’s open App.tsx and replace<\/p>\n
    \r\n<Text>Open up App.tsx to start working on your app!<\/Text>\r\n<\/pre>\n
    with<\/p>\n
    \r\n<Text>Hello World<\/Text>\r\n<\/pre>\n
    Double clicking r in the emulator will reload the application displaying Hello World<\/em>. So we’re on our way to the first React Native application.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This posts assumes you’ve installed the Android studio. I won’t go through the steps for installing as, to be honest, I’ve had an installation too long to recall any steps. Getting started To begin with we need to use npm or yarn to add the react native scaffolding application. yarn add global create-react-native-app Assuming everything’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,265],"tags":[],"class_list":["post-7365","post","type-post","status-publish","format-standard","hentry","category-android","category-react-native"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7365"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7365\/revisions"}],"predecessor-version":[{"id":8998,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7365\/revisions\/8998"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}