App Codex Version: 1.0.0

Source

externalCode/navigation.js

  1. import * as React from "react";
  2. import {NavigationService} from "./types";
  4. /**
  5.  * @typedef {"Auth" | "noAuth" | "Main" | "All"} NavigatorNames
  6.  */
  8. /**
  9.  * @typedef {"LoginScreen" | "SignupScreen" | "CodeVerificationScreen" | "LinkAccountScreen" | "SocialLoginDataInputScreen" | "ForgotScreen" | "SocialLoginScreen"} AuthStackScreenNames
  10.  */
  12. /**
  13.  * @typedef {"SettingsAboutScreen" | "ProfileGroupSingleScreen" | "SurveyScreen" | "ActivitiesCreatePostScreen" | "MessagesCreatePostScreen" | "QuizSingleScreen" | "QuizResults" | "QuizDetails" | "QuizReview" | "CourseSectionScreen" | "CourseQuizzesScreen" | "CourseMaterialsScreen" | "BBMediaFullView" | "ActivityMedia" | "MergeTopicScreen" | "LessonSingleScreen" | "LearnTopicSingleScreen" | "SubForumsSingleScreen" | "ForumsSingleScreen" | "CoursesSingleScreen" | "CoursesScreen" | "CoursesCategorySingleScreen" | "TopicsTagScreen" | "TopicsSingleScreen" | "AddTopicScreen" | "SelectScreen" | "MoveReplyScreen" | "SplitReplyScreen" | "NewReplyScreen" | "CreateNewAlbum" | "AddNewProfilePhoto" | "AddNewGroupPhoto" | "SettingsPushScreen" | "SettingsPrivacyScreen" | "GroupsSingleScreen" | "PageScreen" | "BlockScreen" | "ProfileScreen" | "PrivacySettingsScreen" | "GroupInviteSettingsScreen" | "LoginInfoScreen" | "AlbumSingleScreen" | "CreateNewPhotosScreen" | "AlbumAddPhotosScreen" | "HomeNotificationsScreen" | "HomeForumsScreen" | "HomeCourseCategoriesScreen" | "HomeTopicsScreen" | "HomeGroupsScreen" | "HomeMemberScreen" | "HomeActivityScreen" | "HomeMembersScreen" | "ReportFormScreen" | "ManageGroupDetails" | "EditNavigation" | "EditXprofile" | "ViewXprofile" | "PhotoXprofile" | "CoverXprofile" | "ProfileCourses" | "ProfilePhotos" | "GlobalPhotos" | "ProfileGamipress_achievements" | "ProfileGamipress_points" | "ProfileGamipress_ranks" | "ProfileBadgeos_achievements" | "ProfileBadgeos_points" | "ProfileBadgeos_ranks" | "ProfileActivities" | "ProfileCertificates" | "ProfileResults" | "ProfileBlog" | "ProfileXprofile" | "ProfileInvites" | "ProfileFriends" | "ProfileForums" | "ProfileGroups" | "GroupMessages" | "GroupMessageCreatePostScreen" | "GroupActivity" | "GroupPhotos" | "GroupAdmin" | "GroupManageSettings" | "GroupManageSettingsForm" | "GroupManageCoverPhoto" | "GroupManageMembers" | "GroupManagePhoto" | "GroupManageDelete" | "GroupManageDetails" | "GroupMembers" | "GroupSubgroups" | "GroupInvite" | "SelectGroupMembers" | "PendingInvites" | "SubmitInvite" | "GroupRequests" | "GroupCourses" | "ProductSingleScreen" | "ActivitySingleScreen" | "BlogSingleScreen" | "BlogSingleDeeplink" | "BlogReplyScreen" | "MyLibraryScreen" | "DownloadedCoursesScreen" | "BlogScreen" | "SettingsScreen" | "GroupsScreen" | "NotificationsScreen" | "TopicsScreen" | "CourseCategoriesScreen" | "ActivitiesScreen" | "MessagesScreen" | "MembersScreen" | "ForumsScreen" | "ProductsScreen" | "EmailInvitesSendScreen" | "EmailInvitesSentScreen" | "EmailInviteMessageScreen" | "SendFeedbackScreen" | "ReportBugScreen"} MainStackScreenNames
  14.  */
  16. /**
  17.  * @typedef {"my_library" | "blog" | "settings" | "groups" | "notifications" | "topics" | "courses" | "courses_category" | "courses_all" | "activity" | "documents" | "messages" | "members" | "forums" | "profile" | "iap_products" | "photos" | "videos" | "gamipress_achievements" | "badgeos_achievements" | "course_certificates" } MainMenuScreenNames
  18.  */
  20. /**
  21.  * @typedef {AuthStackScreenNames | MainStackScreenNames | MainMenuScreenNames} ScreenName
  22.  */
  24. /**
  25.  * @typedef {Object} Navigator
  26.  * @property {NavigationService} navigation Navigation object
  27.  * @property {Function} dispatch Dispatch function
  28.  */
  30. /**
  31.  * @typedef {Object} RoutesObject
  32.  * @example
  33.  * {
  34.  *     AppLockScreen: {screen: AppLockNavigator},
  35.  *     Main: {screen: MainScreenNavigator, navigationOptions: {header: null}},
  36.  * 	   ...
  37.  * }
  38.  */
  40. /**
  41.  * @typedef {Function} AfterAuthRoutesFilter
  42.  * @param {RoutesObject} routes Current routes
  43.  * @return {RoutesObject} New routes
  44.  */
  46. /**
  47.  * @typedef {Function} ShouldUpdateCallback
  48.  * @param {Object} thisProps Current props
  49.  * @param {Object} nextProps Next props
  50.  * @param {Object} thisState Current state
  51.  * @param {Object} nextState Next state
  52.  * @return {Boolean} Return `true` if component should update
  53.  */
  55. /**
  56.  * @typedef {Function} BottomTabsSettingsFilterCallback
  57.  * @param {Object} tabsOptions `tabsOptions` include `tabBarOptions`, `initialRouteName` `tabBarComponent` etc..
  58.  * @param {Object} colors App colors
  59.  * @return {Object} New tab settings
  60.  */
  62. /**
  63.  * @typedef {Function} BottomTabsRoutesFilterCallback
  64.  * @param {Object} routes Current bottom tab routes
  65.  * @param {Function} constructTabbarAllScreens Returns the appropriate screens depending on value of "Tab Bar Visibility"
  66.  * @param {Boolean} showTabBarOnAllScreens Returns `true` if "Tab Bar Visibility" is set to "Show on All Screens"
  67.  * @return {Object} New routes
  68.  */
  70. /**
  71.  * @typedef {Function} InitialAfterAuthRouteCallback
  72.  * @param {Object} props AppNavigator component props
  73.  * @return {String} Route
  74.  */
  76. /**
  77.  * @typedef {Function} NavigatorEventListenerCallback
  78.  * @param {Navigator} navigator Root navigator object
  79.  */
  81. /**
  82.  * @typedef {Function} HOCsFilter
  83.  * @param {Array<Function>} hocs Initial HOCs array
  84.  * @return {Array<Function>} New HOCs array
  85.  */
  87. /**
  88.  * @typedef {Function} MapStateToProps
  89.  * @param {Object} state - Redux state
  90.  * @return {Object} - Props
  91.  */
  93. /**
  94.  * @typedef {Object} animatedSwitchNavigatorProps
  95.  * @property {Object} routes Default navigation routes
  96.  * @property {Object} options Default navigation options
  97.  * @property {Object} routeProps Contains information which can be utilized when creating custom navigators
  98.  * @return {animatedSwitchNavigatorReturn}
  99.  */
  101. /**
  102.  * @typedef {Object} animatedSwitchNavigatorReturn
  103.  * @property {Object} routes New navigation routes
  104.  * @property {Object} options New navigation options
  105.  */
  107. /**
  108.  * @typedef {Object} IconProps
  109.  * @property {Object} item Route information
  110.  * @property {Boolean} focused Returns `true` if icon is currently active
  111.  * @property {String} tintColor Icon color
  112.  * @property {Function} calcFontSize Used to calculate font size based on the fixed value you assign and percent set on branding options
  113.  * @property {Object} colors App colors
  114.  */
  116. /**
  117.  * @typedef {Object} LabelProps
  118.  * @property {Object} props Route information
  119.  * @property {Array<Object>} textStyle Default style for the text component
  120.  */
  122. /**
  123.  * @typedef {Object} BottomTabBarProps
  124.  * @property {Object} state Route state information
  125.  * @property {Object} descriptors Bottom tab bar menu items
  126.  * @property {NavigationService} navigation
  127.  */
  129. /**
  130.  * @class
  131.  * Navigation Hooks.
  132.  * Instance name: navigationApi
  133.   
  134.    You can use this hook to customize app navigation aspects such as adding a new route to the app react-navigation tree, adding new HOC (Higher-Order Components) and more.
  135.  * @example
  136.  * externalCodeSetup.navigationApi.METHOD_NAME
  137.  */
  138. export class NavigationApi {
  139. 	/**
  140. 	 * @ignore
  141. 	 * The app shows the SocialLoginScreen when this property is set to `true`
  142. 	 * Note that social login needs to be enabled and configured at the backend
  143. 	 * beforehand.
  144. 	 * @private
  145. 	 * @type {Boolean}
  146. 	 */
  147. 	socialLoginEnabled = false;
  148. 	/**
  149. 	 * @ignore Social login support removed
  150. 	 * Enables social login (if social login is enabled and configured at the backend beforehand)
  151. 	 * @method
  152. 	 */
  153. 	enableSocialLogin = () => {
  154. 		this.socialLoginEnabled = true;
  155. 	};
  157. 	/**
  158. 	 * @deprecated
  159. 	 */
  160. 	filterMultisiteDrawerSettings = (switchSite, options) => options;
  161. 	setFilterMultisiteDrawerSettings = filterMultisiteDrawerSettings => {
  162. 		this.filterMultisiteDrawerSettings = filterMultisiteDrawerSettings;
  163. 	};
  165. 	/**
  166. 	 * @deprecated
  167. 	 */
  168. 	filterInitialAfterAuthRoute = (props, initialAfterAuthRoute) =>
  169. 		initialAfterAuthRoute;
  170. 	setFilterInitialAfterAuthRoute = filterInitialAfterAuthRoute => {
  171. 		this.filterInitialAfterAuthRoute = filterInitialAfterAuthRoute;
  172. 	};
  174. 	/**
  175. 	 * @deprecated
  176. 	 * We don't use default icons anymore. All icons are provided by plugin.
  177. 	 */
  178. 	customIcons = {};
  179. 	addCustomIcons = iconsMap => {
  180. 		Object.assign(this.customIcons, iconsMap);
  181. 	};
  183. 	/**
  184. 	 * @deprecated
  185. 	 */
  186. 	setShowIosBottomTabsLabels = shouldShow => {
  187. 		console.warn(
  188. 			"This hook is deprecated. " +
  189. 				"Use globalSettings.app_menu.ios.show_labels and globalSettings.app_menu.android.show_labels instead"
  190. 		);
  191. 	};
  193. 	/**
  194. 	 * @deprecated
  195. 	 */
  196. 	composeHooks = newHooks => newHooks;
  197. 	/**
  198. 	 * @deprecated
  199. 	 */
  200. 	AddComposeHooks = composeHooks => {
  201. 		console.warn("This hook is deprecated. Use addComposeHocs");
  202. 		this.composeHooks = composeHooks;
  203. 	};
  205. 	/**
  206. 	 * @deprecated
  207. 	 * We use a custom TabBar component now.
  208. 	 */
  209. 	iosBottomTabsIconRenderer = null;
  210. 	setIosBottomTabsIcon = renderFunction => {
  211. 		console.warn("This hook is depreciated");
  212. 		this.iosBottomTabsIconRenderer = renderFunction;
  213. 	};
  215. 	/**
  216. 	 *
  217. 	 * Display BlurView in IOS TabBar
  218. 	 */
  219. 	isBlurViewInIOSTabBar = false;
  220. 	enableBlurViewInIOSTabBar = () => {
  221. 		this.isBlurViewInIOSTabBar = true;
  222. 	};
  224. 	/**
  225. 	 * Used to provide additional component update logic
  226. 	 * @private
  227. 	 */
  228. 	shouldComponentUpdate = (thisProps, nextProps, thisState, nextState) =>
  229. 		undefined;
  230. 	/**
  231. 	 * Used to provide custom update logic to AppNavigator.
  232. 	 * This function is called in shouldComponentUpdate.
  233. 	 * If this hook returns a boolean, the component will use this to determine if it should update.
  234. 	 * For more info about shouldComponentUpdate function, refer to {@link https://reactjs.org/docs/react-component.html#shouldcomponentupdate}
  235. 	 * @method
  236. 	 * @param {ShouldUpdateCallback} updateFunc
  237. 	 * @example
  238. 	 * externalCodeSetup.navigationApi.setShouldComponentUpdate((thisProps, nextProps, thisState, nextState) => {
  239. 	 *  //If condition...
  240. 	 *  return true;
  241. 	 * })
  242. 	 */
  243. 	setShouldComponentUpdate = updateFunc => {
  244. 		this.shouldComponentUpdate = updateFunc;
  245. 	};
  247. 	/**
  248. 	 * Used to provide a custom initial after auth route
  249. 	 * Takes AppNavigator props and returns a route name
  250. 	 * Return null to use default initial route logic
  251. 	 * @private
  252. 	 */
  253. 	initialAfterAuthRoute = props => null;
  254. 	/**
  255. 	 * By default we navigate to the "Main" stack after navigation.
  256. 	 * This hook is used to provide a different route after login.
  257. 	 * It uses the callback function `func` that will receive AppNavigator props and return a route name as a string.
  258. 	 * More examples at: {@link https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/}
  259. 	 * @method
  260. 	 * @param {InitialAfterAuthRouteCallback} func
  261. 	 * @return {ScreenName} Return string screen name
  262. 	 * @example <caption> Show products screen after user authentication </caption>
  263. 	 * externalCodeSetup.navigationApi.setInitialAfterAuthRoute( props => {
  264. 	 *   if (props.auth.isLoggedIn){
  265. 	 *     return "ProductsScreen";
  266. 	 *   }
  267. 	 * })
  268. 	 */
  269. 	setInitialAfterAuthRoute = func => {
  270. 		this.initialAfterAuthRoute = func;
  271. 	};
  273. 	/**
  274. 	 * Used to provide custom state props
  275. 	 * Takes redux state as an argument and returns an object mapping state to props
  276. 	 * @private
  277. 	 */
  278. 	mapStateToProps = state => ({});
  280. 	/**
  281. 	 * Used to provide AppNavigator component custom redux props.
  282. 	 * It uses the `mapStateFunc` callback function that should receive redux state as an argument and return state props as an object.
  283. 	 * @method
  284. 	 * @param {MapStateToProps} mapStateFunc
  285. 	 * @example <caption> Add `blog` redux state and a localDate field to AppNavigator component props </caption>
  286. 	 * externalCodeSetup.navigationApi.setMapStateToProps( props => {
  287. 	 *   return {...props, blog: props.blog, localDate: new Date()}
  288. 	 * })
  289. 	 *
  290. 	 * //These new props can now be used in AppNavigator functions. For example:
  291. 	 * externalCodeSetup.navigationApi.setInitialAfterAuthRoute( props => {
  292. 	 *    if (props.localDate < foo)
  293. 	 *      return "CustomScreen"
  294. 	 * })
  295. 	 *
  296. 	 */
  297. 	setMapStateToProps = mapStateFunc => {
  298. 		this.mapStateToProps = mapStateFunc;
  299. 	};
  300. 	/**
  301. 	 * @ignore
  302. 	 * @private
  303. 	 */
  304. 	defaultStackNavigatorConfig = {};
  305. 	/**
  306. 	 * @ignore
  307. 	 * Reason for ignoring: A lot of stackNavigator options can't be used in the app such as setting a header style
  308. 	 * Each screen in the TabBarNavigator is wrapped in a StackNavigator.
  309. 	 * This hook is used to provide a custom stackConfigs all of these StackNavigators.
  310. 	 * For more info on how setting config for defaultStackNavigator, see {@link https://reactnavigation.org/docs/4.x/stack-navigator}
  311. 	 * @method
  312. 	 * @param {Object} config Configuration object
  313. 	 */
  314. 	setDefaultStackNavigatorConfig = config => {
  315. 		this.defaultStackNavigatorConfig = config;
  316. 	};
  318. 	/**
  319. 	 * @private
  320. 	 */
  321. 	newNavigationRoutes = [];
  322. 	/**
  323. 	 * Add a new route to react-navigation tree.
  324. 	 * NOTE: The route will be added to the root navigator if the parentNavigator value is missing.
  325. 	 * More information can be found at: {@link https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/}
  326. 	 * @method
  327. 	 * @param {String} id Key of route in route map
  328. 	 * @param {String} routeName Route name in react-navigation tree
  329. 	 * @param {React.ComponentType<any>} component Route component
  330. 	 * @param {NavigatorNames} parentNavigator Parent navigator name; can be one of the NavigatorNames values.
  331. 	 * @example <caption> Register a new route and navigate to that route </caption>
  332. 	 *
  333. 	 * //After adding BookScreen as a new navigation route, you can now navigate to this screen using NavigationService
  334. 	 * externalCodeSetup.navigationApi.addNavigationRoute(
  335. 	 *  "book",
  336. 	 *  "BookScreen",
  337. 	 *  () => <Text>Custom Book Screen</Text>,
  338. 	 *  "All"
  339. 	 * );
  340. 	 *
  341. 	 * //Example on how to navigate to BookScreen
  342. 	 * //Since "book" is now registered, app can now navigate to that route
  343. 	 * const MyCustomLoginScreen = (props) => (
  344. 	 *  <View>
  345. 	 *    <Text> This is a custom login screen</Text>
  346. 	 *    <Button title="Go To Book Screen" onPress={() => props.navigation.navigate("book")}/>
  347. 	 *  </View>
  348. 	 * )
  349. 	 * externalCodeSetup.navigationApi.replaceScreenComponent(
  350. 	 *  "LoginScreen",
  351. 	 *  MyCustomLoginScreen
  352. 	 * );
  353. 	 */
  354. 	addNavigationRoute = (id, routeName, component, parentNavigator) => {
  355. 		this.newNavigationRoutes.push({id, routeName, component, parentNavigator});
  356. 	};
  358. 	/**
  359. 	 * @private
  360. 	 */
  361. 	screenReplacements = {};
  362. 	/**
  363. 	 * Replaces a certain screen in the app.
  364. 	 * More information at {@link https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/}
  365. 	 * @method
  366. 	 * @param {ScreenName} componentName The name of the screen registered in the core BuddyBoss App navigation.
  367. 	 * @param {React.ComponentType<any>} replaceWith  Your custom screen component.
  368. 	 * @example <caption> Replace LoginScreen with MyScreen </caption>
  369. 	 *
  370. 	 * const MyScreen = (props) => (
  371. 	 *		<View style={{flex: 1}}>
  372. 	 *			<Text>This is my screen</Text>
  373. 	 *		</View>
  374. 	 *	);
  375. 	 *
  376. 	 *
  377. 	 *  externalCodeSetup.navigationApi.replaceScreenComponent("LoginScreen", MyScreen);
  378. 	 */
  379. 	replaceScreenComponent = (componentName, replaceWith) => {
  380. 		this.screenReplacements[componentName] = replaceWith;
  381. 	};
  383. 	/**
  384. 	 * @private
  385. 	 * @property {Array<NavigatorEventListenerCallback>} navigatorCreatedCallbacks
  386. 	 */
  387. 	navigatorCreatedCallbacks = [];
  388. 	/**
  389. 	 * Use to subscribe to root navigator created event.
  390. 	 * This will return the navigator object.
  391. 	 * Useful for dispatching navigation events outside of navigation tree components or getting state of navigator
  392. 	 * @method
  393. 	 * @param {NavigatorEventListenerCallback} onNavigatorCreated
  394. 	 * @returns {UnsubscribeFunction} Unsubscribe function
  395. 	 * @example
  396. 	 *  externalCodeSetup.navigationApi.addNavigatorCreatedCallback(props => {
  397. 	 *    Alert.alert("Navigator created!")
  398. 	 *  })
  399. 	 */
  400. 	addNavigatorCreatedCallback = onNavigatorCreated => {
  401. 		this.navigatorCreatedCallbacks.push(onNavigatorCreated);
  402. 		return () => {
  403. 			const index = this.navigatorCreatedCallbacks.indexOf(onNavigatorCreated);
  404. 			if (index !== -1) {
  405. 				this.navigatorCreatedCallbacks.splice(index, 1);
  406. 			}
  407. 		};
  408. 	};
  410. 	/**
  411. 	 *
  412. 	 * @param {Object} tabsOptions
  413. 	 * @param {Object} colors
  414. 	 * @private
  415. 	 */
  416. 	filterBottomTabsSettings = (tabsOptions, colors) => tabsOptions;
  417. 	/**
  418. 	 * You can use this hook to configure `createBottomTabNavigator` from react-navigation.
  419. 	 * `tabsOptions` and `colors` objects are provided which you can use to return a new settings object.
  420. 	 * @method
  421. 	 * @param {BottomTabsSettingsFilterCallback} filterBottomTabsSettings
  422. 	 * @example <caption> Change bottom tab bar's active tint color </caption>
  423. 	 *   externalCodeSetup.navigationApi.setFilterBottomTabsSettings((tabsOptions, colors) => {
  424. 	 *     return {
  425. 	 *      ...tabsOptions,
  426. 	 *      tabBarOptions: {
  427. 	 *        ...tabsOptions.tabBarOptions,
  428. 	 *        tabBarActiveTintColor: colors.headerBg
  429. 	 *       }
  430. 	 *     }
  431. 	 *   })
  432. 	 */
  433. 	setFilterBottomTabsSettings = filterBottomTabsSettings => {
  434. 		this.filterBottomTabsSettings = filterBottomTabsSettings;
  435. 	};
  437. 	/**
  438. 	 *
  439. 	 * @param {Object} routes
  440. 	 * @private
  441. 	 */
  442. 	filterBottomTabsRoutes = routes => routes;
  443. 	/**
  444. 	 * You can use this hook to configure `createBottomTabNavigator` from react-navigation.
  445. 	 * `routes` object is provided which you can use to return a new routes object.
  446. 	 * @method
  447. 	 * @param {BottomTabsRoutesFilterCallback} filterBottomTabsRoutes
  448. 	 * @example <caption> Create a custom More Screen </caption>
  449. 	 *
  450. 	 * import React from "react";
  451. 	 * import {Platform} from "react-native";
  452. 	 * import MoreScreen from "@src/containers/Custom/MoreScreen";
  453. 	 * import FontManager from "@src/FontManager";
  454. 	 * import {NAV_HEIGHT, BARHEIGHT, isHaveDynamicIsland} from "@src/styles/global";
  455. 	 * import {SEARCH_HEIGHT} from "@src/components/Search";
  456. 	 * import {useSearchTransition} from "@src/components/listUtils";
  457. 	 * 
  458. 	 * export const applyCustomCode = externalCodeSetup => {
  459. 	 * 
  460. 	 *     const MyCustomScreen = props => {
  461. 	 *         const showSearch = true;
  462. 	 *         const SPACING_TOP = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 17);
  463. 	 *         const INITIAL_SCROLL = -SPACING_TOP + SEARCH_HEIGHT;
  465. 	 *         const {listTopMargin} = useSearchTransition(
  466. 	 *             showSearch,
  467. 	 *             false,
  468. 	 *             Platform.select({
  469. 	 *                 ios: NAV_HEIGHT - BARHEIGHT - (isHaveDynamicIsland() ? 20 : 16),
  470. 	 *                 android: NAV_HEIGHT - 26 - BARHEIGHT
  471. 	 *             })
  472. 	 *         );
  473. 	 * 
  474. 	 *         const searchContainerPaddingTop = listTopMargin.value + (NAV_HEIGHT + 17);
  475. 	 * 
  476. 	 *         return (
  477. 	 *             <MoreScreen
  478. 	 *                 screenTitle="More Menus"
  479. 	 *                 containerPaddingTop={NAV_HEIGHT}
  480. 	 *                 contentInsetTop={SPACING_TOP}
  481. 	 *                 contentOffsetY={INITIAL_SCROLL}
  482. 	 *                 searchContainerPaddingTop={searchContainerPaddingTop}
  483. 	 *                 showSearch={showSearch}
  484. 	 *             />
  485. 	 *         );
  486. 	 *     };
  487. 	 * 
  488. 	 *     externalCodeSetup.navigationApi.setFilterBottomTabsRoutes(routes => {
  489. 	 *         return {
  490. 	 *             ...routes,
  491. 	 *             MoreScreen: {
  492. 	 *                 ...routes.MoreScreen.options,
  493. 	 *                 screen: {
  494. 	 *                     ...routes.MoreScreen.screen,
  495. 	 *                     component: MyCustomScreen
  496. 	 *                 }
  497. 	 *             }
  498. 	 *         };
  499. 	 *     });
  500. 	 * };
  501. 	 *
  502. 	 */
  503. 	setFilterBottomTabsRoutes = filterBottomTabsRoutes => {
  504. 		this.filterBottomTabsRoutes = filterBottomTabsRoutes;
  505. 	};
  507. 	filterAfterAuthRoutes = routes => routes;
  508. 	/**
  509. 	 * You can use this hook to filter possible changes after authentication routes.
  510. 	 * `filterAfterAuthRoutes` takes current routes object and returns a new one.
  511. 	 * For more info, see {@link https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/}
  512. 	 * @method
  513. 	 * @param {AfterAuthRoutesFilter} filterAfterAuthRoutes
  514. 	 * @example <caption> Add custom screen to auth route then navigate to custom screen</caption>
  515. 	 *
  516. 	 * ...
  517. 	 *
  518. 	 * import {withNavigation} from "@src/components/hocs/withNavigation";
  519. 	 *
  520. 	 * export const applyCustomCode = externalCodeSetup => {
  521. 	 *     const MyWelcomeScreen = withNavigation(props => {
  522. 	 *         return (
  523. 	 *             <View style={{flex: 1, justifyContent: "center", alignSelf: "center"}}>
  524. 	 *                 <Text> Welcome to our App! New adventure awaits!</Text>
  525. 	 *                 <Button
  526. 	 *                     title="Go to App"
  527. 	 *                     onPress={() => props.navigation.navigate("Main")}
  528. 	 *                 />
  529. 	 *             </View>
  530. 	 *         );
  531. 	 *     });
  532. 	 *
  533. 	 *
  534. 	 *     externalCodeSetup.navigationApi.setFilterAfterAuthRoutes(afterAuthRoutes => {
  535. 	 *         return {
  536. 	 *             ...afterAuthRoutes,
  537. 	 *             MyWelcomeScreen: {
  538. 	 *                 screen: MyWelcomeScreen
  539. 	 *             }
  540. 	 *         };
  541. 	 *     });
  542. 	 *
  543. 	 *     externalCodeSetup.navigationApi.setInitialAfterAuthRoute(props => {
  544. 	 *         return "MyWelcomeScreen";
  545. 	 *     });
  546. 	 * };
  547. 	 */
  548. 	setFilterAfterAuthRoutes = filterAfterAuthRoutes => {
  549. 		this.filterAfterAuthRoutes = filterAfterAuthRoutes;
  550. 	};
  552. 	composeHocs = hocs => hocs;
  553. 	/**
  554. 	 * Use this hook to register new HOCs (Higher-Order Components) which will be applied to the AppNavigator component.
  555. 	 * For more info on how to use HOCs, refer to: {@link https://reactjs.org/docs/higher-order-components.html}
  556. 	 * @method
  557. 	 * @param {HOCsFilter} composeHocs
  558. 	 * @example <caption> Add new HOC </caption>
  559. 	 *  externalCodeSetup.navigationApi.addComposeHocs(hocs => {
  560. 	 *   return [
  561. 	 *    ...hocs,
  562. 	 *    withMyCustomHoc
  563. 	 *   ];
  564. 	 * })
  565. 	 */
  566. 	addComposeHocs = composeHocs => {
  567. 		this.composeHocs = composeHocs;
  568. 	};
  570. 	bottomTabBarIcon = (icon, props) => icon;
  572. 	/**
  573. 	 * You can use this to replace the bottom tab bar icons to display your preferred icons.
  574. 	 * @method
  575. 	 * @param {React.ComponentType<Icon>} Icon Tab icon component
  576. 	 * @param {IconProps} props
  577. 	 * @example
  578. 	 * import React from "react";
  579. 	 * import Icon from "@src/components/Icon";
  580. 	 * import BadgeIcon from "@src/components/BadgeIcon";
  581. 	 * import {getIcon} from "@src/navigators/util";
  582. 	 * import {glyphMap as bbIconGlyphMap} from "@src/components/BBIcon";
  583. 	 * export const applyCustomCode = (externalCodeSetup) => {
  584. 	 *     externalCodeSetup.navigationApi.setBottomTabBarIcon(
  585. 	 *         (icon, props) => {
  586. 	 *             const {tintColor, focused, calcFontSize, colors, item} = props;
  587. 	 *
  588. 	 *             if (!item) return null;
  589. 	 *
  590. 	 *             const {color, menuIcon} = getIcon(
  591. 	 *                 item,
  592. 	 *                 bbIconGlyphMap,
  593. 	 *                 focused,
  594. 	 *                 tintColor
  595. 	 *             );
  596. 	 *
  597. 	 *             if (item.object === "notifications" || item.object === "messages") {
  598. 	 *                 return (
  599. 	 *                     <BadgeIcon
  600. 	 *                         calcFontSize={calcFontSize}
  601. 	 *                         tintColor={color}
  602. 	 *                         bottomTabsBg={colors.bottomTabsBg}
  603. 	 *                         warningColor={colors.warningColor}
  604. 	 *                         foregroundColor={item.icon.fg_color}
  605. 	 *                         platform="ios"
  606. 	 *                         inMore={false}
  607. 	 *                         app={"learnerapp"}
  608. 	 *                         type={item.object}
  609. 	 *                         icon={menuIcon}
  610. 	 *                         styles={{height: 25, width: 25}}
  611. 	 *                     />
  612. 	 *                 );
  613. 	 *             }
  614. 	 *
  615. 	 *             return (
  616. 	 *                 <Icon
  617. 	 *                     icon={menuIcon}
  618. 	 *                     foregroundColor={item.icon.fg_color}
  619. 	 *                     tintColor={color}
  620. 	 *                     styles={{height: 25, width: 25}}
  621. 	 *                 />
  622. 	 *             );
  623. 	 *         }
  624. 	 *     );
  625. 	 * }
  626. 	 */
  627. 	setBottomTabBarIcon = bottomTabBarIcon => {
  628. 		this.bottomTabBarIcon = bottomTabBarIcon;
  629. 	};
  631. 	bottomTabBarLabel = (label, labelProps) => label;
  633. 	/**
  634. 	 * You can use this to replace the bottom tab bar label to display your preferred labels.
  635. 	 * @method
  636. 	 * @param {React.ComponentType<Text>} Label Tab label component
  637. 	 * @param {LabelProps} labelProps
  638. 	 *
  639. 	 * externalCodeSetup.navigationApi.setBottomTabBarLabel((label, labelProps) => (
  640. 	 *     <Text
  641. 	 *         style={labelProps.textStyle}
  642. 	 *         numberOfLines={1}
  643. 	 *         ellipsizeMode={"tail"}
  644. 	 *         allowFontScaling={false}
  645. 	 *     >
  646. 	 *         {labelProps.props.item.label}
  647. 	 *     </Text>
  648. 	 * ));
  649. 	 */
  650. 	setBottomTabBarLabel = bottomTabBarLabel => {
  651. 		this.bottomTabBarLabel = bottomTabBarLabel;
  652. 	};
  654. 	bottomTabBar = null;
  656. 	/**
  657. 	 * You can use this to replace the bottom tab bar component according to your preference.
  658. 	 * For more information regarding the BottomTabBar, you can use the following link: {@link https://reactnavigation.org}
  659. 	 * @method
  660. 	 * @param {React.ComponentType<BottomTabBarProps>} BottomTabBarProps
  661. 	 * @example <caption> Create your own bottom tab bar </caption>
  662. 	 *
  663. 	 * import React from "react";
  664. 	 * import {Text, View, TouchableOpacity} from "react-native";
  665. 	 *
  666. 	 * import {isTabletOrIPad} from "@src/utils";
  667. 	 * import {
  668. 	 *     FontWeights,
  669. 	 *     textRTLStyleFix,
  670. 	 *     correctBottomSafeArea
  671. 	 * } from "@src/styles/global";
  672. 	 * import {useSafeAreaInsets} from "react-native-safe-area-context";
  673. 	 *
  674. 	 * import Icon from "@src/components/Icon";
  675. 	 * import BadgeIcon from "@src/components/BadgeIcon";
  676. 	 * import {getMenuFontIconVariant} from "@src/navigators/util";
  677. 	 * import {glyphMap as bbIconGlyphMap} from "@src/components/BBIcon";
  678. 	 * import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
  679. 	 * import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";
  680. 	 *
  681. 	 * export const applyCustomCode = externalCodeSetup => {
  682. 	 *     const renderIcon = props => {
  683. 	 *         const {calcFontSize} = useScreenProps(["calcFontSize"]);
  684. 	 *
  685. 	 *         const {focused, item, tabBarOptions, colors} = props;
  686. 	 *         const {tabBarActiveTintColor} = tabBarOptions;
  687. 	 *
  688. 	 *         if (!item) return null;
  689. 	 *
  690. 	 *         let color;
  691. 	 *         let menuIcon;
  692. 	 *         if (item.icon.type === "buddyboss") {
  693. 	 *             if (bbIconGlyphMap[item.icon.id]) {
  694. 	 *                 menuIcon = {
  695. 	 *                     fontIconName: item.icon.id,
  696. 	 *                     fontIconVariant: getMenuFontIconVariant(item.icon, focused)
  697. 	 *                 };
  698. 	 *             } else {
  699. 	 *                 menuIcon = {
  700. 	 *                     uri: focused ? item.icon.uri_active || item.icon.uri : item.icon.uri
  701. 	 *                 };
  702. 	 *             }
  703. 	 *             color = focused ? tabBarActiveTintColor : item.icon.color;
  704. 	 *         } else {
  705. 	 *             menuIcon = {
  706. 	 *                 uri: focused ? item.icon.uri_active || item.icon.uri : item.icon.uri
  707. 	 *             };
  708. 	 *             if (item.icon.type !== "custom") {
  709. 	 *                 color = focused ? tabBarActiveTintColor : item.icon.color;
  710. 	 *             } else if (item.icon.fill_color) {
  711. 	 *                 color = focused ? tabBarActiveTintColor : item.icon.color;
  712. 	 *             }
  713. 	 *         }
  714. 	 *
  715. 	 *         if (item.object === "notifications" || item.object === "messages") {
  716. 	 *             return (
  717. 	 *                 <BadgeIcon
  718. 	 *                     calcFontSize={calcFontSize}
  719. 	 *                     tintColor={color}
  720. 	 *                     bottomTabsBg={colors.bottomTabsBg}
  721. 	 *                     warningColor={colors.warningColor}
  722. 	 *                     foregroundColor={item.icon.fg_color}
  723. 	 *                     platform="ios"
  724. 	 *                     inMore={false}
  725. 	 *                     app={"learnerapp"}
  726. 	 *                     type={item.object}
  727. 	 *                     icon={menuIcon}
  728. 	 *                     styles={{height: 25, width: 25}}
  729. 	 *                 />
  730. 	 *             );
  731. 	 *         }
  732. 	 *
  733. 	 *         return (
  734. 	 *             <Icon
  735. 	 *                 icon={menuIcon}
  736. 	 *                 foregroundColor={item.icon.fg_color}
  737. 	 *                 tintColor={color}
  738. 	 *                 styles={{height: 25, width: 25}}
  739. 	 *             />
  740. 	 *         );
  741. 	 *     };
  742. 	 *
  743. 	 *     const MyTabBar = withGlobalStyles(props => {
  744. 	 *         const {state, descriptors, navigation, global, colors} = props;
  745. 	 *
  746. 	 *         const insets = useSafeAreaInsets();
  747. 	 *         const bottomSafeArea = correctBottomSafeArea(insets.bottom);
  748. 	 *
  749. 	 *         const textStyle = [
  750. 	 *             global.menuLabelStyle,
  751. 	 *             {
  752. 	 *                 marginHorizontal: 5,
  753. 	 *                 marginTop: isTabletOrIPad() ? -(bottomSafeArea / 5) : 2,
  754. 	 *                 fontWeight: FontWeights["medium"],
  755. 	 *                 ...textRTLStyleFix(),
  756. 	 *                 opacity: 1,
  757. 	 *                 textAlign: "center"
  758. 	 *             }
  759. 	 *         ];
  760. 	 *
  761. 	 *         return (
  762. 	 *             <View style={{flexDirection: "row"}}>
  763. 	 *                 {state.routes.map((route, index) => {
  764. 	 *                     const {options} = descriptors[route.key];
  765. 	 *
  766. 	 *                     const item = route.params.item;
  767. 	 *
  768. 	 *                     const isFocused = state.index === index;
  769. 	 *
  770. 	 *                     const onPress = () => {
  771. 	 *                         const event = navigation.emit({
  772. 	 *                             type: "tabPress",
  773. 	 *                             target: route.key,
  774. 	 *                             canPreventDefault: true
  775. 	 *                         });
  776. 	 *
  777. 	 *                         if (!isFocused && !event.defaultPrevented) {
  778. 	 *                             navigation.navigate({name: route.name, merge: true});
  779. 	 *                         }
  780. 	 *                     };
  781. 	 *
  782. 	 *                     return (
  783. 	 *                         <TouchableOpacity
  784. 	 *                             onPress={onPress}
  785. 	 *                             style={{
  786. 	 *                                 flex: 1,
  787. 	 *                                 height: 40,
  788. 	 *                                 alignItems: "center",
  789. 	 *                                 alignSelf: "center",
  790. 	 *                                 marginBottom: 33
  791. 	 *                             }}
  792. 	 *                             activeOpacity={1}
  793. 	 *                         >
  794. 	 *                             <View
  795. 	 *                                 style={{
  796. 	 *                                     height: 30,
  797. 	 *                                     alignItems: "center",
  798. 	 *                                     justifyContent: "center"
  799. 	 *                                 }}
  800. 	 *                             >
  801. 	 *                                 {renderIcon({
  802. 	 *                                     focused: isFocused,
  803. 	 *                                     item,
  804. 	 *                                     colors,
  805. 	 *                                     tabBarOptions: options
  806. 	 *                                 })}
  807. 	 *                             </View>
  808. 	 *
  809. 	 *                             <Text
  810. 	 *                                 style={[
  811. 	 *                                     textStyle,
  812. 	 *                                     {color: isFocused ? colors.linkColor : colors.textColor}
  813. 	 *                                 ]}
  814. 	 *                                 numberOfLines={1}
  815. 	 *                                 ellipsizeMode="tail"
  816. 	 *                                 allowFontScaling={false}
  817. 	 *                             >
  818. 	 *                                 {item.label}
  819. 	 *                             </Text>
  820. 	 *                         </TouchableOpacity>
  821. 	 *                     );
  822. 	 *                 })}
  823. 	 *             </View>
  824. 	 *         );
  825. 	 *     });
  826. 	 *
  827. 	 *     externalCodeSetup.navigationApi.setBottomTabBar(props => (
  828. 	 *         <MyTabBar {...props} />
  829. 	 *     ));
  830. 	 * }
  831. 	 */
  832. 	setBottomTabBar = bottomTabBar => {
  833. 		this.bottomTabBar = bottomTabBar;
  834. 	};
  836. 	animatedSwitchNavigator = (routes, options) => ({
  837. 		routes: routes,
  838. 		options: options
  839. 	});
  841. 	/**
  842. 	 * This hook allows you to create your own animated switch navigator.
  843. 	 * For example, you can add a new route and use it as your initial switch route instead of the default "Auth" route which will show you the login screen.
  844. 	 * @method
  845. 	 * @param {animatedSwitchNavigatorProps} animatedSwitchNavigator
  846. 	 * @returns {animatedSwitchNavigatorReturn}
  847. 	 *
  848. 	 * @example <caption> Add a custom screen to be used as initial switch route </caption>
  849. 	 *
  850. 	 * //In custom_code/MyCustomScreen.js...
  851. 	 *
  852. 	 * import React from 'react';
  853. 	 * import { View, Text, Button } from 'react-native';
  854. 	 *
  855. 	 * const MyCustomScreen = props => {
  856. 	 *
  857. 	 *  return <View style={{ flex: 1, justifyContent: "center", alignSelf: "center" }}>
  858. 	 *    <Text> Welcome to our App! New adventure awaits!</Text>
  859. 	 *    <Button title="Go to App" onPress={() => props.navigation.navigate("Auth")} />
  860. 	 *  </View>
  861. 	 * }
  862. 	 *
  863. 	 * export default MyCustomScreen;
  864. 	 *
  865. 	 *
  866. 	 * //In custom_code/index.js...
  867. 	 *
  868. 	 * ...
  869. 	 *
  870. 	 * import MyCustomScreen from "./components/MyCustomScreen";
  871. 	 * export const applyCustomCode = externalCodeSetup => {
  872. 	 *
  873. 	 *  externalCodeSetup.navigationApi.setAnimatedSwitchNavigator((routes, options, routeProps) => {
  874. 	 *
  875. 	 *    const feature = routeProps.settings.features.multisite_network;
  876. 	 *    const hasMultiSite = Platform.select({
  877. 	 *      ios: feature.is_enabled_ios,
  878. 	 *      android: feature.is_enabled_android
  879. 	 *    })
  880. 	 *
  881. 	 *     // Get the initial switch route based on state data.
  882. 	 *     // getInitialSwitchRoute() is based on BB App's AppNavigator.js
  883. 	 *     // Feel free to copy and paste this to your own code
  884. 	 *
  885. 	 *    const getInitialSwitchRoute = () => {
  886. 	 *
  887. 	 *      const defaultInitialRoute = "Auth";
  888. 	 *
  889. 	 *      const myCustomRoute = "MyCustomScreen"
  890. 	 *
  891. 	 *      if (!routeProps.hasValidSigning) {
  892. 	 *        return "InvalidSigningScreen";
  893. 	 *      }
  894. 	 *
  895. 	 *      if (routeProps.shouldEnforceVersionControl) {
  896. 	 *        return "VersionControlScreen";
  897. 	 *      } else if (routeProps.isLoggedIn) {
  898. 	 *        if (
  899. 	 *          routeProps.isFeatureEnabled(hasMultiSite) &&
  900. 	 *          routeProps.sites.selectedSite === null
  901. 	 *        ) {
  902. 	 *          return "AuthSiteSelectionScreen";
  903. 	 *        } else {
  904. 	 *          return routeProps.shouldLockApp ? "AppLockScreen" : "noAuth";
  905. 	 *        }
  906. 	 *      }
  907. 	 *      else {
  908. 	 *        return myCustomRoute; //Use my own custom route instead of the default "Auth" route
  909. 	 *        // return defaultInitialRoute;
  910. 	 *      }
  911. 	 *
  912. 	 *    };
  913. 	 *
  914. 	 *    const newRoutes = {
  915. 	 *     ...routes,
  916. 	 *     MyCustomScreen: {
  917. 	 *      screen: MyCustomScreen
  918. 	 *     }
  919. 	 *    }
  920. 	 *
  921. 	 *    const newOptions = {
  922. 	 *     ...options,
  923. 	 *     initialRouteName: getInitialSwitchRoute()
  924. 	 *    }
  925. 	 *
  926. 	 *    return {
  927. 	 *     routes: newRoutes,
  928. 	 *     options: newOptions,
  929. 	 *    }
  930. 	 *
  931. 	 *  })
  932. 	 * }
  933. 	 */
  934. 	setAnimatedSwitchNavigator = animatedSwitchNavigator => {
  935. 		this.animatedSwitchNavigator = animatedSwitchNavigator;
  936. 	};
  938. 	screensWithoutTabBar = [];
  940. 	/**
  941. 	 * This hook allows you to customise which screens will not have a tab bar even when the "Show on All Screens" option is selected.
  942. 	 * Therefore you can use this hook to specifically select the pages where you don’t want to display tab bars.
  943. 	 * @method
  944. 	 * @param {Array} screensWithoutTabBar Screen names: {@link https://www.buddyboss.com/resources/app-codex/global.html#MainStackScreenNames}
  945. 	 * @example
  946. 	 *
  947. 	 * externalCodeSetup.navigationApi.setScreensWithoutTabBar(["BlogSingleScreen", "CoursesSingleScreen"])
  948. 	 */
  949. 	setScreensWithoutTabBar = screensWithoutTabBar => {
  950. 		this.screensWithoutTabBar = screensWithoutTabBar;
  951. 	};
  952. }