RN Project Structure

This codebase is of a fairly typical react-native structure. The table below lists the root directories and their purpose:

Directory	Description
android	Contains the native android project which includes build specific configs and code for our native modules
ios	Contains the native ios project which includes build specific configs and code for our native modules
app	Contains the bulk of our shared JS code
ladbrokes, neds	Contains the brand specific JS code.
@types	Contains all the shared/global type definitions
e2e	End-to-end detox testing stuff
patches	Patch package stuff
plugins	Native implementations/wrappers for Vue plugins
scripts	Some scripts: generate icons, install stuff etc.
test-utils	Some global util functions for our unit/integration tests
utils	Contains some util functions that are attached to the array prototype, probably should be deprecated and removed
index.js	Entry point for the JS code
AppWrapper.tsx	Outer wrapper, handles displaying error screens and maintenance poll
App.tsx	Wrapper that includes some global polls, subscriptions and startup operations
AppEntry.tsx	Just points to the navigator, not too sure why we did this but I guess for future refactoring flexibility

/app is where the majority of the project lives, and is where you will spend most of your time.

app
|
+-- api            # API functions and utilities used throughout the codebase
|
+-- assets         # assets (e.g. images) used by the project
|
+-- components     # components used throughout the codebase
|
+-- config         # all the global configuration, env variables etc. get exported from here and used in the app
|
+-- features       # the code for each of our features
|
+-- hooks          # shared hooks used across the entire application
|
+-- modules        # re-exporting different libraries preconfigured for the application
|
+-- navigation     # navigator setup for the app
|
+-- plugins        #
|
+-- screens        # core app screens
|
+-- store          # app wide redux store files
|
+-- theme          # theme config for the apps
|
+-- transforms     # various utilities for transforming data
|
+-- utils          # shared utility functions
|
+-- validators     # form validators

The most important folder here is /features as it contains the majority of project code, and is the home for each "vertical" within the app. Each feature contains domain specific code for that respective feature, structured similarly to /app. This allows us to scope functionality to a feature, define clearer boundaries for teams, and avoid scaling issues encountered when using a flatter structure.

A feature will look something like:

app
|
+-- features
|   |
+---+-- social-profiles
|   |   |
+---+---+-- utils        # utility functions for social-profiles
|   |   |
+---+---+-- components   # components for social-profiles
|   |   |
+---+---+-- screens      # screens for social-profiles
|   |   |
+---+---+-- utils        # utilities for social-profiles
|   |   |
+---+---+-- store        # store for social-profiles
|   |   |
+---+---+-- index.ts     # entry point for social-profiles

When consuming code from a feature from other parts of the codebase, this allows you to treat it like a library:
import { SocialProfilesAvatar } from "@feature/social-profiles"

For more information around this structure and why we chose it, check out the initial RFC proposing it.

File and folder naming conventions

We follow naming conventions typical within a Node or React application:

• React component files and screens (e.g. MyComponent.tsx, GroupModeHomeScreen.tsx) are named using PascalCase.
• React hook files (e.g. useThisHook.ts) are named with camelCase, following React hook naming convention.
• Everything else (e.g. string-formatter.ts, or notification-module.ts) uses kebab-case. This includes both folders and files.

Internal dependencies

This project has a few internal project dependencies. You can find information on them in the Dependency section of the Project Overview.