Class

SettingsScreenApi

SettingsScreenApi()

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.

Constructor

# new SettingsScreenApi()

Example
externalCodeSetup.settingsScreenApi.METHOD_NAME

Members

# setSettingsTopComponent

Deprecated:
  • Replaces settings top component
Example
const SettingsTopComponent = (props) => (
  <Text>SettingsTopComponent</Text>
)
externalCodeSetup.settingsScreenApi.setSettingsTopComponent(SettingsTopComponent)

Methods

# setAfterAboutTabListComponent(AfterAboutSettingComponent)

You can use this hook to add additional components after the default tab list on the Settings > About screen..

Parameters:
Name Type Description
AfterAboutSettingComponent React.ComponentType.<AfterAboutSettingComponentProps>
Example

Add additional branding section on About Screen

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>
));

# setAfterListComponent(AfterListComponent)

You can use it to add a component after the settings list.

Parameters:
Name Type Description
AfterListComponent React.ComponentType.<AfterSettingsListComponentProps>
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)

# setBeforeListComponent(BeforeListComponent)

Adds a component before the settings list

Parameters:
Name Type Description
BeforeListComponent React.ComponentType.<BeforeSettingsListComponentProps>
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)

# setLogoutComponent(LogoutComponent)

You can use this hook to customize the Logout tab in the screen.

Parameters:
Name Type Description
LogoutComponent React.ComponentType.<LogoutComponentProps>
Example

Add a confirmation when logging out

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>

  })
}

# setSettingsListFilter(settingsListFilter, props)

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.

Parameters:
Name Type Description
settingsListFilter Array.<Object>

Default list of tabs

props SettingsListProps
Example

Add a new item in the settings list

externalCodeSetup.settingsScreenApi.setSettingsListFilter((oldTabs, props) => {

 return [
  ...oldTabs,
  {
   key: "custom",
   icon: {fontIconName: 'comment', weight: 200},
   action: () => console.log('Comment'),
   title: "Comment",
   shouldRender: true
  }];
})