Class

BlockScreenApi

BlockScreenApi()

Blocks Screen Hooks. Instance name: blockScreenHooksApi

Enables modifications to the appearance of blocks on the app pages

Constructor

# new BlockScreenApi()

Example
externalCodeSetup.blockScreenHooksApi.METHOD_NAME

Members

# setHeaderStyle

Deprecated:
  • Override app header styles, by providing `headerStyle`

Methods

# enableAlwaysShowHeaderLeft()

Use this to always show the header left component.

Example
externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderLeft();

# enableAlwaysShowHeaderRight()

Use this to always show the header right component.

Example
externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderRight();

# setBeforeBlockList(beforeBlockList)

The content shows before the blocks provided that the React component will show on top of the blocks at the top of the app page.

Parameters:
Name Type Description
beforeBlockList React.ComponentType.<any>

React Native component

Example

User would like to have a status report of the logged-in user in their home page before any blocks that they added such as Courses, Notifications or Activites blocks

//In custom_code/components/BeforeBlocks.js

import React from 'react';
import { View, Text } from 'react-native';
import { globalStyle } from "@src/styles/global";
import { useSelector } from "react-redux";
import FastImage from 'react-native-fast-image';
const BeforeBlocks = (props) => {
   const globalStyles = useSelector((state) => globalStyle(state.config.styles)) // Get style from redux
   const user = useSelector((state) => state.user.userObject); //Get logged user from redux
   const { colors, global } = globalStyles;

   return (

   <View style={{padding: 20}}>
       <View style={global.widgetInner}>

         <FastImage style={{width: 50, height: 50, marginBottom: 20}} source={{uri: user.avatar_urls.thumb}} />

         <Text> Welcome {user.nicename}! </Text>
         <Text> You have {user.member_rest.unread_messages_count} unread messages </Text>
         <Text> Your last activity was on {user.member_rest.last_activity} </Text>
       </View>
   </View>)
}

export default BeforeBlocks;

//In custom_code/index.js

...

import BeforeBlocks from "./components/BeforeBlocks";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blockScreenHooksApi.setBeforeBlockList(() => <BeforeBlocks />);
}

# setIconStyle(iconStyle)

It overrides the default header icons style (or Home Screen logo) when you input the different style dimensions. When you use this method, it replaces the icon image which is set from the WordPress BuddyBoss Dashboard > BuddyBoss App > Branding > Images > Home Screen Logo.

Parameters:
Name Type Description
iconStyle RNStyleValue

React Native style

Example

User would like to adjust the height of the app home icon

externalCodeSetup.blockScreenHooksApi.setIconStyle({height: 100});

# setRenderHeaderLeft(renderer)

Use this to add a component to the left side of the header. The component will be visible even when the user scrolls down.

Parameters:
Name Type Description
renderer React.ComponentType.<any>

Component to render

Example

Add a link to another page

//In custom_code/HomeHeaderLeft.js
import React from 'react';
import { withNavigation } from 'react-navigation';
import IconButton from "@src/components/IconButton";
const HomeHeaderLeft = (props) => (
       <IconButton
           pressHandler={() => props.navigation.navigate("NotificationsScreen")}
           icon={require("@src/assets/img/notification-icon.png")}
           tintColor="#aaa"
           style={{
               height: 20,
               marginRight: 10
           }}
       />
)

export default withNavigation(HomeHeaderLeft);
//In custom_code/index.js

...

import HomeHeaderLeft from "./components/HomeHeaderLeft";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blockScreenHooksApi.setRenderHeaderLeft(() => <HomeHeaderLeft />);
}

# setRenderHeaderRight(renderer)

Use this to add a component to the right side of the header. The component will be visible even when the user scrolls down.

Parameters:
Name Type Description
renderer React.ComponentType.<any>

Component to render

Example

Add a link to another page

//In custom_code/HomeHeaderRight.js
import React from 'react';
import { withNavigation } from 'react-navigation';
import IconButton from "@src/components/IconButton";
const HomeHeaderRight = (props) => (
       <IconButton
           pressHandler={() => props.navigation.navigate("NotificationsScreen")}
           icon={require("@src/assets/img/notification-icon.png")}
           tintColor="#aaa"
           style={{
               height: 20,
               marginRight: 10
           }}
       />
)

export default withNavigation(HomeHeaderRight);
//In custom_code/index.js

...

import HomeHeaderRight from "./components/HomeHeaderRight";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blockScreenHooksApi.setRenderHeaderRight(<HomeHeaderRight />);
}

# setRenderHeaderTitle(renderer)

Overrides how the Blocks Screen Title is rendered by taking the rendering function as an argument.

Parameters:
Name Type Description
renderer React.ComponentType.<any>

React Native component

Example

User would like to have a sticky header

//In custom_code/components/HeaderTitle.js

import React from 'react';
import { View, Text } from 'react-native';
import { globalStyle, NAV_HEIGHT, DEVICE_WIDTH, GUTTER } from "@src/styles/global";
import { useSelector } from "react-redux";
import FontManager from '@src/FontManager';
const HEADER_HEIGHT = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 69);

const HeaderTitle = (props) => {

   const globalStyles = useSelector((state) => globalStyle(state.config.styles))
   const { colors, global } = globalStyles;

   return (
       <View
           style={[
               global.bottomBorder,
               {
                   position: "absolute",
                   paddingTop: NAV_HEIGHT + 8,
                   backgroundColor: colors.headerBg,
                   height: HEADER_HEIGHT,
                   width: DEVICE_WIDTH,
                   paddingHorizontal: GUTTER
               }
           ]}
	        >

           <Text
               style={{
                   ...global.iosStyleScreenTitle,
                   alignSelf: "stretch",
               }}
               numberOfLines={1}
               ellipsizeMode={"tail"}
           >
               My App Title
           </Text>

       </View>
   )
}

export default HeaderTitle;	


//In custom_code/index.js

...

import HeaderTitle from "./components/HeaderTitle";
export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.blockScreenHooksApi.setRenderHeaderTitle(() => <HeaderTitle />)
}