{"id":6414,"date":"2019-09-16T13:54:30","date_gmt":"2019-09-16T13:54:30","guid":{"rendered":"https:\/\/blog-stg.cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/"},"modified":"2022-07-01T17:14:39","modified_gmt":"2022-07-01T17:14:39","slug":"efficient-way-structure-react-native-projects","status":"publish","type":"post","link":"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/","title":{"rendered":"An efficient way to structure React Native projects"},"content":{"rendered":"

Let\u2019s discuss a structure to start new projects or when you need to scale large projects. <\/span>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

For the purpose of this post, I will use the following patterns and packages:<\/span><\/p>\n

– <\/span>React Navigation<\/span><\/a>: Routing and navigation for your React Native apps<\/a>;<\/span><\/p>\n

– <\/span>Axios<\/span><\/a>: Promise-based HTTP client for the browser and node.js.<\/span><\/p>\n

Follow the required installation steps on <\/span>Getting Started \u00b7 React Native<\/span><\/a>. After configuring the React Native CLI on your machine, verify if  `react-native -v` is available on your terminal.<\/span><\/p>\n

You should get a return similar to this:<\/span><\/p>\n

$ react-native-cli: 2.0.1\n$ react-native: n\/a - not inside a React Native project directory<\/code><\/pre>\n
So we can proceed to create our project.<\/span><\/p>\n
Cheesecake Labs is the top #5 React Native Development Company<\/a> and has delivered quality<\/a> cross-platform applications to a number of clients.<\/p>\n
Creating a project from Scratch<\/span><\/h2>\n
\"A
\nChoose a directory of your choice to create our base project using the following command:<\/span><\/p>\n
$ react-native init ReactNativeCklExample<\/code><\/pre>\n

\nAfter the execution, you can access the directory using the <\/span>cd<\/span> ReactNativeCklExample<\/span>. You will get a structure similar to this:<\/span><\/p>\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<\/code><\/pre>\n
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 world\u2019s most innovative brands use React Native<\/a> (+5 great examples)<\/p>\n
Structuring the pillars<\/span><\/h2>\n
\"A
Photo by Omar Flores<\/figcaption><\/figure>\n
<\/i>We will define a structure for our project to grow efficiently and make its maintenance easier.<\/span><\/p>\n
Our first step will be to define the directory structure within `src` (Source). This directory will contain all major project files.<\/span><\/p>\n
Let\u2019s create the following initial structure for our project:<\/span><\/p>\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<\/code><\/pre>\n
Right now you might be wondering why there are so many folders and files, but don\u2019t worry, further on the post we’ll go over their purpose and how important each one of them is.<\/span>
\n\"\"<\/a><\/p>\n
Enabling the use of the alias<\/span><\/h2>\n
To simplify the require\/import of paths in our project, we must configure directory aliases. So let’s install the following packages:<\/span><\/p>\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<\/code><\/pre>\n
After installing the dependencies, let\u2019s configure the <\/span>.babelrc<\/b>:<\/span><\/p>\n
.babelrc<\/b><\/p>\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}<\/code><\/pre>\n
Edit the <\/span>.eslintrc.js<\/b> file to avoid lint errors when using the new alias:<\/span><\/p>\n
 <\/p>\n
module.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
 <\/p>\n
Read more about alias setup at <\/span>Babel Plugin Module Resolver<\/span><\/a>.<\/span><\/p>\n
\"\"<\/a><\/p>\n
Enable editors to alias autocompletion<\/span><\/h2>\n
Create the <\/span>jsconfig.json<\/b> file and use the same alias that was defined in .babelrc<\/strong>. Check it out below:<\/span><\/p>\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
 <\/p>\n
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
 <\/p>\n
import React from 'react';\nimport {View,Text} from 'react-native';\n\nconst App = () => (\n  <View>\n    <Text>Hello World<\/Text>\n  <\/View>\n);\n\nexport default App;<\/code><\/pre>\n
 <\/p>\n
Now in our <\/span>index.js<\/b> in the project root we will import the App<\/strong> component as follows:<\/span><\/p>\n
import App from '.\/src';<\/code><\/pre>\n
This way you will have your alias set up working on your project. \\o\/<\/span><\/p>\n
Atomic Components<\/span><\/h2>\n
\"5
Illustration by Brad Frost<\/figcaption><\/figure>\n
For a better understanding of atomic system\/components I indicate the reading<\/span><\/p>\n
Atomic Design with React<\/span><\/a>.<\/span><\/p>\n
We will not dive into the concepts of atomic, only the organization we have chosen to use in this project.<\/span> <\/span><\/p>\n
– Atoms – The smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts.<\/span><\/p>\n
– Molecules – They are the composition of one or more components of atoms.<\/span><\/p>\n
– Organisms – The combination of molecules that work together or even with atoms that compose more elaborate interfaces.<\/span><\/p>\n
Remembering the directories we use to organize your components:<\/span><\/p>\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
 <\/p>\n
In each component directory, we have an index.js<\/strong> file that exports the specified category.<\/span><\/p>\n
Let\u2019s create a component called <\/span>HelloWorld<\/b> in <\/span>src\/atoms<\/b> to understand the idea:<\/span><\/p>\n
src\/atoms\/hello-world.js<\/b><\/p>\n
import React from 'react';\nimport {Text} from 'react-native';\n\nconst HelloWorld = ({name}) => <Text>Hello World {name}!<\/Text>;\n\nexport default HelloWorld;<\/code><\/pre>\n
 <\/p>\n
We export as follows: <\/span><\/p>\n
src\/atoms\/index.js<\/b><\/p>\n
export {default as HelloWorld} from '.\/hello-world';<\/code><\/pre>\n
Now we can use this component in <\/span>src\/index.js<\/b>:<\/span><\/p>\n
import React from 'react';\nimport {HelloWorld} from '_atoms'; \n\nconst App = () => <<\/code>HelloWorld name=\"Helder Burato Berto\" \/>;<\/pre>\n
export default App;<\/pre>\n
Note: The App.js in the project root can be removed, it will no longer be used.<\/span><\/i><\/p>\n
Our Scenes<\/span><\/h2>\n
I have a habit of dividing every application screen as a scene and so each one has its directory.<\/span><\/p>\n
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\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
At the <\/span>Login<\/b> screen, we will add a navigation button to go to the <\/span>Home<\/b> screen. See below:<\/span><\/p>\n
import React from 'react';\nimport {SafeAreaView, Text, TouchableHighlight} from 'react-native';\n\nconst LoginScreen = ({navigation}) => (\n  <SafeAreaView>\n    <Text>Screen: Login<\/Text>\n\n    <TouchableHighlight onPress={() => navigation.navigate('Home')}>\n      <Text>Go to home<\/Text>\n    <\/TouchableHighlight>\n  <\/SafeAreaView>\n);\n\nexport default LoginScreen;<\/code><\/pre>\n
Note: The navigation object will be available on all screens that are surrounded by the navigator object.<\/span><\/i><\/p>\n
Ways of Navigation<\/span><\/h2>\n
\"Picture
Photo by Joseph Barrientos<\/figcaption><\/figure>\n
In this step, we will need to add some new dependencies to the project. See below:<\/span><\/p>\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
You can read more about it <\/span>here<\/span><\/a>.<\/span><\/p>\n
In our application, we will have two types of navigation.<\/span><\/p>\n
In the <\/span>Login<\/b> screen, we will have <\/span>Stack<\/b> navigation type and in the rest of the app we will have <\/span>Tab<\/b> navigation type.<\/span><\/p>\n
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
In the <\/span>src\/navigations<\/b> directory we will define the following structure:<\/span><\/p>\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
 <\/p>\n
    \n
  1.  In the <\/span>auth-navigator.js<\/b> we will define the navigation type for the login screen:<\/span><\/li>\n<\/ol>\n
    import {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
     <\/p>\n
      \n
    1.  In the <\/span>app-navigator.js<\/b> we will define the type of navigation to internal screens app:<\/span><\/li>\n<\/ol>\n
      import {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
       <\/p>\n
        \n
      1.  In the <\/span>index.js<\/b> we will define our <\/span>RootNavigator<\/b> merging the auth and app navigators:<\/span><\/li>\n<\/ol>\n
        import {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
         <\/p>\n
        Now you can import the <\/span>Navigator<\/b> object into your <\/span>src\/index.js<\/b> as follows:<\/span><\/p>\n
         <\/p>\n
        import React from 'react';\n\nimport Navigator from '_navigations';\n\nconst App = () => <Navigator \/>;\n\nexport default App;<\/code><\/pre>\n
        This way you will have simple and functional navigation.<\/span><\/p>\n
        Reusable Services<\/span><\/h2>\n
        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
        Directory for creating services:<\/span><\/p>\n
        src\/services<\/b><\/p>\n
        They can be shared with multiple screens and components in your project.<\/span><\/p>\n
        Commonly used to create services that make contact with external APIs and use the <\/span>axios<\/b> library that we mentioned at the beginning of the post.<\/span><\/p>\n
        Shared Styles<\/span><\/h2>\n
        \"A
        Illustration by Dominic Magnifico<\/figcaption><\/figure>\n
        Based in <\/span>CSS preprocessor<\/span><\/a> we use some default files in our style structure:<\/span><\/p>\n
         <\/p>\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
         <\/p>\n
        index.js<\/b><\/p>\n
        \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
         <\/p>\n
        colors.js<\/b><\/p>\n
        \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
         <\/p>\n
        mixins.js<\/b><\/p>\n
        import {Dimensions,PixelRatio} from 'react-native';<\/code><\/pre>\n
        const WINDOW_WIDTH = Dimensions.get('window').width;\nconst guidelineBaseWidth = 375;\n\nexport const scaleSize = size => (WINDOW_WIDTH\/guidelineBaseWidth) * size;\n\nexport const scaleFont = size => 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}<\/pre>\n
         <\/p>\n
        spacing.js<\/b><\/p>\n
        \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
         <\/p>\n
        typography.js<\/b><\/p>\n
        \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
         <\/p>\n
        This is our basic style settings to structure our application.<\/span><\/p>\n
        This way you can import into any of your components the following Typography, Spacing, Colors, Mixins<\/strong> objects, which will have access to the functionality of each style object.<\/span><\/p>\n
        Extra: Custom Font<\/span><\/h3>\n
        To enable custom fonts you need to create the react-native.config.js<\/strong> in the project root and set the directory where your <\/span>.ttf<\/b> files are as follows:<\/span><\/p>\n
         <\/p>\n
        \nmodule.exports = {\n  assets:['.\/src\/assets\/fonts\/'],\n};<\/code><\/pre>\n
         <\/p>\n
        After that, you should run the `react-native link` to link your fonts to the iOS \/ Android native code.<\/span><\/p>\n
        Defining Utils<\/span><\/h2>\n
        We have the <\/span>src\/utils<\/b> directory where we add all our utility\/helper methods that can be shared across our entire project.<\/span><\/p>\n
        Whenever you come across situations where you get caught repeating code is a good situation to create a util\/helper.<\/span><\/p>\n
        Wrapping up<\/span><\/h2>\n
        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 development<\/a> of the project.<\/span><\/p>\n
        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
        Feel free to comment below if you have any questions, I\u2019ll be happy to help you.<\/span><\/p>\n
        Enjoy programming!<\/span><\/p>\n
        The repository of this example is available at <\/span>ReactNativeCklExample<\/span><\/a>.<\/span><\/p>\n
        References<\/span><\/h2>\n
        – <\/span>Why React developers should modularize their applications?<\/span><\/a><\/p>\n
        – <\/span>How to better organize your React applications?<\/span><\/a><\/p>\n
        – <\/span>How To Structure a React Native App For Scale<\/span><\/a><\/p>\n
        – <\/span>How to structure your project and manage static resources in React Native<\/span><\/a><\/p>\n
        \"\"<\/a><\/p>\n
        <\/div>\n","protected":false},"excerpt":{"rendered":"
        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":9477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[471,1163],"tags":[1148],"class_list":["post-6414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engenharia","category-process-br","tag-tag-development-br"],"yoast_head":"\nReact Native project structure: 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=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native project structure: 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:\/\/blog-stg.cheesecakelabs.com\/br\/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-07-01T17:14:39+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/\",\"name\":\"React Native project structure: best practices\",\"isPartOf\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\"},\"datePublished\":\"2019-09-16T13:54:30+00:00\",\"dateModified\":\"2022-07-01T17:14:39+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:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An efficient way to structure React Native projects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Empresa de desenvolvimento e design de aplicativos mobile & web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"name\":\"Helder Burato Berto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/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:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/helder-burato-berto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native project structure: 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":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"React Native project structure: 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:\/\/blog-stg.cheesecakelabs.com\/br\/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-07-01T17:14:39+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":{"Escrito por":null,"Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/","name":"React Native project structure: best practices","isPartOf":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website"},"datePublished":"2019-09-16T13:54:30+00:00","dateModified":"2022-07-01T17:14:39+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:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/efficient-way-structure-react-native-projects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog-stg.cheesecakelabs.com\/br\/"},{"@type":"ListItem","position":2,"name":"An efficient way to structure React Native projects"}]},{"@type":"WebSite","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/","name":"Cheesecake Labs","description":"Empresa de desenvolvimento e design de aplicativos mobile & web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","name":"Helder Burato Berto","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/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:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/helder-burato-berto\/"}]}},"_links":{"self":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/6414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/comments?post=6414"}],"version-history":[{"count":2,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/6414\/revisions"}],"predecessor-version":[{"id":10195,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/6414\/revisions\/10195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media\/9477"}],"wp:attachment":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media?parent=6414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/categories?post=6414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/tags?post=6414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}