Optimal React Native Architecture and Example

Designing an effective structure for a React Native application is crucial for maintaining scalability, readability, and ease of maintenance. Here’s a recommended structure and a sample to get you started:

Recommended Structure:

1. src Directory: The main container for your app's source code.

• components: For shared components (e.g., buttons, inputs).
• screens: For different screens of your app (e.g., HomeScreen, ProfileScreen).
• navigation: For your navigation setup (e.g., stack, tab navigators).
• services: For network requests and other services.
• utils: For utility functions and constants.
• assets: For static assets like images, fonts, etc.
• themes: For styling themes (e.g., colors, sizes, themes).
• hooks: For custom hooks.
• store: If using Redux or similar, for your actions, reducers, and store setup.

2. Other Root-Level Directories and Files:

• android and ios: Native code directories.
• __tests__: For your test files.
• index.js: Entry point of your app.

Sample Structure:

MyApp/
├─ src/
│  ├─ components/
│  │  ├─ Button.js
│  │  ├─ InputField.js
│  ├─ screens/
│  │  ├─ HomeScreen.js
│  │  ├─ ProfileScreen.js
│  ├─ navigation/
│  │  ├─ AppNavigator.js
│  ├─ services/
│  │  ├─ api.js
│  ├─ utils/
│  │  ├─ constants.js
│  ├─ assets/
│  │  ├─ images/
│  │  ├─ fonts/
│  ├─ themes/
│  │  ├─ colors.js
│  │  ├─ metrics.js
│  ├─ hooks/
│  │  ├─ useCustomHook.js
│  ├─ store/
│  │  ├─ actions/
│  │  ├─ reducers/
│  │  ├─ store.js
├─ android/
├─ ios/
├─ __tests__/
├─ index.js
├─ package.json
├─ App.js

Example:

App.js

import React from 'react';
import AppNavigator from './src/navigation/AppNavigator';
const App = () => {
 return <AppNavigator />;
};
export default App;

AppNavigator.js (in src/navigation/)

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

HomeScreen.js (in src/screens/)

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Welcome to the Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
};

export default HomeScreen;

This is a basic structure and sample. Depending on the complexity of your app, you may need to adjust and add more layers or services. The key is to keep it organized and maintainable.