Source

externalCode/settingsScreen.js

import * as React from "react";

/**
 * @typedef {Object} SettingsListProps
 * @property {navigationService} navigation
 * @property {Object} settings App settings from API
 * @property {Object} config App config from API
 * @property {Object} user Information about logged-in user
 * @property {Boolean} lockAppFeatureEnabled Returns `true` if lock app feature is enabled
 * @property {Boolean} pushNotificationsEnabled Returns `true` if push notification feature is enabled
 * @property {Boolean} isMultisiteEnabled Returns `true` if multisite feature is enabled
 * @property {Boolean} isBiometricEnrolled Returns `true` if biometric is enrolled
 * @property {Boolean} isLocalAuthEnabled Returns `true` if local auth is enabled
 * @property {Number} supportedBiometric Returns the number of supported biometric
 * @property {Boolean} autoLock Returns `true` if auto lock is enabled
 * @property {Number} autoLockDuration Returns the number of auto lock duration in seconds
 * @property {Boolean} bugReportingEnabled Returns `true` if bug reporting is enabled
 * @property {Boolean} feedbackEnabled Returns `true` if sending of feedback is enabled
 * @property {Boolean} hasDevAccess Returns `true` if app has dev access
 * @property {Object} termsPage Title and link to terms page
 * @property {Object} privacyPage Title and link to privacy page
 * @property {Function} restorePurchases Function to restore app purchases
 * @property {Function} logout Function to logout from app
 * @property {Function} toggleLocalAuth Function to enable or disable app local authentication
 * @property {Function} toggleLocalAuthAutoLock Function to enable or diable auto lock of app
 * @property {Function} changeAutoLockDuration Function to change auto lock duration
 */

/**
 * @typedef {Object} BeforeSettingsListComponentProps
 * @property {SettingsListProps} SettingsListProps
 */

/**
 * @typedef {Object} AfterSettingsListComponentProps
 * @property {SettingsListProps} SettingsListProps
 */

/**
 * @typedef {Object} LogoutComponentProps
 * @property {Object} global
 * @property {TranslationFunction} t
 * @property {Boolean} isLoggingOut Returns `true` if app is currently logging out
 * @property {Function} logout Use this to execute the logout function
 */

/**
 * @typedef {Object} AfterAboutSettingComponentProps
 * @property {TranslationFunction} t
 * @property {Object} global App global style
 * @property {Object} colors App colors
 * @property {Object} listProps Object containing default list styles and other props
 */

/**
 * @class
 * Settings Screen Hooks.
 * Instance name: settingsScreenApi
  
   You can use this to customize the setting options and how to display the settings options based on your preferences. For example, you can add a component before/after the settings list, replace settings items and more.
 * @example
 * externalCodeSetup.settingsScreenApi.METHOD_NAME
 */
export class SettingsScreenApi {
	SettingsTopComponent = null;

	/**
	 * @deprecated
	 * Replaces settings top component
	 * @param {React.ComponentType<SettingsTopComponent>} SettingsTopComponent - jsx to render top item component
	 * @example
	 * const SettingsTopComponent = (props) => (
	 *   <Text>SettingsTopComponent</Text>
	 * )
	 * externalCodeSetup.settingsScreenApi.setSettingsTopComponent(SettingsTopComponent)
	 */
	setSettingsTopComponent = SettingsTopComponent => {
		this.SettingsTopComponent = SettingsTopComponent;
	};

	BeforeListComponent = null;

	/**
	 * Adds a component before the settings list
	 * @method
	 * @param {React.ComponentType<BeforeSettingsListComponentProps>} BeforeListComponent
	 * @example
	 * const SettingsBeforeListComponent = (props) => {
	 *   return <View style={{padding: 10, marginHorizontal: 10}}>
	 *
	 *     <Text style={{fontSize: 20}}>Hello {props.user.name}!</Text>
	 *
	 *   </View>
	 * }
	 *
	 * externalCodeSetup.settingsScreenApi.setBeforeListComponent(SettingsBeforeListComponent)
	 *
	 */
	setBeforeListComponent = BeforeListComponent => {
		this.BeforeListComponent = BeforeListComponent;
	};

	AfterListComponent = null;

	/**
	 * You can use it to add a component after the settings list.
	 * @method
	 * @param {React.ComponentType<AfterSettingsListComponentProps>} AfterListComponent
	 * @example
	 * const SettingsAfterListComponent = (props) => {
	 *   return <View style={{padding: 10, marginHorizontal: 10, marginTop: 10}}>
	 *    <Text style={{fontSize: 20}}>Hello {props.user.name}!</Text>
	 *    <Text>Please rate our app!</Text>
	 *  </View>
	 * }
	 *
	 *  externalCodeSetup.settingsScreenApi.setAfterListComponent(SettingsAfterListComponent)
	 *
	 */
	setAfterListComponent = AfterListComponent => {
		this.AfterListComponent = AfterListComponent;
	};

