@os-team/profile-mobile

The profile module for os-team's mobile apps.

Installation

Install the package using the following command:

yarn add @os-team/profile-mobile

Install peer dependencies:

npx install-peerdeps @os-team/profile-mobile

Install pods:

npx pod-install

Add the Profile component to your profile screen as follows:

import React from 'react';
import { StackScreenProps } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { Profile, ProfileButton } from '@os-team/profile-mobile';
import { ProfileStackParams } from './ProfileStack';

type ProfileScreenProps = StackScreenProps<ProfileStackParams, 'Profile'>;

const ProfileScreen: React.FC<ProfileScreenProps> = () => {
  const navigation = useNavigation();
  const { t } = useTranslation(['profile']);

  return (
    <Profile
      bucketId='test-file-storage'
      secondLevelDomain='englika'
      actions={
        <ProfileButton onPress={() => navigation.navigate('Sessions')}>
          {t('profile:sessions.title')}
        </ProfileButton>
      }
    />
  );
};

export default ProfileScreen;

Add the @os-team/relay-network-mw-upload middleware to RelayNetwork. It allows a user to upload an avatar.

Add locales in the i18next options:

export default i18next;
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import RNLanguageDetector from '@os-team/i18next-react-native-language-detector';
import { locales as authLocales } from '@os-team/auth-mobile';
import { locales as profileLocales } from '@os-team/profile-mobile';

i18next
  .use(RNLanguageDetector) // Detect user language
  .use(initReactI18next) // Pass the i18n instance to react-i18next
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'ru'],
    ns: [], // Do not preload any namespaces
    defaultNS: undefined, // No default namespace

    resources: {
      en: {
        auth: authLocales.en,
        profile: profileLocales.en,
      },
      ru: {
        auth: authLocales.ru,
        profile: profileLocales.ru,
      },
    },

    interpolation: {
      escapeValue: false, // Not needed for react as it escapes by default
    },
  });

export default i18next;