Profile And Settings Module

Quick Answer

The profile module lives in src/core/profile. It provides reusable screens for editing account details, user settings, blocked users, contact us, public profile display, and form-driven settings UI.

Most profile customization is done through app config, not by rewriting the form renderer.

Source Map

src/core/profile
├── hooks
├── ui
└── index.ts

Important exports:

Export	Purpose
IMEditProfileScreen	User profile edit screen.
IMUserSettingsScreen	Settings list for account-level actions.
IMProfileSettingsScreen	Profile-related settings screen.
IMBlockedUsersScreen	List and manage blocked users.
IMContactUsScreen	Contact/support form.
IMUserProfileComponent	Reusable public profile UI.
IMFormComponent	Form renderer used by edit/settings screens.

Form Configuration

IMFormComponent renders fields from a config object. It supports text, switch, button, and select fields.

Example:

const editProfileFields = {
  sections: [
    {
      title: 'Public Profile',
      fields: [
        {
          displayName: 'First Name',
          type: 'text',
          editable: true,
          key: 'firstName',
          placeholder: 'Your first name',
        },
        {
          displayName: 'Last Name',
          type: 'text',
          editable: true,
          key: 'lastName',
          placeholder: 'Your last name',
        },
      ],
    },
    {
      title: 'Private Details',
      fields: [
        {
          displayName: 'Phone Number',
          type: 'text',
          editable: true,
          key: 'phone',
          placeholder: 'Your phone number',
        },
      ],
    },
  ],
}

The parent screen receives changes through:

Callback	Purpose
onFormChange	Called when a field changes.
onFormButtonPress	Called when a button field is pressed.

Where To Customize

Start with the app config and look for fields such as:

editProfileFields
userSettingsFields
contactUsFields

Use those config fields to add, remove, reorder, or rename profile and settings fields. Edit src/core/profile/ui/IMFormComponent only when you need a new reusable field type or form behavior.

Data Contract

Field key values should match the user object fields used by the app and backend. Common keys include:

firstName
lastName
email
phone
profilePictureURL

If you add custom profile fields:

1. Add the field to the profile form config.
2. Make sure the save flow writes it to your backend.
3. Update Firestore rules or backend validation.
4. Update public profile screens if the field should be visible.
5. Update privacy policy/store disclosures if the field collects sensitive data.

Blocked Users

Blocked users are connected to the user reporting module. If your app supports chat, feed posts, reviews, or other user-generated content, keep profile blocking and reporting flows enabled and tested.

See User Reporting.

Verification Checklist

Test:

• edit profile opens;
• required fields validate;
• profile save updates the backend;
• profile image upload works if enabled;
• settings actions work;
• contact form submits or shows a configured support path;
• blocked users list loads;
• unblocking a user works if the app supports it;
• added custom fields appear in the UI and persist after app restart.

Troubleshooting

Problem	Fix
Field renders but does not save	Confirm the field key is handled by the save flow and backend.
Field saves but disappears after restart	Confirm the user read API returns the custom field.
Select field shows wrong label	Check options and displayOptions arrays have matching order.
Profile photo upload fails	Check camera/media permissions and Firebase Storage or media upload Functions.
Blocked users screen is empty forever	Check user-reporting hooks, backend rules, and current user ID.

Related Guides

• User Reporting
• Camera Module
• Firebase Production Checklist