{"id":6392,"date":"2019-09-16T13:54:30","date_gmt":"2019-09-16T13:54:30","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6392\/"},"modified":"2022-08-30T22:13:48","modified_gmt":"2022-08-30T22:13:48","slug":"efficient-way-structure-react-native-projects","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/","title":{"rendered":"An efficient way to structure React Native projects"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Let\u2019s discuss a structure to start new projects or when you need to scale large projects.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">We will use React Native project structure as a basis for this architecture, but the concepts can be leveraged in projects using other frameworks.<\/span><\/p>\n\n\n\n<!--more-->\n\n\n\n<p><span style=\"font-weight: 400;\">For the purpose of this post, I will use the following patterns and packages:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/reactnavigation.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">React Navigation<\/span><\/a><span style=\"font-weight: 400;\">: Routing and navigation for your <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/react-native-examples-innovative-brands\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native apps<\/a>;<\/span><\/li><li><a href=\"https:\/\/github.com\/axios\/axios\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Axios<\/span><\/a><span style=\"font-weight: 400;\">: Promise-based HTTP client for the browser and node.js.<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Follow the required installation steps on <\/span><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Getting Started \u00b7 React Native<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">After configuring the React Native CLI on your machine, verify if&nbsp; `react-native -v` is available on your terminal.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">You should get a return similar to this:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n$ react-native-cli: 2.0.1\n$ react-native: n\/a - not inside a React Native project directory\n <\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">So we can proceed to create our project.<\/span><\/p>\n\n\n\n<p>Cheesecake Labs is the <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/top-5-react-native-development-company\/\" target=\"_blank\" rel=\"noreferrer noopener\">top #5 React Native Development Company<\/a> and has delivered <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/quality-assurance\/\" target=\"_blank\" rel=\"noreferrer noopener\">quality<\/a> cross-platform applications to a number of clients.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Creating a project from Scratch<\/span><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1150\" height=\"418\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/rn-from-scratch.png\" alt=\"A page with 'Give it a try' written on the top. It has two steps: Run this and Read these.\" class=\"wp-image-6396\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/rn-from-scratch.png 1150w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/rn-from-scratch-768x279.png 768w\" sizes=\"(max-width: 1150px) 100vw, 1150px\" \/><\/figure>\n<\/div>\n\n\n<p><span style=\"font-weight: 400;\">Choose a directory of your choice to create our base project using the following command:<\/span><\/p>\n\n\n<pre class=\"language-react-jsx\"><code class=\"language-react-jsx\">\n$ react-native init ReactNativeCklExample\n<\/code><\/pre>\n\n\n<p><span style=\"font-weight: 400;\">After the execution, you can access the directory using the cd ReactNativeCklExample. You will get a structure similar to this:<\/span><\/p>\n\n\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 __tests__\n\u2502   \u251c\u2500\u2500 App-test.js\n\u251c\u2500\u2500 android\n\u251c\u2500\u2500 ios\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 .buckconfig\n\u251c\u2500\u2500 .eslintrc.js\n\u251c\u2500\u2500 .flowconfig\n\u251c\u2500\u2500 .gitattributes\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 .prettierrc.js\n\u251c\u2500\u2500 .watchmanconfig\n\u251c\u2500\u2500 App.js\n\u251c\u2500\u2500 app.json\n\u251c\u2500\u2500 babel.config.js\n\u251c\u2500\u2500 index.js\n\u251c\u2500\u2500 metro.config.js\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 yarn.lock\n <\/code><\/pre>\n\n\n<p>Some of the most popular mobile apps were built with the React Native framework. You probably have a few installed on your own smartphone. Here\u2019s how the <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/react-native-examples-innovative-brands\/\" target=\"_blank\" rel=\"noreferrer noopener\">world\u2019s most innovative brands use React Native<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Structuring the pillars<\/span><\/h2>\n\n\n<div class=\"wp-block-image size-full wp-image-6397\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"695\" height=\"338\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-13-at-14.15.17.png\" alt=\"A wall of colorful bricks like Lego.\" class=\"wp-image-6397\"\/><figcaption>Photo by Omar Flores<\/figcaption><\/figure>\n<\/div>\n\n\n<p><i><\/i><span style=\"font-weight: 400;\">We will define a structure for our project to grow efficiently and make its maintenance easier.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Our first step will be to define the directory structure within `src` (Source). This directory will contain all major project files.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s create the following initial structure for our project:<\/span><\/p>\n\n\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 assets\n\u2502   \u2502  \u251c\u2500\u2500 fonts\n\u2502   \u2502  \u251c\u2500\u2500 images\n\u2502   \u251c\u2500\u2500 components\n\u2502   \u2502  \u251c\u2500\u2500 atoms\n\u2502   \u2502  \u251c\u2500\u2500 molecules\n\u2502   \u2502  \u251c\u2500\u2500 organisms\n\u2502   \u251c\u2500\u2500 navigations\n\u2502   \u251c\u2500\u2500 scenes\n\u2502   \u251c\u2500\u2500 styles\n\u2502   \u251c\u2500\u2500 utils\n\u2502   \u251c\u2500\u2500 index.js\n <\/code><\/pre>\n\n\n<p><span style=\"font-weight: 400;\">Right now you might be wondering why there are so many folders and files, but don\u2019t worry, further on the post we&#8217;ll go over their purpose and how important each one of them is.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Enabling the use of the alias<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">To simplify the require\/import of paths in our project, we must configure directory aliases. So let&#8217;s install the following packages:<\/span><\/p>\n\n\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n$ yarn add -D eslint-import-resolver-babel-module@^5.1.0 \neslint-plugin-import@^2.18.2 babel-plugin-module-resolver@^3.2.0\n <\/code><\/pre>\n\n\n<p><span style=\"font-weight: 400;\">After installing the dependencies, let\u2019s configure the <\/span><b>.babelrc<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<p><b>.babelrc<\/b><\/p>\n\n\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n{\n  \"plugins\": [\n    [\n      \"module-resolver\",\n      {\n        \"cwd\": \"babelrc\",\n        \"root\": [\".\/src\"],\n        \"extensions\": [\".js\", \".ios.js\", \".android.js\"],\n        \"alias\": {\n          \"_assets\": \".\/src\/assets\",\n          \"_components\": \".\/src\/components\",\n          \"_atoms\": \".\/src\/components\/atoms\",\n          \"_molecules\": \".\/src\/components\/molecules\",\n          \"_organisms\": \".\/src\/components\/organisms\",\n          \"_navigations\": \".\/src\/navigations\",\n          \"_scenes\": \".\/src\/scenes\",\n          \"_services\": \".\/src\/services\",\n          \"_styles\": \".\/src\/styles\",\n          \"_utils\": \".\/src\/utils\"\n        }\n      }\n    ]\n  ]\n}\n<\/code><\/pre>\n\n\n<p><span style=\"font-weight: 400;\">Edit the <\/span><b>.eslintrc.js<\/b><span style=\"font-weight: 400;\"> file to avoid lint errors when using the new alias:<\/span><\/p>\n\n\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nmodule.exports = {\n  root: true,\n  extends: '@react-native-community',\n  plugins: ['import'],\n  settings: {\n    'import\/resolver': {\n      node: {\n        paths: ['src'],\n        alias: {\n          _assets: '.\/src\/assets',\n          _components: '.\/src\/components',\n          _atoms: '.\/src\/components\/atoms',\n          _molecules: '.\/src\/components\/molecules',\n          _organisms: '.\/src\/components\/organisms',\n          _navigations: '.\/src\/navigations',\n          _scenes: '.\/src\/scenes',\n          _services: '.\/src\/services',\n          _styles: '.\/src\/styles',\n          _utils: '.\/src\/utils',\n        },\n      },\n    },\n  },\n};<\/code><\/pre>\n\n\n<p><span style=\"font-weight: 400;\">Read more about the alias setup at <\/span><a href=\"https:\/\/github.com\/tleunen\/babel-plugin-module-resolver#getting-started\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Babel Plugin Module Resolver<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cheesecakelabs.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"650\" height=\"200\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/03\/Blog-banner-CTA.png\" alt=\"\" class=\"wp-image-7260\"\/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Enable editors to alias autocompletion<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Create the <\/span><b>jsconfig.json<\/b><span style=\"font-weight: 400;\"> file and use the same alias that was defined in <strong>.babelrc<\/strong>. Check it out below:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"_assets\": [\"src\/assets\/*\"],\n      \"_components\": [\"src\/components\/*\"],\n      \"_atoms\": [\"src\/components\/atoms\/*\"],\n      \"_molecules\": [\"src\/components\/molecules\/*\"],\n      \"_organisms\": [\"src\/components\/organisms\/*\"],\n      \"_navigations\": [\"src\/navigations\/*\"],\n      \"_scenes\": [\"src\/scenes\/*\"],\n      \"_services\": [\"src\/services\/*\"],\n      \"_styles\": [\"src\/styles\/*\"],\n      \"_utils\": [\"src\/utils\/*\"]\n    }\n  }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Once you have edited it, it\u2019s time to test the alias. Let\u2019s edit our `src\/index.js` file by adding a test component as follows:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport React from 'react';\nimport {View,Text} from 'react-native';\n\nconst App = () =&gt; (\n  \n    Hello World\n  \n);\n\nexport default App;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Now in our <\/span><b>index.js<\/b><span style=\"font-weight: 400;\"> in the project root we will import the <strong>App<\/strong> component as follows:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport App from '.\/src';<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">This way you will have your alias set up working on your project.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Atomic Components<\/span><\/h2>\n\n\n<div class=\"wp-block-image size-full wp-image-6401\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/atomic-design-process.png\" alt=\"5 icons representing atoms, molecules, organisms, templates and pages.\" class=\"wp-image-6401\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/atomic-design-process.png 1024w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/atomic-design-process-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Illustration by Brad Frost<\/figcaption><\/figure>\n<\/div>\n\n\n<p><span style=\"font-weight: 400;\">For a better understanding of atomic systems\/components, I indicate <\/span>reading the following article: <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/atomic-design-react\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Atomic Design with React<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">We will not dive into the concepts of atomic, only the organization we have chosen to use in this project<\/span>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-weight: 400;\"><strong>Atoms: <\/strong>the smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts.<\/span><\/li><li><span style=\"font-weight: 400;\"><strong>Molecules:<\/strong> are the composition of one or more components of atoms.<\/span><\/li><li><span style=\"font-weight: 400;\"><strong>Organisms<\/strong>: the combination of molecules that work together or even with atoms that compose more elaborate interfaces.<\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Remembering the directories we use to organize your components:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 components\n\u2502   \u2502  \u251c\u2500\u2500 atoms\n\u2502   \u2502  \u251c\u2500\u2500 molecules\n\u2502   \u2502  \u251c\u2500\u2500 organisms<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Each component directory has an <strong>index.js<\/strong> file that exports the specified category.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Let\u2019s create a component called <\/span><b>HelloWorld<\/b><span style=\"font-weight: 400;\"> in <\/span><b>src\/atoms<\/b><span style=\"font-weight: 400;\"> to understand the idea:<\/span><\/p>\n\n\n\n<p><b>src\/atoms\/hello-world.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport React from 'react';\nimport {Text} from 'react-native';\n\nconst HelloWorld = ({name}) =&gt; Hello World {name}!;\n\nexport default HelloWorld;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">We export as follows:&nbsp;<\/span><\/p>\n\n\n\n<p><b>src\/atoms\/index.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>export {default as HelloWorld} from &#8216;.\/hello-world&#8217;;<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Now we can use this component in <\/span><b>src\/index.js<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport React from 'react';\nimport {HelloWorld} from '_atoms'; \n\nconst App = () =&gt; &lt;\n\nexport default App;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Note: The App.js in the project root can be removed, it will no longer be used.<\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Our Scenes<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">I have a habit of dividing every application screen as a scene and so each one has its directory.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">We will define some scenes that will not be used this time, and then we will configure these navigations using the created screens.<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 scenes\n\u2502   \u2502  \u251c\u2500\u2500 login\n\u2502   \u2502  \u2502\t \u251c\u2500\u2500 index.js \/\/ LoginScreen\n\u2502   \u2502  \u251c\u2500\u2500 home\n\u2502   \u2502  \u2502\t \u251c\u2500\u2500 index.js \/\/ HomeScreen\n\u2502   \u2502  \u251c\u2500\u2500 about\n\u2502   \u2502  \u2502\t \u251c\u2500\u2500 index.js \/\/ AboutScreen<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">At the <\/span><b>Login<\/b><span style=\"font-weight: 400;\"> screen, we will add a navigation button to go to the <\/span><b>Home<\/b><span style=\"font-weight: 400;\"> screen. See below:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport React from 'react';\nimport {SafeAreaView, Text, TouchableHighlight} from 'react-native';\n\nconst LoginScreen = ({navigation}) =&gt; (\n  \n    Screen: Login\n\n     navigation.navigate('Home')}&gt;\n      Go to home\n    \n  \n);\n\nexport default LoginScreen;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Note: The navigation object will be available on all screens that are surrounded by the navigator object.<\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Ways of Navigation<\/strong><\/span><\/h2>\n\n\n<div class=\"wp-block-image size-full wp-image-6406\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/unnamed-1.png\" alt=\"Picture of the point of view of the bow region of a boat.\" class=\"wp-image-6406\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/unnamed-1.png 1024w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/unnamed-1-768x512.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Photo by Joseph Barrientos<\/figcaption><\/figure>\n<\/div>\n\n\n<p><span style=\"font-weight: 400;\">In this step, we will need to add some new dependencies to the project. See below:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n$ yarn add react-navigation@^4.0.0 react-navigation-stack@^1.5.3 \nreact-navigation-tabs@^2.4.0 react-native-gesture-handler@^1.4.1 \nreact-native-reanimated@^1.2.0<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">You can read more about it <\/span><a href=\"https:\/\/reactnavigation.org\/docs\/en\/getting-started.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In our application, we will have two types of navigation.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In the <\/span><b>Login<\/b><span style=\"font-weight: 400;\"> screen, we will have <\/span><b>Stack<\/b><span style=\"font-weight: 400;\"> navigation type and in the rest of the app we will have <\/span><b>Tab<\/b><span style=\"font-weight: 400;\"> navigation type.<\/span><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Note: This is just an example of navigation, not a pattern. If you need to use other types of navigation, you can create them at the src\/navigations.<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In the <\/span><b>src\/navigations<\/b><span style=\"font-weight: 400;\"> directory we will define the following structure:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 navigations\n\u2502   \u2502  \u251c\u2500\u2500 index.js            \/\/ RootNavigator\n\u2502   \u2502  \u251c\u2500\u2500 auth-navigator.js   \/\/ AuthNavigator\n\u2502   \u2502  \u251c\u2500\u2500 app-navigator.js    \/\/ AppNavigator<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\"><li><span style=\"font-weight: 400;\"> In the <\/span><b>auth-navigator.js<\/b><span style=\"font-weight: 400;\"> we will define the navigation type for the login screen:<\/span><\/li><\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport {createStackNavigator} from 'react-navigation-stack';\n\nimport LoginScreen from '_scenes\/login';\n\nconst AuthNavigatorConfig = {\n  initialRouteName: 'Login',\n  header: null,\n  headerMode: 'none',\n};\n\nconst RouteConfigs = {\n  Login:LoginScreen,\n};\n\nconst AuthNavigator = createStackNavigator(RouteConfigs, AuthNavigatorConfig);\n\nexport default AuthNavigator;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><span style=\"font-weight: 400;\"> In the <\/span><b>app-navigator.js<\/b><span style=\"font-weight: 400;\"> we will define the type of navigation to internal screens app:<\/span><\/li><\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport {createBottomTabNavigator} from 'react-navigation-tabs';\n\nimport HomeScreen from '_scenes\/home';\nimport AboutScreen from '_scenes\/about';\n\nconst TabNavigatorConfig = {\n  initialRouteName: 'Home',\n  header: null,\n  headerMode: 'none',\n};\n\nconst RouteConfigs = {\n  Home:{\n    screen:HomeScreen,\n  },\n  About:{\n    screen:AboutScreen,\n  },\n};\n\nconst AppNavigator = createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);\n\nexport default AppNavigator;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><span style=\"font-weight: 400;\"> In the <\/span><b>index.js<\/b><span style=\"font-weight: 400;\"> we will define our <\/span><b>RootNavigator<\/b><span style=\"font-weight: 400;\"> merging the auth and app navigators:<\/span><\/li><\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport {createAppContainer, createSwitchNavigator} from 'react-navigation';\n\nimport AuthNavigator from '.\/auth-navigator';\nimport AppNavigator from '.\/app-navigator';\n\nconst RootNavigator = createSwitchNavigator(\n  {\n    Auth: AuthNavigator,\n    App: AppNavigator,\n  },\n  {\n    initialRouteName: 'Auth',\n  },\n);\n\nexport default createAppContainer(RootNavigator);<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Now you can import the <\/span><b>Navigator<\/b><span style=\"font-weight: 400;\"> object into your <\/span><b>src\/index.js<\/b><span style=\"font-weight: 400;\"> as follows:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport React from 'react';\n\nimport Navigator from '_navigations';\n\nconst App = () =&gt; ;\n\nexport default App;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">This way you will have simple and functional navigation.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Reusable Services<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Not everything can be considered a component in React Native, a well-known approach used to create separate modules and in some cases containing business rules are the use of services.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Directory for creating services:<\/span><\/p>\n\n\n\n<p><b>src\/services<\/b><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">They can be shared with multiple screens and components in your project.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Commonly used to create services that make contact with external APIs and use the <\/span><b>axios<\/b><span style=\"font-weight: 400;\"> library that we mentioned at the beginning of the post.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Shared Styles<\/span><\/h2>\n\n\n<div class=\"wp-block-image size-full wp-image-6409\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1199\" height=\"599\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-16-at-10.19.25-AM.png\" alt=\"A yellow ball bouncing from between brackets to between parenthesis. \" class=\"wp-image-6409\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-16-at-10.19.25-AM.png 1199w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-16-at-10.19.25-AM-768x384.png 768w\" sizes=\"(max-width: 1199px) 100vw, 1199px\" \/><figcaption>Illustration by Dominic Magnifico<\/figcaption><\/figure>\n<\/div>\n\n\n<p><span style=\"font-weight: 400;\">Based in <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CSS_preprocessor\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">CSS preprocessor<\/span><\/a><span style=\"font-weight: 400;\"> we use some default files in our style structure:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\n.\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 styles\n\u2502   \u2502  \u251c\u2500\u2500 index.js        \/\/ Export all          \n\u2502   \u2502  \u251c\u2500\u2500 colors.js       \/\/ Colors pallet\n\u2502   \u2502  \u251c\u2500\u2500 mixins.js       \/\/ Mixins to use CSSinJS\n\u2502   \u2502  \u251c\u2500\u2500 spacing.js      \/\/ Paddings, margins and scale\n\u2502   \u2502  \u251c\u2500\u2500 typography.js   \/\/ Fonts types and sizes<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><b>index.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport * as Colors from '.\/colors';\nimport * as Spacing from '.\/spacing';\nimport * as Typography from '.\/typography';\nimport * as Mixins from '.\/mixins';\n\nexport { Typography, Spacing, Colors, Mixins };<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><b>colors.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nexport const PRIMARY = '#1779ba';\nexport const SECONDARY = '#767676';\nexport const WHITE = '#FFFFFF';\nexport const BLACK = '#000000';\n\n\/\/ ACTIONS\nexport const SUCCESS = '#3adb76';\nexport const WARNING = '#ffae00';\nexport const ALERT = '#cc4b37';\n\n\/\/ GRAYSCALE\nexport const GRAY_LIGHT = '#e6e6e6';\nexport const GRAY_MEDIUM = '#cacaca';\nexport const GRAY_DARK = '#8a8a8a';<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><b>mixins.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport {Dimensions,PixelRatio} from 'react-native';<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nconst WINDOW_WIDTH = Dimensions.get('window').width;\nconst guidelineBaseWidth = 375;\n\nexport const scaleSize = size =&gt; (WINDOW_WIDTH\/guidelineBaseWidth) * size;\n\nexport const scaleFont = size =&gt; size * PixelRatio.getFontScale();\n\nfunction dimensions(top, right = top, bottom = top, left = right, property){\n  let styles = {};\n\n  styles[`${property}Top`] = top;\n  styles[`${property}Right`] = right;\n  styles[`${property}Bottom`] = bottom;\n  styles[`${property}Left`] = left;\n\n  return styles;\n}\n\nexport function margin(top, right, bottom, left){\n  return dimensions(top, right, bottom, left, 'margin');\n}\n\nexport function padding(top, right, bottom, left){\n  return dimensions(top, right, bottom, left, 'padding');\n}\n\nexport function boxShadow(color, offset = {height:2,width:2},\n                           radius = 8, opacity = 0.2){\n  return {\n    shadowColor: color,\n    shadowOffset: offset,\n    shadowOpacity: opacity,\n    shadowRadius: radius,\n    elevation: radius,\n  };\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><b>spacing.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport {scaleSize} from '.\/mixins';\n\nexport const SCALE_18 = scaleSize(18);\nexport const SCALE_16 = scaleSize(16);\nexport const SCALE_12 = scaleSize(12);\nexport const SCALE_8 = scaleSize(8);<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><b>typography.js<\/b><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nimport { scaleFont } from '.\/mixins';\n\n\/\/ FONT FAMILY\nexport const FONT_FAMILY_REGULAR = 'OpenSans-Regular';\nexport const FONT_FAMILY_BOLD = 'OpenSans-Bold';\n\n\/\/ FONT WEIGHT\nexport const FONT_WEIGHT_REGULAR = '400';\nexport const FONT_WEIGHT_BOLD = '700';\n\n\/\/ FONT SIZE\nexport const FONT_SIZE_16 = scaleFont(16);\nexport const FONT_SIZE_14 = scaleFont(14);\nexport const FONT_SIZE_12 = scaleFont(12);\n\n\/\/ LINE HEIGHT\nexport const LINE_HEIGHT_24 = scaleFont(24);\nexport const LINE_HEIGHT_20 = scaleFont(20);\nexport const LINE_HEIGHT_16 = scaleFont(16);\n\n\/\/ FONT STYLE\nexport const FONT_REGULAR = {\n  fontFamily: FONT_FAMILY_REGULAR,\n  fontWeight: FONT_WEIGHT_REGULAR,\n};\n\nexport const FONT_BOLD = {\n  fontFamily: FONT_FAMILY_BOLD,\n  fontWeight: FONT_WEIGHT_BOLD,\n};<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">This is our basic style settings to structure our application.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This way you can import into any of your components the following <strong>Typography, Spacing, Colors, Mixins<\/strong> objects, which will have access to the functionality of each style object.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Extra: Custom Font<\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">To enable custom fonts you need to create the <strong>react-native.config.js<\/strong> in the project root and set the directory where your <\/span><b>.ttf<\/b><span style=\"font-weight: 400;\"> files are as follows:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"language-jsx\"><code class=\"language-jsx\">\nmodule.exports = {\n  assets:['.\/src\/assets\/fonts\/'],\n};<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">After that, you should run the `react-native link` to link your fonts to the iOS \/ Android native code.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Defining Utils<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">We have the <\/span><b>src\/utils<\/b><span style=\"font-weight: 400;\"> directory where we add all our utility\/helper methods that can be shared across our entire project.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Whenever you come across situations where you get caught repeating code is a good situation to create a util\/helper.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>Wrapping up<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">I have been working with this format on the last React Native projects I worked on and I can say that it helped me a lot regarding the organization and <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/building-app-phase-3-product-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">development<\/a> of the project.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This is just one way we found to be productive and better organized among our team, I hope it helps you too.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Feel free to comment below if you have any questions, I\u2019ll be happy to help you.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Enjoy programming!<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The repository of this example is available at <\/span><a href=\"https:\/\/github.com\/CheesecakeLabs\/ReactNativeCklExample\"><span style=\"font-weight: 400;\">ReactNativeCklExample<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\"><strong>References<\/strong><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/medium.com\/@alexmngn\/why-react-developers-should-modularize-their-applications-d26d381854c1\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Why React developers should modularize their applications?<\/span><\/a><\/li><li><a href=\"https:\/\/medium.com\/@alexmngn\/how-to-better-organize-your-react-applications-2fd3ea1920f1\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">How to better organize your React applications?<\/span><\/a><\/li><li><a href=\"https:\/\/medium.com\/the-andela-way\/how-to-structure-a-react-native-app-for-scale-a29194cd33fc\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">How To Structure a React Native App For Scale<\/span><\/a><\/li><li><a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">How to structure your project and manage static resources in React Native<\/span><\/a><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cheesecakelabs.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"650\" height=\"200\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2021\/03\/Blog-banner-CTA.png\" alt=\"\" class=\"wp-image-7260\"\/><\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Let\u2019s discuss a structure to start new projects or when you need to scale large projects. We will use React Native project structure as a basis for this architecture, but the concepts can be leveraged in projects using other frameworks.<\/p>\n","protected":false},"author":65,"featured_media":6413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432,1162],"tags":[305,1201],"class_list":["post-6392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","category-process","tag-tag-development","tag-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Structure a React Native Project: Best Practices<\/title>\n<meta name=\"description\" content=\"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Structure a React Native Project: Best Practices\" \/>\n<meta property=\"og:description\" content=\"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-16T13:54:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-30T22:13:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\"},\"author\":{\"name\":\"Helder Burato Berto\"},\"headline\":\"An efficient way to structure React Native projects\",\"datePublished\":\"2019-09-16T13:54:30+00:00\",\"dateModified\":\"2022-08-30T22:13:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\"},\"wordCount\":1233,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png\",\"keywords\":[\"development\",\"react native\"],\"articleSection\":[\"Engineering\",\"Process\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\",\"name\":\"How To Structure a React Native Project: Best Practices\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png\",\"datePublished\":\"2019-09-16T13:54:30+00:00\",\"dateModified\":\"2022-08-30T22:13:48+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Helder Burato Berto\"},\"description\":\"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png\",\"width\":2000,\"height\":720,\"caption\":\"react native project structure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An efficient way to structure React Native projects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Helder Burato Berto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"Helder Burato Berto\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/helder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Structure a React Native Project: Best Practices","description":"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f","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:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/","og_locale":"en_US","og_type":"article","og_title":"How To Structure a React Native Project: Best Practices","og_description":"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f","og_url":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2019-09-16T13:54:30+00:00","article_modified_time":"2022-08-30T22:13:48+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/"},"author":{"name":"Helder Burato Berto"},"headline":"An efficient way to structure React Native projects","datePublished":"2019-09-16T13:54:30+00:00","dateModified":"2022-08-30T22:13:48+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/"},"wordCount":1233,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png","keywords":["development","react native"],"articleSection":["Engineering","Process"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/","url":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/","name":"How To Structure a React Native Project: Best Practices","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png","datePublished":"2019-09-16T13:54:30+00:00","dateModified":"2022-08-30T22:13:48+00:00","author":{"@type":"person","name":"Helder Burato Berto"},"description":"Trying to discover the perfect react native project structure? Click here to know how to better organize your React applications. \u269b\ufe0f","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/09\/Enchance_Performance.png","width":2000,"height":720,"caption":"react native project structure"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"An efficient way to structure React Native projects"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Helder Burato Berto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"Helder Burato Berto"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/helder\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6392"}],"version-history":[{"count":8,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6392\/revisions"}],"predecessor-version":[{"id":10718,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6392\/revisions\/10718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6413"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}