App Codex Version: 1.0.0

Class

ScreenHooksApi

ScreenHooksApi()

Screen Hooks. Instance name: screenHooksApi

You can use these hooks to customize different screen options such as hiding the user’s profile menu in the More screen, hiding the admin/author component and more.

Constructor

# new ScreenHooksApi()

Example
externalCodeSetup.screenHooksApi.METHOD_NAME

Members

# setSocialLoginButtonsOrder

Rearrange social login buttons

Deprecated:
  • Yes

# setVersionControlIconRenderer

Renders a component above the title on the Version control screen

Deprecated:
  • Yes

Methods

# disableProfileInMoreScreen()

Hides the user's profile menu item in the "More" Screen

Example
externalCodeSetup.screenHooksApi.disableProfileInMoreScreen();

# hideCourseSingleAdmin()

You can use it to hide the admin/author component on the Single Course screen.

Example
externalCodeSetup.screenHooksApi.hideCourseSingleAdmin()

# setAssetFilter(assetFilter)

You can use this to replace the user and lock icon in the "username or email" field and "password" field in the login screen.

Parameters:
Name Type Description
assetFilter AssetFilterCallback
Example
externalCodeSetup.screenHooksApi.setAssetFilter((path, source) => {
 if (path === "../assets/img/user.png") {
   return require("../assets/img/about.png")
 }
 return source
})

# setBackButtonRenderer(BackButtonComponent)

Replaces the back button component in all app screens

Parameters:
Name Type Description
BackButtonComponent BackButtonComponentProps
Examples
externalCodeSetup.screenHooksApi.setBackButtonRenderer(props => {
 return <Button title="Back" onPress={() => props.navigation.goBack()} />
});

Navigate to a user's profile 

//In custom_code/components/BackButton.js

import React from "react";
import { Button } from "react-native";
import { useSelector } from "react-redux";
import {CommonActions} from "@react-navigation/native";

const BackButton = (props) => {
   const state = useSelector((state) => state);

   //Get a user object from the redux state..
   //In this case, redirect to own profile
   const user = state.user.userObject;

   const toProfile = () => {

       //Modify back button in a specific screen only. In this case, "Books" screen
       if (props.navigation.state?.params?.item?.label === "Books") {
           props.navigation.dispatch(
               CommonActions.navigate({
                   name: "ProfileScreen",
                   params: { user: user }
               })
           );
       } else {
           props.navigation.goBack()
       }

   }

   return <Button title="Back" onPress={() => toProfile()} />
}

export default BackButton;

//In custom_code/index.js

import BackButton from "./components/BackButton";
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.screenHooksApi.setBackButtonRenderer(props => <BackButton {...props} />);
}

# setBuildEmbedUrlHeaders(buildEmbedUrlHeaders)

If Gutenberg blocks are not used, then the course, lesson, topic and blog content fallbacks to show html to WebView. Use this method to pass additional headers to WebView if needed.

Parameters:
Name Type Description
buildEmbedUrlHeaders TransformContentHeadersCallback
Example
externalCodeSetup.screenHooksApi.setBuildEmbedUrlHeaders(props => {
  return {
   ...props,
   customHeader: "customHeader"
  }
})

# setCustomMoreScreenRenderer(MoreScreenRendererProps)

Lets you provide your own component for rendering More Screen content

Parameters:
Name Type Description
MoreScreenRendererProps MoreScreenRendererProps
Example
externalCodeSetup.screenHooksApi.setCustomMoreScreenRenderer((props) => {

  const {user} = props;

   if (user.followers < 100){
     return <View style={{flex: 1, alignSelf: "center", justifyContent: "center"}}>

         <Text> More features available when you reach 100 followers!</Text>

     </View>
   }

   //Return a more screen here as an else statement...

});

# setForceShowBlocks(forceShowBlocks)

You can set it to true to force using Gutenberg blocks on LearnDash screens. Default is false.

Parameters:
Name Type Description
forceShowBlocks Boolean
Example
externalCodeSetup.screenHooksApi.forceShowBlocks(true)

# setProgressListItemComponent(ProgressListItemComponent)

Overrides the progress item component used in certain screens such as Course Quizzes Screen.

Parameters:
Name Type Description
ProgressListItemComponent React.ComponentType.<ProgressListItemComponentProps>
Example
externalCodeSetup.screenHooksApi.setProgressListItemComponent(props => {

  const {item} = props;

   return <View style={{margin: 10}}>
     <Text>{item.title}</Text>
     <Text>{item.author.name}</Text>
     <Text>{item.link}</Text>
   </View>
})

# setWrapperSwitchCountCoursesWidget(wrapperSwitchCountCoursesWidget)

By default, the course widget component uses horizontal ScrollView if the total count of courses is equal or greater than 3. You can use this hook to set if the app will wrap the courses with horizontal ScrollView or just a View component. For example, if wrapperSwitchCountCoursesWidget is set to 1 while total count of courses is 10, then the app will use the View component to wrap the widget.

Parameters:
Name Type Description
wrapperSwitchCountCoursesWidget Number
Example
externalCodeSetup.screenHooksApi.setWrapperSwitchCountCoursesWidget(1)