Struktur React Native Modern

React Native memiliki fleksibilitas penuh dalam penyusunan struktur folder. Namun tanpa aturan yang jelas, project mudah menjadi berantakan dan sulit dikembangkan. Struktur modern membantu aplikasi tetap rapi, scalable, dan mudah dipahami developer lain.

1. Struktur Folder React Native Modern

Berikut struktur yang digunakan banyak perusahaan teknologi:

/src
  /screens
  /components
  /navigation
  /services
  /context
  /hooks
  /utils
  /assets
    /images
    /icons
App.tsx

2. Penjelasan Folder

/screens

Semua halaman aplikasi, misalnya: HomeScreen, LoginScreen, ProfileScreen.

/components

Komponen kecil yang dapat digunakan ulang (Button, Card, Input, Modal).

/navigation

Berisi file untuk Stack Navigator, Tab Navigator, atau Drawer Navigator.

// navigation/MainStack.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function MainStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

/services

File untuk request API menggunakan Axios.

// services/api.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://api.example.com',
});

/context

Global state menggunakan React Context (AuthContext, ThemeContext, CartContext).

// context/AuthContext.tsx
import { createContext } from 'react';

export const AuthContext = createContext(null);

/hooks

Custom hooks (useAuth, useFetch, useForm).

/utils

Helper function seperti formatDate, currency, validator.

/assets

Folder untuk gambar, ikon, font.

3. Struktur File App.tsx

Contoh sederhana entry utama aplikasi:

import { NavigationContainer } from '@react-navigation/native';
import MainStack from './src/navigation/MainStack';

export default function App() {
  return (
    <NavigationContainer>
      <MainStack />
    </NavigationContainer>
  );
}

4. Kenapa Struktur Modern Itu Penting?

• Memisahkan logic, UI, dan state secara jelas.
• Mudah scaling ketika fitur banyak.
• Developer baru cepat memahami proyek.
• Performa aplikasi meningkat dengan struktur rapi.

5. Best Practice Struktur React Native

• Gunakan TypeScript untuk kontrol data lebih kuat.
• Pisahkan API, UI, dan state secara jelas.
• Jangan letakkan semua file di folder yang sama.
• Gunakan semantic naming (LoginScreen, useAuth, AuthContext).
• Buat komponen kecil yang reusable.

Dengan struktur modern di atas, aplikasi React Native menjadi lebih profesional, mudah dirawat, dan siap dikembangkan untuk jangka panjang.