App Codex Version: 1.0.0

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 {Platform} from "react-native";
import MoreScreen from "@src/containers/Custom/MoreScreen";
import FontManager from "@src/FontManager";
import {NAV_HEIGHT, BARHEIGHT, isHaveDynamicIsland} from "@src/styles/global";
import {SEARCH_HEIGHT} from "@src/components/Search";
import {useSearchTransition} from "@src/components/listUtils";

const MyCustomScreen = props => {
    const showSearch = true;
    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 - BARHEIGHT - (isHaveDynamicIsland() ? 20 : 16),
            android: NAV_HEIGHT - 26 - BARHEIGHT
        })
    );

    const searchContainerPaddingTop = listTopMargin.value + (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"
 );
}