Components

MoreScreen

<MoreScreen />

Constructor

# <MoreScreen />

You can use this component to display the More screen in your custom screen.

Properties:
Name Type Attributes Description
screenTitle String <optional>

List screen title

showSearch Boolean <optional>

Use false to hide search box

containerPaddingTop Number <optional>

The amount of padding top used by the more screen container

contentInsetTop Number <optional>

The amount by which the scroll view content is inset from the edges of the scroll view.

contentOffsetY Number <optional>

Used to manually set the starting scroll offset.

searchContainerPaddingTop Number <optional>

The amount of padding top used by the container which the search and list components occupy

hideNavigationHeader Boolean <optional>

Use true to hide the screen title container

hideScrollHeader Boolean <optional>

Use true to hide the scroll header

Example
//In custom_code/components/MyCustomScreen.js...

import React from 'react';
import { View, Platform } from 'react-native';
import {add} from "react-native-reanimated";
import MoreScreen from "@src/containers/Custom/MoreScreen";
import FontManager from "@src/FontManager";
import {
 NAV_HEIGHT,
 BARHEIGHT
} from "@src/styles/global";
import {SEARCH_HEIGHT} from "@src/components/Search";
import {useSearchTransition} from "@src/components/listUtils";

const MyCustomScreen = (props) => {

 const showSearch = false;
 const SPACING_TOP = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 17);
 const INITIAL_SCROLL = -SPACING_TOP + SEARCH_HEIGHT;

	const {
		listTopMargin
	} = useSearchTransition(
		showSearch,
		false,
		Platform.select({
			ios: NAV_HEIGHT - 16 - BARHEIGHT,
			android: NAV_HEIGHT - 26 - BARHEIGHT
		})
	);

 const searchContainerPaddingTop = add(listTopMargin, NAV_HEIGHT + 17)

   return <MoreScreen
     screenTitle="More Menus"
     containerPaddingTop={NAV_HEIGHT}
     contentInsetTop={SPACING_TOP}
     contentOffsetY={INITIAL_SCROLL}
     searchContainerPaddingTop={searchContainerPaddingTop}
     showSearch={showSearch}
   />
}

export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {
 //Replace the courses screen
 externalCodeSetup.navigationApi.addNavigationRoute(
    "book",
    "BookScreen",
    MyCustomScreen,
    "All"
 );
 externalCodeSetup.navigationApi.addNavigationRoute(
    "book",
    "BookScreen",
    MyCustomScreen,
    "Main"
 );
}