Source

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 { 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"
 *  );
 * }
 *
 */

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;