Prahlad Inala
Prahlad Inala

Follow

Prahlad Inala

Follow
React Native 101: File Structure

React Native 101: File Structure

Prahlad Inala's photo
Prahlad Inala
ยทApr 17, 2023ยท

4 min read

Play this article

Table of contents

  • node_modules
  • android
  • ios
  • index.js or index.tsx
  • package.json
  • babel.config.js
  • metro.config.js
  • App.js or App.tsx
  • assets
  • app.json

The project structure for a React Native CLI project can vary based on the specific requirements of the project and how it is organized by the development team. However, there are some common folders and files that are typically found in a React Native CLI project:

  1. node_modules

    This folder contains all the third-party dependencies and packages installed using npm or yarn. When you install a package using npm or yarn, it is downloaded and saved in the node_modules folder. These packages can be accessed in your project using the import statement.

  2. android

    This folder contains the Android native code files and resources for the app. This includes the AndroidManifest.xml file, which contains important configuration information for the app, such as permissions, activities, and services. The java folder contains the Java source code for the app, while the res folder contains resources such as images, layouts, and strings.

  3. ios

    This folder contains the iOS native code files and resources for the app. This includes the Info.plist file, which contains important configuration information for the app, such as permissions and the app's bundle identifier. The app folder contains the Objective-C and Swift source code for the app, while the Assets folder contains any images or other assets used by the app.

  4. index.js or index.tsx

    This is the entry point of the app where the main React Native component is registered and rendered. This file typically imports the necessary dependencies and initializes the app using the AppRegistry.registerComponent method.

     /**
      * @format
      */
    
     import {AppRegistry} from 'react-native';
     import App from './App';
     import {name as appName} from './app.json';
    
     AppRegistry.registerComponent(appName, () => App);
    

  5. package.json

    This file contains information about the project, such as the name, version, dependencies, and scripts. It is used by npm or yarn to manage the project's dependencies and scripts.

     {
       "name": "Awesome01",
       "version": "0.0.1",
       "private": true,
       "scripts": {
         "android": "react-native run-android",
         "ios": "react-native run-ios",
         "lint": "eslint .",
         "start": "react-native start",
         "test": "jest"
       },
       "dependencies": {
         "react": "18.2.0",
         "react-native": "0.71.4"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
         "@babel/preset-env": "^7.20.0",
         "@babel/runtime": "^7.20.0",
         "@react-native-community/eslint-config": "^3.2.0",
         "@tsconfig/react-native": "^2.0.2",
         "@types/jest": "^29.2.1",
         "@types/react": "^18.0.24",
         "@types/react-test-renderer": "^18.0.0",
         "babel-jest": "^29.2.1",
         "eslint": "^8.19.0",
         "jest": "^29.2.1",
         "metro-react-native-babel-preset": "0.73.8",
         "prettier": "^2.4.1",
         "react-test-renderer": "18.2.0",
         "typescript": "4.8.4"
       },
       "jest": {
         "preset": "react-native"
       }
     }
    

  6. babel.config.js

    This file contains the configuration for the Babel compiler, which is used to transform the ES6+ JavaScript code to a compatible version that can be executed on both Android and iOS platforms. It is used to configure the plugins and presets used by Babel to transform the code.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

  1. metro.config.js

    This file contains the configuration for the Metro bundler, which is used to bundle and serve the JavaScript code for the app. It is used to configure the options for the bundler, such as the location of the source files and the target platform.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

  1. App.js or App.tsx

    This file contains the main component of the app and is typically the first component that is rendered. This component is responsible for rendering the UI of the app and responding to user interactions.

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

  1. assets

    This folder contains any images, fonts, or other assets used by the app. These assets can be accessed in the app using the require() method, which allows you to specify the path to the asset file.

  2. app.json

    This file contains the app name as a JSON format

{
  "name": "Awesome01",
  "displayName": "Awesome01"
}

Overall, the project structure for a React Native CLI project is similar to that of a standard React project, but with additional folders and files specific to the native platforms. The project structure can be customized as needed to suit the requirements of the project.

Did you find this article valuable?

Support Prahlad Inala by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this