avatarCkmobile

Summary

The provided content outlines the structure and key files of an Expo project, including configuration files, dependencies, and the main application code.

Abstract

The article delves into the various components of an Expo project's folder and file structure. It explains the purpose of essential files such as .gitignore, app.json, babel.config.json, and package.json. The .gitignore file is crucial for excluding unnecessary files like node_modules from version control. The app.json file contains project metadata, including its name, version, and platform-specific settings like icons and splash screens. The babel.config.json file is used for configuring Babel, a JavaScript compiler that enables the use of modern features. The package.json file manages project dependencies and scripts. The article also touches on the development process, highlighting the convenience of live reloading during app development. Additionally, it provides resources for further learning, such as a related Udemy course and a series of complete React Native articles, and invites readers to subscribe to a YouTube channel and follow the author on Medium for more insights.

Opinions

  • The author emphasizes the importance of the .gitignore file to prevent tracking large files like node_modules.
  • The app.json file is highlighted as a central location for project configuration, emphasizing its role in defining the app's identity and appearance across platforms.
  • Babel's role in allowing developers to write modern JavaScript is underscored, indicating its significance in the development workflow.
  • The live reloading feature of Expo is presented as a time-saving tool that enhances the developer experience by providing instant feedback on code changes.
  • The author promotes their Udemy course and Medium articles as valuable resources for learning React Native with Expo, suggesting confidence in their educational content.
  • By encouraging subscriptions to their YouTube channel and Medium publication, the author expresses a commitment to ongoing content creation and community engagement in the field of React Native development.

Expo folder and file structure

In this article, we are going to walk through the folder and files of the Expo project, including:

  • .gitignore
  • app.json
  • babel.config.json
  • package.json
Photo by Hossain Khan on Unsplash

Related Course:

Complete React Native articles:

  1. How to build a React Native app with Expo
  2. How to Run the Expo React Native app on the emulator
  3. Expo folder and file structure
  4. Expo React Native View, Text and Style
  5. Expo React Native — using React Hook useState()
  6. How to Use TextInput Component to Change State in React Native?
  7. How to Use Expo React Native List and ScrollView
  8. How and why we use Flatlist in Expo React Native
  9. What is TouchableOpacity in Expo React Native?
File structure of the Expo Poject

These are all of the different folders and files generated by Expo when we start a new react project.

First of all at the top we have a couple of folders Expo and Expo shared.

These are just for expo configuration and settings files we do not need to go in there.

We also have an assets folder and that is going to contain any kind of images that we want to use in our app later on.

We have node modules folder and that folder contains all of the different dependencies and packages that we need in this project for it to work so if we install any third-party packages in the future. Those are going to be installed into this node modules folder.

We do not have to directly go into this folder and change anything. We just need to know that this is where we keep all of those libraries when we install them.

We have a git ignore file and this file is used by git to help decide which files to track or rather not to track so this is for version control.

.gitignore

For example, we can see the .gitignore contain node_modules. We do not want to track the node_modules because the file size of node_modules is very large. We just want to clone the project and install the library by “npm install” rather than cloning from the git.

“App.js” file is the actual file with all of our project code in it. This file is the stuff will actually be editing to make our app.

We can already see we have a functional component right here called “App”

up and that contains a JSX template.

export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}

This will be the root component of our app and currently it just contains the content that we see on our device.

This root component uses some of the built-in react components view and text.

app.json

//app.json
{
"expo": {
"name": "first-project",
"slug": "first-project",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}

“app.json” contains information about our project, its name, its supported platforms, icon, splash images.

babel.config.json

“babel.config.json” file is for configuring how babel works with this project and babel is just a compiler which allows us to use modern JavaScript features.

package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}

“package.json” is used to track our different dependencies of the project and also some scripts as well so just extra information about the project.

At last, if the process running, then it is going to reload that over here on the fly for us so we don’t have to do all of that restarting all of the time. We just need to change the code and save, the result will update on the emulator at instant.

Subscribe Youtube:

Follow Us:

Expo
Gitignore
React Native
Git
Mobile App Development
Recommended from ReadMedium
avatarAnkit
Deep Diving Into React Native Deep Linking: A Cross-Platform Solution Guide

Struggling with app navigation across platforms? Let’s crack the deep linking code for seamless user journeys.

8 min read
avatarEnzo61
Using .env value in React Native Expo EAS build

Issue

2 min read
avatarJayant Kumar🇮🇳
Setup Environment (Debug , Staging , Production) in ReactNative Android Application

In this article we will see how to setup debug , staging and production environment in React Native Android Application.

5 min read
avatarAneeqa Khan
How to Set Up and Use Deep Linking in React Native

Introduction

2 min read
avatarParita Dey
Modal implementation in React Native

A Modal in React Native is a component that presents content above the rest of the app. It is used to display information or user…

5 min read
avatarhabtesoft
What is Punycode in Node.js?

Punycode is a way to represent Unicode (non-ASCII) characters using only ASCII characters, which is particularly important in the context…

2 min read