Best practices for React Native: Naming Convention

Any codebase needs naming conventions to be organized. We will examine ways to make the React Native codebase readable, structured, and scalable in today’s discussion of the codebase. Adhering to clear and consistent naming conventions helps reduce mistakes, improve readability, and promote teamwork in programming. Good and bad naming practices are illustrated in the following set of useful principles.

1. File and Folder Naming

a. Use Clear and Descriptive Names

Choose names that clearly explain the file or folder’s content. Use PascalCase for component files and camelCase for utility files.

• Good Approach: SignUpForm.js, AboutApp.js, apiClient.js
• Bad Approach: signupform.js, aboutapp.js, apiclient.js

b. Organize Files by Feature or Functionality

Group related files within folders based on their functionality or purpose to keep things tidy.

• Good Approach:

  /src
    /components
      /AboutApp
        AboutApp.js
        AboutApp.styles.js
        AboutApp.test.js
    /screens
      /Home
        HomeScreen.js
        HomeScreen.styles.js
        HomeScreen.test.js

2. Component Naming

a. Use PascalCase for Components

PascalCase is standard for naming components, making them distinct from other functions or variables.

• Good Approach: SignUpForm, AboutApp, AppContainer
• Bad Approach: signupform, aboutapp, appcontainer

b. Add Context to Component Names

Prefix custom components with a relevant feature name to prevent conflicts and add clarity.

• Good Approach: LoginButton, UserHeader
• Bad Approach: Button, Header

3. Variable and Function Naming

a. camelCase for Variables and Functions

The standard in JavaScript for naming variables and functions is camelCase.

• Good Approach: userName, fetchData, handleSubmit
• Bad Approach: UserName, Fetchdata, handle_submit

b. Prefix Boolean Variables

When you use boolean variables, you should put “is” or “has” in front of them to make their purpose clear.

• Good Approach: isLoading, hasError, isAuthenticated
• Bad Approach: loading, error, authenticated

c. Use Descriptive Function Names

Function names should clearly explain their action.

• Good: getUserData(), updateProfile(), handleButtonClick()
• Bad: getData(), update(), clickHandler()

4. Style Naming

a. camelCase for Style Objects

To follow JavaScript rules for naming objects and values, use camelCase.

• Good Approach:

• Bad Approach:

  const Styles = StyleSheet.create({
    Container: {
      Flex: 1,
      Justify_Content: 'center',
      Align_Items: 'center',
    },
    Button_Text: {
      Font_Size: 16,
      Color: '#ffffff',
    },
  });

b. Add Context to Style Names

Style objects should include the element name they are associated with to provide context.

• Good Approach: headerContainer, footerButton, cardTitle
• Bad Approach: container, button, title

5. Naming Constants and Enums

a. UPPERCASE_SNAKE_CASE for Constants

Constants should use UPPERCASE_SNAKE_CASE to distinguish them from regular variables.

• Good Approach : BASE_URL, DEFAULT_FILE_NAME, MIN_RETRIES
• Bad Approach: baseURl, defaultFileName, minRetries

b. Use Clear Names for Enums

Enums or objects should have descriptive names that clearly explain their purpose.

• Good:

  const USER_PERMISSIONS = {
    ADMIN: 'admin',
    EDITOR: 'editor',
    VIEWER: 'viewer',
  };

• Bad:

  const user_permissions = {
    A: 'admin',
    E: 'editor',
    V: 'viewer',
  };

6. Event Handler Naming

a. Use “handle” Prefix

Event handler functions should start with “handle” to indicate they respond to events in any programming language.

• Good Approach: handleClick(), handleSubmit(), handleChange()
• Bad Approach: onClick(), submit(), change()

b. Include the Event or Element in the Name

To clarify their purpose, include the element or action in event handler names.

• Good: handleButtonClick(), handleFormSubmit(), handleInputChange()
• Bad: handleClick(), handleSubmit(), handleChange()

7. Avoid Abbreviations

a. Use Full Words

Avoid abbreviations to keep names clear and understandable.

• Good: userName, getUserProfile, createAccount
• Bad: usrNm, getUsrPrfl, crtAcc

8. Consistency Across the Project

a. Stick to One Convention

Consistency is key. Stick to the same naming patterns throughout the entire project.

• Good: Consistent use of PascalCase for components, camelCase for variables/functions, and UPPERCASE_SNAKE_CASE for constants.
• Bad: Mixing naming conventions (PascalCase, camelCase, etc.) without consistency.

9. Internationalization (i18n)

a. Name Translation Keys Clearly

Translation keys should be descriptive and consistent for easier localization.

• Good:

  const translations = {
    en: {
      title: 'Select a Language',
    },
    np: {
      title: 'भाषा छान्नुहोस्',
    },
  };

• Bad:

  const translations = {
    en: {
      text: 'Select a Language',
    },
    es: {
      text: 'भाषा छान्नुहोस्',
    },
  };

Conclusion

You can make sure your React Native code is scalable, easy to read, and maintain by adhering to these best practices. Code that has consistent, descriptive names is easier to understand and maintain, which is important when working in teams or coming back to the code later. Accept these unambiguous naming rules to raise the calibre of your work.