AppCatalyst RN React Native Starter Kit

Folder Structure

Here’s a quick overview of the folder structure and its purpose:


/
├── android/          # Native Android project files
├── app/              # Entry point and main application logic
├── assets/           # Static assets like images, fonts, and other media
├── components/       # Reusable UI components
├── constants/        # Static values like API endpoints, theme variables, etc.
├── hooks/            # Custom React hooks for shared logic
├── ios/              # Native iOS project files
├── lib/              # Utility functions or third-party library integrations
├── prisma/           # Prisma configuration files for database management
├── services/         # API calls and service logic (e.g., authentication, analytics)
├── state/            # Application state management files (e.g., Redux, Context API)
├── styles/           # Global styles and theming configurations
├── templates/        # Template files for creating new components, modules, etc.
├── translations/     # Localization files for multiple languages
├── others/           # Miscellaneous files or folders (e.g., logs, scripts, configs, etc.)

Directory Name	Purpose	Key Contents & Responsibilities
android/	Native Android Project	Contains the platform-specific files for the Android build (Java/Kotlin code, build configurations, native modules). You typically interact with this folder for configuring specific native features or libraries.
app/	Entry Point & Main Application Logic	The heart of your application’s routing and screen components. Using Expo Router, this folder defines the navigation structure (screens, layouts, tabs, drawers) based on its file hierarchy.
assets/	Static Assets	Stores all static media files used by the application, such as custom fonts, images, local video clips, and the application’s icon and splash screen images.
components/	Reusable UI Components	Holds small, reusable, presentation-focused UI elements. Examples include custom buttons, input fields, modals, and navigation bars—anything that can be used on multiple screens.
constants/	Static Configuration Values	Houses values that rarely change, such as configuration for API endpoints, numeric constants, application settings, and global theme variables (colors, sizes) not directly related to styling.
hooks/	Custom React Hooks	Contains all custom React hooks (useAuth, usePermissions, useDataFetcher, etc.). This promotes shared logic, reusability, and encapsulation of complex state or effects.
ios/	Native iOS Project	Contains the platform-specific files for the iOS build (Swift/Objective-C code, build configurations, native modules, Info.plist).
lib/	Utility Functions & Integrations	A general-purpose folder for smaller, non-UI utilities. This includes helper functions (formatDate), third-party library wrappers, or any code that doesn’t fit neatly into hooks or services.
prisma/	Database Configuration	Holds all files and settings related to Prisma, including the schema file (schema.prisma) and local setup for managing database migrations (essential when using Supabase/PostgreSQL).
services/	API & Service Logic	Manages all external interactions and business logic. This includes API call functions, authentication logic (AuthService), analytics tracking, and push notification handlers.
state/	Application State Management	Where your Zustand stores, context providers, or other global state files are defined. This separates the global data flow from the UI components.
styles/	Global Styles and Theming	Contains the core styling configurations, including the theme file, Tailwind/NativeWind setup files, and any necessary global style definitions.
templates/	Code Scaffolding	Stores template files used by automation scripts (like the ones suggested in the “Big Problems Solved” section) to quickly generate new screens, components, or modules with kit code.
translations/	Localization Files	Contains the JSON or resource files for internationalization (i18n), mapping language keys to their translated strings (e.g., en.json, es.json).

This structure is designed to promote modularity, reusability, and maintainability, making it easier to scale your application as it grows.

Importing files

We use absolute imports throughout the project for better readability and maintainability. You can import files using the following syntax:

/app/(drawer)/support.tsx


import React from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { DrawerActions, useNavigation } from '@react-navigation/native';
 
// This section imports custom components and icons
import { H1, H4 } from '@/components/ui/typography';
import Container from '@/components/Container';
import Icon from '@/lib/icons/lucidNW';
 
export default function SupportScreen() {
  const navigation = useNavigation();
 
  return (
    <Container center className='max-w-md'>
      <ScrollView className='flex-1' showsVerticalScrollIndicator={false}>
        {/* Header */}
        <View className='flex-row items-center justify-between mt-4 mb-8 mr-auto'>
          <TouchableOpacity
            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
          >
            <Icon name='TextAlignJustify' size={24} color='black' />
          </TouchableOpacity>
        </View>
 
        ... rest of the code ...
      </ScrollView>
    </Container>
  );
}

This approach is very useful when you are working on a large project with a lot of files and folders and it can be done by updating the tsconfig.json file to the following:

tsconfig.json


{
	"compilerOptions": {
		...
		"baseUrl": ".",
		"paths": {
			"@/*": ["./*"]
		}
	}
}