Project structure overview in React Native

Introduction

Knowing the project structure helps you find files easily and understand how your app is organized.

When you start a new React Native app and want to know where to put your code.

When you want to add images or styles to your app and need to find the right folder.

When you want to fix bugs or add features and need to understand how files connect.

When you share your project with others and want them to understand it quickly.

Syntax

React Native

myApp/
  ├─ android/
  ├─ ios/
  ├─ src/
  │   ├─ components/
  │   ├─ screens/
  │   ├─ assets/
  │   ├─ App.js
  ├─ package.json
  ├─ babel.config.js
  └─ node_modules/

android/ and ios/ folders contain platform-specific code.

src/ is where your app's main code lives, like components and screens.

Examples

Example files inside the src folder: a button component, a home screen, and an image.

React Native

src/components/Button.js
src/screens/HomeScreen.js
src/assets/logo.png

Important config files and dependencies folder at the project root.

React Native

package.json
babel.config.js
node_modules/

Sample App

This is a simple React Native app component placed inside src/App.js. It shows a welcome message centered on the screen.

React Native

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to MyApp</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold'
  }
});

Important Notes

Keep your code organized by grouping similar files in folders like components and screens.

Platform folders android and ios are usually not changed often unless you add native code.

Use package.json to manage your app's dependencies and scripts.

Summary

React Native projects have folders for platform code and app code.

Organize your app code inside src for clarity.

Understanding structure helps you build and maintain your app easily.