Project Structure

Setup typescript for easy import

During your journey writing clean and reusable code, for sure you are going to use import x for "file" statement and as you code source grow you will find yourself writing import some wired import statement like the following:

import foo from "../.../../folder/foo";

The best way to make your code clean in such cases is to use absolute import.

To start using absolute import in your project you need to update baseUrl config inside the tsconfig.json configuration file to ./src.

Aso you will need to use module-resolver babel plugin to update resolver root folder for babel like the following:

plugins: [    'module:react-native-dotenv',    [      'module-resolver',      {        root: ['./src'],        extensions: [          '.ios.ts',          '.android.ts',          '.ts',          '.ios.tsx',          '.android.tsx',          '.tsx',          '.jsx',          '.js',          '.json',        ],      },    ],  ],

Project structure:

The is a real folder tree of a React Native application src folder we Recommend to follow:

.├── index.tsx├── api│   ├── usePosts.tsx│   └── index.tsx├── core│   ├── Auth│   ├── I18n│   └── index.tsx├── navigation│   ├── AuthNavigator.tsx│   ├── NavigationContainer.tsx│   ├── RootNavigator.tsx│   ├── TabNavigator.tsx│   └── index.tsx├── screens│   ├── Home│   ├── Login│   └── index.tsx├── translations│   └── en.json│   └── ar.json└── ui    ├── Button.tsx    ├── ErrorHandler    ├── Form.tsx    ├── Icon.tsx    ├── Input.tsx    ├── Screen.tsx    ├── Text.tsx    ├── Toast.tsx    ├── View.tsx    ├── index.tsx    └── theme

• ui : In the ui folder we create our design system and all common components and theme.
• core : This folder is useful for any Provider and general concepts( a folder that you can easily copy-paste between project). here, we put our Auth, localization...
• translations : translations files
• navigation: Any Navigation-related components ( Stacks, Tabs ....)
• api : we create hooks to call our API.
• screens: A folder for our App screens (a folder for every screen)

You can think of this as modules and every module have an index file that exports all components and functions from the entire folder, which makes importing components very clean.

Example of a screen Home:

import React from "react";import { Button, Screen, Text, View } from "ui";import { API } from "@env";import { translate, useAuth } from "core";
export const Home = () => {  const { signOut } = useAuth();  return (    <Screen>      <View flex={1} justifyContent="center">        <Text variant="header" textAlign="center">          {translate("name")}        </Text>        <Text variant="body" textAlign="center">          This is An ENV Var : {API}        </Text>        <Button label="LogOut" onPress={signOut} />      </View>    </Screen>  );};

👉 https://github.com/obytes/react-native-template-obytes/tree/master/template