# new BlockScreenApi()

Example

externalCodeSetup.blockScreenHooksApi.METHOD_NAME

# setHeaderStyle

Deprecated:

• Override app header styles, by providing `headerStyle`

# enableAlwaysShowHeaderLeft()

Example

externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderLeft();

# enableAlwaysShowHeaderRight()

Example

externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderRight();

# setBeforeBlockList(beforeBlockList)

Parameters:

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)

Parameters:

Example

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

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

# setRenderHeaderLeft(renderer)

Parameters:

Example

Add a link to another page

//In custom_code/HomeHeaderLeft.js
import React from 'react';
import {withNavigation} from "@src/components/hocs/withNavigation";
import IconButton from "@src/components/IconButton";
const HomeHeaderLeft = (props) => (
       <IconButton
           pressHandler={() => props.navigation.navigate("NotificationsScreen")}
           icon={{fontIconName: 'bell', weight: 100}}
           tintColor="#aaa"
           style={{
               marginLeft: -20
           }}
       />
)

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

...

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

# setRenderHeaderRight(renderer)

Parameters:

Example

Add a link to another page

//In custom_code/HomeHeaderRight.js
import React from 'react';
import {withNavigation} from "@src/components/hocs/withNavigation";
import IconButton from "@src/components/IconButton";
const HomeHeaderRight = (props) => (
       <IconButton
           pressHandler={() => props.navigation.navigate("NotificationsScreen")}
           icon={{fontIconName: 'bell', weight: 100}}
           tintColor="#aaa"
           style={{
               marginLeft: -20
           }}
       />
)

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

...

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

# setRenderHeaderTitle(renderer)

Parameters:

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 HeaderTitle = (props) => {

   const globalStyles = useSelector((state) => globalStyle(state.config.styles))
   const { colors, global } = globalStyles;
   const HEADER_HEIGHT = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 69);

   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 />)
}