	settingsListFilter = (listOfAllSettings, props) => listOfAllSettings;

	/**
	 * You can replace the settings list option when you use it. For example, you can use it to add new items in the settings list.
	 * @method
	 * @param {Array<Object>} settingsListFilter Default list of tabs
	 * @param {SettingsListProps} props
	 * @example	<caption> Add a new item in the settings list </caption>
	 *
	 * externalCodeSetup.settingsScreenApi.setSettingsListFilter((oldTabs, props) => {
	 *
	 *  return [
	 *   ...oldTabs,
	 *   {
	 *    key: "custom",
	 *    icon: {fontIconName: 'comment', weight: 200},
	 *    action: () => console.log('Comment'),
	 *    title: "Comment",
	 *    shouldRender: true
	 *   }];
	 * })
	 */
	setSettingsListFilter = (settingsListFilter, props) => {
		this.settingsListFilter = settingsListFilter;
	};

	LogoutComponent = null;

	/**
	 * You can use this hook to customize the Logout tab in the screen.
	 * @method
	 * @param {React.ComponentType<LogoutComponentProps>} LogoutComponent
	 * @example <caption> Add a confirmation when logging out </caption>
	 *
	 * import React from "react";
	 * import { Text, View, ActivityIndicator, Alert } from 'react-native'
	 * import Icon from "@src/components/Icon";
	 * import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
	 * export const applyCustomCode = (externalCodeSetup) => {
	 *
	 *   externalCodeSetup.settingsScreenApi.setLogoutComponent(({
	 *     global,
	 *     t,
	 *     isLoggingOut,
	 *     logout
	 *   }) => {
	 *     return <View style={global.tabLinksContainer}>
	 *       <AppTouchableOpacity
	 *         style={global.logout}
	 *         onPress={() => {
	 *           if (!isLoggingOut) {
	 *             Alert.alert('Logout', 'Are you sure you want to logout?',
	 *               [
	 *                 {
	 *                   text: "Cancel",
	 *                   style: "cancel"
	 *                 },
	 *                 { text: "OK", onPress: () => logout() }
	 *               ]
	 *             )
	 *           }
	 *         }}
	 *       >
	 *         {isLoggingOut ? (
	 *           <ActivityIndicator animating={true} size="small" />
	 *         ) : (
	 *           <View style={[global.row]}>
	 *             <Icon
	 *               webIcon={"IconFeedSettings"}
	 *               icon={{fontIconName: "power-on", weight: 400}}
	 *               tintColor={global.logoutInner.color}
	 *               styles={[global.settingsItemIcon]}
	 *             />
	 *             <Text
	 *               style={[
	 *                 global.settingsItemTitle,
	 *                 global.logoutInner,
	 *                 { marginLeft: 5 }
	 *               ]}
	 *             >
	 *               {t("settings:logout")}
	 *             </Text>
	 *           </View>
	 *         )}
	 *       </AppTouchableOpacity>
	 *     </View>
	 *
	 *   })
	 * }
	 *
	 */
	setLogoutComponent = LogoutComponent => {
		this.LogoutComponent = LogoutComponent;
	};

	SandBoxResetComponent = null;

	/**
	 * @ignore
	 */
	setSandBoxResetComponent = SandBoxResetComponent => {
		this.SandBoxResetComponent = SandBoxResetComponent;
	};

	SandBoxReportComponent = null;

	/**
	 * @ignore
	 */
	setSandBoxReportComponent = SandBoxReportComponent => {
		this.SandBoxReportComponent = SandBoxReportComponent;
	};

	AfterAboutTabListComponent = null;

	/**
	 * You can use this hook to add additional components after the default tab list on the Settings > About screen..
	 * @method
	 * @param {React.ComponentType<AfterAboutSettingComponentProps>} AfterAboutSettingComponent
	 * @example <caption> Add additional branding section on About Screen </caption>
	 * import React from "react";
	 * import {Linking, Text, TouchableOpacity, View} from "react-native";
	 * externalCodeSetup.settingsScreenApi.setAfterAboutTabListComponent(props => (
	 *   <TouchableOpacity
	 *     style={{marginHorizontal:20, marginTop: 20}}
	 *     onPress={()=> {
	 *       const fburl = "https://facebook.com/some-profile"
	 *       Linking.canOpenURL(fburl)
	 *        .then(canOpen => {
	 *          if(canOpen){
	 *            Linking.openURL(fburl)
	 *          } else {
	 *           alert('Sorry, cant open the link')
	 *          }
	 *       })
	 *       .catch(() => alert('Sorry, cant open the link'))
	 *     }}
	 *   >
	 *     <Text style={global.link}>
	 *       Follow us on facebook
	 *     </Text>
	 *  </TouchableOpacity>
	 *));
	 */

	setAfterAboutTabListComponent = AfterAboutTabListComponent => {
		this.AfterAboutTabListComponent = AfterAboutTabListComponent;
	};
}