containers/Custom/MoreScreen.ts

import {compose} from "recompose";
import {connect} from "react-redux";
import More from "../MoreScreen";
import withActiveCallBacks from "../../navigators/react-navigation-addons/withActiveCallBacks";
import {withNavigation} from "../../components/hocs/withNavigation";
import PropTypes from "prop-types";

const mapStateToProps = state => ({
	moreNavSections: state.menuSettings.moreNavSections
});

/**
 * You can use this component to display the More screen in your custom screen.
 * @component
 * @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"
 *  );
 * }
 *
 */

const MoreScreen = compose(
	withNavigation,
	withActiveCallBacks,
	connect(mapStateToProps)
)(More);

MoreScreen.propTypes = {
	/**
	 * List screen title
	 * {String}
	 */
	screenTitle: PropTypes.string,
	/**
	 * Use `false` to hide search box
	 * {Boolean}
	 */
	showSearch: PropTypes.bool,
	/**
	 * The amount of padding top used by the more screen container
	 * {Number}
	 */
	containerPaddingTop: PropTypes.number,
	/**
	 * The amount by which the scroll view content is inset from the edges of the scroll view.
	 * {Number}
	 */
	contentInsetTop: PropTypes.number,
	/**
	 * Used to manually set the starting scroll offset.
	 * {Number}
	 */
	contentOffsetY: PropTypes.number,
	/**
	 * The amount of padding top used by the container which the search and list components occupy
	 * {Number}
	 */
	searchContainerPaddingTop: PropTypes.number,
	/**
	 * Use `true` to hide the screen title container
	 * {Boolean}
	 */
	hideNavigationHeader: PropTypes.bool,
	/**
	 * Use `true` to hide the scroll header
	 * {Boolean}
	 */
	hideScrollHeader: PropTypes.bool
};

export default MoreScreen;