Class

PageScreenHooksApi

PageScreenHooksApi()

App Pages Screen Hooks. Instance name: pageScreenHooksApi

You can use this hook to customize your app page screens by adding your component for app screens to render, disabling webkit on webview and more.

Constructor

# new PageScreenHooksApi()

Example
externalCodeSetup.pageScreenHooksApi.METHOD_NAME

Members

# disablePageModeTemplateHeader

Deprecated:
  • Yes

Methods

# disableWebKit()

Disable web kit on webview. For more info regarding react native webkit, see https://github.com/react-native-webview/react-native-webview

Example
externalCodeSetup.pageScreenHooksApi.disableWebKit()

# setOnNavigationStateChange(onChange)

You can use this to add a function that is invoked when the WebView loading starts or ends.

Parameters:
Name Type Description
onChange OnNavigationStateChangeCallback
See:
Example
externalCodeSetup.pageScreenHooksApi.setOnNavigationStateChange(props => {
  if (! props.loading && props.title){
    Alert.alert(`Page title: ${props.title}`)
  }
});

# setOnShouldStartLoadWithRequest(request)

You can use this to add a function that allows custom handling of any web view requests. Return true from the function to continue loading the request and false to stop loading.

Parameters:
Name Type Description
request OnShouldStartLoadWithRequestCallback
See:
Example

Use default app's behavior when handling links in WebView

externalCodeSetup.pageScreenHooksApi.setOnShouldStartLoadWithRequest(props => {

  const {
    index,
    req,
    isLoading,
    isFocused,
    currentUrl,
    nextUrl,
    isExternalDeeplink,
    onNext,
    openExternal,
    shouldOpenInExternalBrowser,
    isSameSite,
    attemptDeepLink
   } = props;

   // If webview was not tapped, handle loading in the active webview
   if (req.navigationType !== "click") {
     return true;
   }
   // If webview is loading, handle redirection in the same webview
   if (isLoading) {
     return true;
   }

   if (!req.url) {
     return true;
   }

   if (nextUrl.pathname === null) {
     return true;
   }

   if (
     currentUrl.pathname === nextUrl.pathname &&
     currentUrl.host === nextUrl.host
   ) {
     return true;
   }

   if (! isFocused) {
     return false;
   }

   //Use a helper function to check if url should be opened with external browser
   if (isExternalDeeplink(req.url)) {
     Linking.canOpenURL(req.url).then(check => {
       if (check) {
         Linking.openURL(req.url);
       } else {
         this.onNext(req.url, index);
       }
     });
       return false;
   }

   if (openExternal || shouldOpenInExternalBrowser(req.url)) {
     Linking.openURL(req.url).catch(err => {
       console.error("An error occurred", err);
       onNext(req.url, index);
     });
     return false;
   } else if (sameSite) {
     attemptDeepLink(event, req.url, index);
     return false;
   } else {
     onNext(req.url, index);
     return false;
   }

})

# setPageComponent(PageRenderer)

Use your own component to render the PageScreen component. PageScreen component is usually rendered whenever a custom link or a Wordpress page is opened.

Parameters:
Name Type Description
PageRenderer PageRenderer
Example

Restrict PageScreen access for a user

externalCodeSetup.pageScreenHooksApi.setPageComponent((props, Component) => {

  if (props.user.userObject.id === 1){

    return <View style={{flex: 1, alignSelf: "ce-nter", justifyContent: "center"}}>
      <Text> Sorry, you do not have access this page </Text>
      <Button title="Tap here to return" onPress={() => props.navigation.goBack()} />
    </View>
  }

  return Component;

})