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;
};
}
Source