# new SettingsScreenApi()

Example

externalCodeSetup.settingsScreenApi.METHOD_NAME

# setSettingsTopComponent

Deprecated:

• Replaces settings top component

Example

const SettingsTopComponent = (props) => (
  <Text>SettingsTopComponent</Text>
)
externalCodeSetup.settingsScreenApi.setSettingsTopComponent(SettingsTopComponent)

# setAfterAboutTabListComponent(AfterAboutSettingComponent)

Parameters:

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)

Parameters:

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)

Parameters:

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)

Parameters:

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)

Parameters:

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