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;

})

# setPageScreenTitle(PageScreenTitle)

You can use this hook to modify the placeholder and title of the Page Screen.

Parameters:
Name Type Description
PageScreenTitle React.ComponentType.<PageScreenTitleProps>
Example
...

import PlaceholderGradient from "@src/components/PlaceholderGradient";
import {
    Placeholder,
    PlaceholderContainer
} from "react-native-loading-placeholder";

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.pageScreenHooksApi.setPageScreenTitle(
        ({title, titlePromise, colors, styles}) => {
            return (
                <PlaceholderContainer
                    animatedComponent={
                        <PlaceholderGradient
                            base={colors.headingsColor}
                            style={styles.placeholderContainer}
                        />
                    }
                    duration={1000}
                    delay={500}
                    loader={titlePromise}
                    replace={true}
                >
                    <Placeholder style={styles.placeholder}>
                        <Text ellipsizeMode="tail" numberOfLines={1} style={styles.text}>
                            {title}
                        </Text>
                    </Placeholder>
                </PlaceholderContainer>
            );
        }
    );
}

# setWebViewProps(webViewProps)

This function sets the WebView props to the value of the webViewProps argument. The webViewProps argument is expected to be an object that contains properties for a WebView component. For example, the webViewProps object may contain a cacheEnabled property that specifies if WebView should use browser caching.

Parameters:
Name Type Description
webViewProps WebViewPropsParams
Example
externalCodeSetup.pageScreenHooksApi.setWebViewProps(_ => {
  return {
      cacheEnabled: false,
      incognito: true
  }
})