{"id":84,"date":"2024-10-07T16:17:16","date_gmt":"2024-10-07T16:17:16","guid":{"rendered":"https:\/\/blog.vyomscode.com\/?p=84"},"modified":"2024-10-07T16:29:39","modified_gmt":"2024-10-07T16:29:39","slug":"how-to-set-up-a-new-expo-project-with-navigation-template","status":"publish","type":"post","link":"https:\/\/blog.vyomscode.com\/index.php\/2024\/10\/07\/how-to-set-up-a-new-expo-project-with-navigation-template\/","title":{"rendered":"How to Set Up a New Expo Project with Navigation Template"},"content":{"rendered":"\n<p>In this guide, we\u2019ll walk through setting up a React Native project using Expo and organizing the folder structure for better manageability.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/React-Native-App-Without-Expo-1024x458.jpg\" alt=\"\" class=\"wp-image-85\" style=\"width:532px;height:auto\" srcset=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/React-Native-App-Without-Expo-1024x458.jpg 1024w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/React-Native-App-Without-Expo-300x134.jpg 300w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/React-Native-App-Without-Expo-768x344.jpg 768w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/React-Native-App-Without-Expo.jpg 1508w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>1. Install Expo with a Template<\/strong><\/h6>\n\n\n\n<p>To create a new Expo app, run one of the following commands:<\/p>\n\n\n\n<ul>\n<li>To create the app in a specific folder<\/li>\n<\/ul>\n\n\n\n<p>             <strong>npx create-expo-app@latest nameofapp -t<\/strong><\/p>\n\n\n\n<ul>\n<li>To install in the current directory:<\/li>\n<\/ul>\n\n\n\n<p>           <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-grey-color\">  <strong>npx create-expo-app@latest .\/ -t<\/strong><\/mark><\/p>\n\n\n\n<p>During setup, choose the <strong>navigation<\/strong> template to install with navigation tabs. Using down arrow  and enter from keyboard in terminal <\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>2. Organize Project Folders<\/strong><\/h6>\n\n\n\n<p>To keep your project well-structured, follow these steps:<\/p>\n\n\n\n<ol>\n<li>Create a folder named <code>src<\/code> in the root directory.<\/li>\n\n\n\n<li>Move the following folders inside the <code>src<\/code> folder:\n<ul>\n<li><code>app<\/code><\/li>\n\n\n\n<li><code>components<\/code><\/li>\n\n\n\n<li><code>constants<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Your project structure should now look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"783\" src=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-215746.png\" alt=\"\" class=\"wp-image-89\" style=\"width:375px;height:auto\" srcset=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-215746.png 784w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-215746-300x300.png 300w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-215746-150x150.png 150w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-07-215746-768x767.png 768w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>3. Update Import Paths<\/strong><\/h6>\n\n\n\n<p>Now, you need to update the file paths inside your project.<\/p>\n\n\n\n<p>In the <code>app<\/code> folder, update any imports like: <\/p>\n\n\n\n<p>        @\/components\/EditScreenInfo<\/p>\n\n\n\n<p>to <\/p>\n\n\n\n<p>        @\/src\/components\/EditScreenInfo<\/p>\n\n\n\n<p>Similarly, update any imports from:<\/p>\n\n\n\n<p>          @\/constants\/Colors<\/p>\n\n\n\n<p>to<\/p>\n\n\n\n<p>          @\/src\/constants\/Colors<\/p>\n\n\n\n<p>In <code>src\/app\/_layout.tsx<\/code>, locate line 26, and modify the font import path:<\/p>\n\n\n\n<p>      SpaceMono: require(&#8216;..\/assets\/fonts\/SpaceMono-Regular.ttf&#8217;),<\/p>\n\n\n\n<p>to<\/p>\n\n\n\n<p>     SpaceMono: require(&#8216;..\/..\/assets\/fonts\/SpaceMono-Regular.ttf&#8217;),<\/p>\n\n\n\n<p>Check all files in the <code>components<\/code> folder for similar import path changes.<br>Make sure every file correctly imports components and constants from the updated locations.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>4. Run the Project<\/strong><\/h6>\n\n\n\n<p>To start the project, use the following command:<\/p>\n\n\n\n<p>      npm start<\/p>\n\n\n\n<p>Then, scan the QR code displayed in the terminal with the <strong>Expo Go<\/strong> app on your Android device (available on the Play Store).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/unnamed.png\" alt=\"\" class=\"wp-image-86\" style=\"width:311px;height:auto\" srcset=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/unnamed.png 512w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/unnamed-300x300.png 300w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/10\/unnamed-150x150.png 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>5. Customizing Assets<\/strong><\/h6>\n\n\n\n<ol>\n<li>Replace all default images in the <code>assets\/images\/<\/code> folder with your own logos and images before building the APK.<\/li>\n\n\n\n<li>Do <strong>not<\/strong> download or generate the <code>android\/<\/code> folder. We will be using <code>app.json<\/code> for configuration.<\/li>\n<\/ol>\n\n\n\n<p>By following these steps, you\u2019ll have a clean and organized project structure that is easy to manage, and you&#8217;ll be ready to move forward with your React Native development using Expo.<\/p>\n\n\n\n<p>&#8211; <a href=\"https:\/\/tripti.vyomscode.com\/\">Tripti Thakur<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, we\u2019ll walk through setting up a React Native project using Expo and organizing the folder structure for better manageability. 1. Install Expo with a Template [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":3,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":90,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions\/90"}],"wp:attachment":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}