React Native TypeScript Project Structure

A project structure defines how files and folders are organized.

A good structure helps developers:

• Find files quickly.
• Separate different responsibilities.
• Reuse components.
• Maintain large applications.
• Work efficiently in teams.

MyApp/
    src/
        components/
        screens/
        navigation/
        types/
        services/
        hooks/
        utils/
        context/
        store/
    App.tsx
    package.json
    tsconfig.json

The src folder can contain most application source code.

The src folder is commonly used to store application source files.

src/
    components/
    screens/
    navigation/
    services/
    types/

Keeping application code inside src makes the root project directory cleaner.

The components folder contains reusable UI components.

components/
    AppButton.tsx
    AppInput.tsx
    UserCard.tsx
    LoadingView.tsx

Components can be reused across multiple screens.

import React from "react";

import {
    Button
} from "react-native";

interface AppButtonProps {
    title: string;
    onPress: () => void;
}

export default function AppButton(
    {
        title,
        onPress
    }: AppButtonProps
): React.JSX.Element {

    return (
        <Button
            title={title}
            onPress={onPress}
        />
    );
}

The screens folder contains complete application screens.

screens/
    HomeScreen.tsx
    LoginScreen.tsx
    ProfileScreen.tsx
    SettingsScreen.tsx
    ProductScreen.tsx

A screen usually combines several components to create a complete page.

import React from "react";

import {
    View,
    Text
} from "react-native";

export default function HomeScreen():
    React.JSX.Element {

    return (
        <View>
            <Text>
                Welcome to My App
            </Text>
        </View>
    );
}

The navigation folder can contain navigators and navigation type definitions.

navigation/
    AppNavigator.tsx
    types.ts

Keeping navigation code separate makes it easier to manage application screens and route types.

export type RootStackParamList = {

    Home: undefined;

    Profile: {
        userId: number;
    };

    Settings: undefined;

};

This type defines the parameters expected by each navigation route.

The types folder can contain reusable TypeScript interfaces, type aliases, and other shared types.

types/
    user.ts
    product.ts
    api.ts
    navigation.ts

export interface User {
    id: number;
    name: string;
    email: string;
}

The interface can then be imported into different files.

import {
    User
} from "../types/user";

The services folder can contain API and external service functions.

services/
    api.ts
    userService.ts
    authService.ts
    productService.ts

This keeps network-related code separate from UI components.

import axios from "axios";

import {
    User
} from "../types/user";

export const getUsers =
    async (): Promise<User[]> => {

    const response =
        await axios.get<User[]>(
            "/users"
        );

    return response.data;
};

The hooks folder can contain reusable custom React hooks.

hooks/
    useAuth.ts
    useUsers.ts
    useTheme.ts

Custom hooks can contain reusable state and application logic.

import {
    useState
} from "react";

export function useCounter():
    [
        number,
        () => void
    ] {

    const [count, setCount] =
        useState<number>(0);

    const increment = (): void => {

        setCount(
            previous =>
                previous + 1
        );

    };

    return [
        count,
        increment
    ];
}

The utils folder can contain reusable helper functions.

utils/
    validation.ts
    formatDate.ts
    storage.ts
    constants.ts

Utility functions should generally perform focused reusable tasks.

Constants that are shared across the application can be placed in a constants file or folder.

export const API_URL =
    "https://example.com/api";

export const APP_NAME =
    "Student App";

If the application uses Context API, context files can be grouped together.

context/
    UserContext.tsx
    ThemeContext.tsx
    AuthContext.tsx

Each context can have its own TypeScript interfaces and Provider.

Applications using Redux Toolkit can organize Redux code inside a store or app folder.

store/
    store.ts
    hooks.ts

Feature-specific Redux slices can be kept separately.

features/
    user/
        userSlice.ts
        userTypes.ts

    product/
        productSlice.ts
        productTypes.ts

    cart/
        cartSlice.ts
        cartTypes.ts

Feature-based organization keeps related state, actions, and types together.

Images, icons, fonts, and other static files can be organized inside an assets folder.

assets/
    images/
    icons/
    fonts/

Keeping assets separate helps maintain a clean source directory.

Configuration may include API URLs, application settings, and build configuration.

config/
    api.ts
    app.ts

Sensitive information should not be placed directly into source code or committed to a public repository.

The tsconfig.json file contains TypeScript compiler configuration.

It can define compiler options, included files, strictness settings, module configuration, and other TypeScript behavior.

{
    "compilerOptions": {
        "strict": true
    }
}

Consistent file names make a project easier to understand.

• HomeScreen.tsx for screens.
• UserCard.tsx for components.
• userService.ts for services.
• useAuth.ts for custom hooks.
• UserContext.tsx for context.
• userSlice.ts for Redux slices.

Another approach is to organize files by application feature instead of only by technical type.

features/
    auth/
        LoginScreen.tsx
        authService.ts
        authTypes.ts

    users/
        UserListScreen.tsx
        UserCard.tsx
        userService.ts
        userTypes.ts

    products/
        ProductScreen.tsx
        productService.ts
        productTypes.ts

MyApp/
    src/

        components/
        screens/
        navigation/

        features/
            auth/
            users/
            products/

        services/
        hooks/
        types/
        utils/
        context/
        store/

    assets/

    App.tsx
    package.json
    tsconfig.json

This type of structure can work well as an application grows.

import {
    User
} from "../types/user";

import AppButton
    from "../components/AppButton";

import {
    getUsers
} from "../services/userService";

Relative imports should point to the correct file location.

StudentApp/
│
├── src/
│   │
│   ├── components/
│   │   ├── AppButton.tsx
│   │   ├── AppInput.tsx
│   │   └── UserCard.tsx
│   │
│   ├── screens/
│   │   ├── HomeScreen.tsx
│   │   ├── LoginScreen.tsx
│   │   └── ProfileScreen.tsx
│   │
│   ├── navigation/
│   │   ├── AppNavigator.tsx
│   │   └── types.ts
│   │
│   ├── services/
│   │   ├── api.ts
│   │   └── userService.ts
│   │
│   ├── types/
│   │   └── user.ts
│   │
│   ├── hooks/
│   │   └── useAuth.ts
│   │
│   ├── context/
│   │   └── AuthContext.tsx
│   │
│   ├── store/
│   │   ├── store.ts
│   │   └── hooks.ts
│   │
│   └── utils/
│       └── validation.ts
│
├── assets/
│   ├── images/
│   └── icons/
│
├── App.tsx
├── package.json
└── tsconfig.json

• Putting every file in one folder.
• Creating very large components.
• Mixing API code directly into every screen.
• Duplicating the same interfaces in many files.
• Using unclear file names.
• Creating unnecessary folders for very small projects.
• Keeping unrelated application logic together.

A good React Native TypeScript project structure separates different responsibilities such as components, screens, navigation, services, types, hooks, context, Redux, utilities, and assets.

For small applications, a simple structure may be enough. As the application grows, feature-based organization can make the project easier to maintain.

You should now understand the purpose of the major project folders, TypeScript files, reusable components, API services, navigation types, Context API, Redux Toolkit, and scalable project organization.