App Codex Version: 1.0.0

Class

IndexScreenApi

IndexScreenApi()

Index screen hooks. Instance name: indexScreenApiHooks

You can use this hook to customize the appearance of your app screen by personalizing the screen title component and header title component when users scroll the app.

Constructor

# new IndexScreenApi()

Example
externalCodeSetup.indexScreenApiHooks.METHOD_NAME

Methods

# enableAlwaysShowHeaderRight()

Use this to always show the header right component.

Example
externalCodeSetup.indexScreenApiHooks.enableAlwaysShowHeaderRight();

# setAfterHeaderComponent(AfterHeaderComponent)

You can use this hook to add a component after the list screen's header component.

Parameters:
Name Type Description
AfterHeaderComponent React.ComponentType.<AfterHeaderComponentProps>
Example
externalCodeSetup.indexScreenApiHooks.setAfterHeaderComponent(() => <Text>Hello World</Text>);

# setAnimatedListHeaderTitleComponent(AnimatedListHeaderTitleComponentnullable)

You can use this hook to replace the screen title component with items based on your preference such as changing the color/font of the title.

Parameters:
Name Type Attributes Description
AnimatedListHeaderTitleComponent React.ComponentType.<AnimatedListHeaderProps> <nullable>
Example

Change color and font size of the title 

const CustomAnimatedComponent = ({
 title,
 subtitle,
 global,
 titleStyle,
}) => (
 <Text
   style={{
     ...global.iosStyleScreenTitle,
     alignSelf: "stretch",
     ...titleStyle,
     color: "red",
     fontSize: 30
   }}
   numberOfLines={1}
   ellipsizeMode={"tail"}
 >
   {title}
 </Text>
)
externalCodeSetup.indexScreenApiHooks.setAnimatedListHeaderTitleComponent(CustomAnimatedComponent)

# setHeaderHeight(headerHeight)

Use this to set the header height of index screens.

Parameters:
Name Type Description
headerHeight HeaderHeightCallback
Example

Add a component before the courses filter and adjust header height 

...
export const applyCustomCode = externalCodeSetup => {
  const CustomBeforeFilterComponent = (props) => {

   if (props.filterType === "courses") {
     return <View style={{ height: 80, backgroundColor: "gray" }}>
       <Text style={{ color: "white" }}> This is a text before the filter </Text>
     </View>
   }

   return null
 }

 externalCodeSetup.filterScreenApiHooks.setBeforeFilterComponent(CustomBeforeFilterComponent);

 externalCodeSetup.indexScreenApiHooks.setHeaderHeight((defaultHeaderHeight, filterType, navigation) => {

   if (filterType === "courses")
     return 346;

   return defaultHeaderHeight;
 });
}

# setListSearchHeaderHeight()

Use this to modify the height of the ListSearch component that renders the title and search component in the index screens.

Example
externalCodeSetup.indexScreenApiHooks.setListSearchHeaderHeight(100);

# 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.<HeaderRightProps>

Component to render
Examples

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.indexScreenApiHooks.setRenderHeaderRight(<HomeHeaderRight />);
}

Return the default header right component for specific screens 

//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 => {

    const {
        navigation,
        headerRight
    } = props;

    if (navigation.state.routeName === "GroupActivity"){
        return headerRight || null;
    }

    return <IconButton
        pressHandler={() => props.navigation.navigate("MyCustomScreen")}
        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.indexScreenApiHooks.setRenderHeaderRight(props => <HomeHeaderRight {...props} />);
}

# setScrollHeaderTitleComponent(ScrollHeaderTitleComponentnullable)

It replaces the header title component that is visible to users when the screen is scrolled. For example, it can always show a text title and modify its colors as users scroll through.

Parameters:
Name Type Attributes Description
ScrollHeaderTitleComponent React.ComponentType.<ScrollHeaderProps> <nullable>
Example

Always show a text title and modify its color 

const CustomScrollHeaderTitleComponent = ({
 headerProps,
 navigation,
 screenTitle,
 global,
 t,
 headerTitleStyle,
 screenSubtitle
}) => {

   const title = t(screenTitle) || "";

   return <Text
     ellipsizeMode="tail"
     numberOfLines={1}
     style={[global.appHeaderTitle, headerTitleStyle, {color: "red"}]}>

         {screenSubtitle ? `${screenSubtitle} - ${title}` : title}
     </Text>
}
externalCodeSetup.indexScreenApiHooks.setScrollHeaderTitleComponent(CustomScrollHeaderTitleComponent)