react-native-navigation的迁移库

Options.ts 23KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132
  1. // tslint:disable jsdoc-format
  2. import { ImageRequireSource, Insets } from 'react-native';
  3. type Color = string;
  4. type FontFamily = string;
  5. type FontWeight =
  6. | 'regular'
  7. | 'bold'
  8. | 'thin'
  9. | 'ultraLight'
  10. | 'light'
  11. | 'medium'
  12. | 'semibold'
  13. | 'heavy'
  14. | 'black';
  15. type LayoutOrientation = 'portrait' | 'landscape';
  16. type AndroidDensityNumber = number;
  17. type SystemItemIcon =
  18. | 'done'
  19. | 'cancel'
  20. | 'edit'
  21. | 'save'
  22. | 'add'
  23. | 'flexibleSpace'
  24. | 'fixedSpace'
  25. | 'compose'
  26. | 'reply'
  27. | 'action'
  28. | 'organize'
  29. | 'bookmarks'
  30. | 'search'
  31. | 'refresh'
  32. | 'stop'
  33. | 'camera'
  34. | 'trash'
  35. | 'play'
  36. | 'pause'
  37. | 'rewind'
  38. | 'fastForward'
  39. | 'undo'
  40. | 'redo';
  41. type Interpolation = 'linear' | 'accelerateDecelerate' | 'decelerate' | 'accelerate' | 'decelerateAccelerate';
  42. export interface OptionsSplitView {
  43. /**
  44. * Master view display mode
  45. * @default 'auto'
  46. */
  47. displayMode?: 'auto' | 'visible' | 'hidden' | 'overlay';
  48. /**
  49. * Master view side. Leading is left. Trailing is right.
  50. * @default 'leading'
  51. */
  52. primaryEdge?: 'leading' | 'trailing';
  53. /**
  54. * Set the minimum width of master view
  55. */
  56. minWidth?: number;
  57. /**
  58. * Set the maximum width of master view
  59. */
  60. maxWidth?: number;
  61. }
  62. export interface OptionsStatusBar {
  63. /**
  64. * Set the status bar visibility
  65. * @default true
  66. */
  67. visible?: boolean;
  68. /**
  69. * Set the text color of the status bar
  70. * @default 'light'
  71. */
  72. style?: 'light' | 'dark';
  73. /**
  74. * Set the background color of the status bar
  75. * #### (Android specific)
  76. */
  77. backgroundColor?: Color;
  78. /**
  79. * Draw screen behind the status bar
  80. * #### (Android specific)
  81. */
  82. drawBehind?: boolean;
  83. }
  84. export interface OptionsLayout {
  85. fitSystemWindows?: boolean;
  86. /**
  87. * Set the screen background color
  88. */
  89. backgroundColor?: Color;
  90. /**
  91. * Set background color only for components, helps reduce overdraw if background color is set in default options.
  92. * #### (Android specific)
  93. */
  94. componentBackgroundColor?: Color;
  95. /**
  96. * Set the allowed orientations
  97. */
  98. orientation?: LayoutOrientation[];
  99. /**
  100. * Layout top margin
  101. * #### (Android specific)
  102. */
  103. topMargin?: number;
  104. /**
  105. * Set language direction.
  106. * only works with DefaultOptions
  107. */
  108. direction?: 'rtl' | 'ltr';
  109. }
  110. export enum OptionsModalPresentationStyle {
  111. formSheet = 'formSheet',
  112. pageSheet = 'pageSheet',
  113. overFullScreen = 'overFullScreen',
  114. overCurrentContext = 'overCurrentContext',
  115. currentContext = 'currentContext',
  116. popover = 'popover',
  117. fullScreen = 'fullScreen',
  118. none = 'none'
  119. }
  120. export enum OptionsModalTransitionStyle {
  121. coverVertical = 'coverVertical',
  122. crossDissolve = 'crossDissolve',
  123. flipHorizontal = 'flipHorizontal',
  124. partialCurl = 'partialCurl'
  125. }
  126. export interface OptionsTopBarLargeTitle {
  127. /**
  128. * Enable large titles
  129. */
  130. visible?: boolean;
  131. /**
  132. * Set the font size of large title's text
  133. */
  134. fontSize?: number;
  135. /**
  136. * Set the color of large title's text
  137. */
  138. color?: Color;
  139. /**
  140. * Set the font family of large title's text
  141. */
  142. fontFamily?: FontFamily;
  143. /**
  144. * Set the font weight, ignore fontFamily and use the iOS system fonts instead
  145. * #### (iOS specific)
  146. */
  147. fontWeight?: FontWeight;
  148. }
  149. export interface OptionsTopBarTitle {
  150. /**
  151. * Text to display in the title area
  152. */
  153. text?: string;
  154. /**
  155. * Font size
  156. */
  157. fontSize?: number;
  158. /**
  159. * Text color
  160. */
  161. color?: Color;
  162. /**
  163. * Title font family
  164. *
  165. * Make sure that the font is available
  166. */
  167. fontFamily?: FontFamily;
  168. /**
  169. * Set the font weight, ignore fontFamily and use the iOS system fonts instead
  170. * #### (iOS specific)
  171. */
  172. fontWeight?: FontWeight;
  173. /**
  174. * Custom component as the title view
  175. */
  176. component?: {
  177. /**
  178. * Component reference id, Auto generated if empty
  179. */
  180. id?: string;
  181. /**
  182. * Name of your component
  183. */
  184. name: string;
  185. /**
  186. * Set component alignment
  187. */
  188. alignment?: 'center' | 'fill';
  189. /**
  190. * Properties to pass down to the component
  191. */
  192. passProps?: object;
  193. };
  194. /**
  195. * Top Bar title height in densitiy pixels
  196. * #### (Android specific)
  197. */
  198. height?: number;
  199. /**
  200. * Title alignment
  201. * #### (Android specific)
  202. */
  203. alignment?: 'center' | 'fill';
  204. }
  205. export interface OptionsTopBarSubtitle {
  206. /**
  207. * Set subtitle text
  208. */
  209. text?: string;
  210. /**
  211. * Set subtitle font size
  212. */
  213. fontSize?: number;
  214. /**
  215. * Set subtitle color
  216. */
  217. color?: Color;
  218. /**
  219. * Set subtitle font family
  220. */
  221. fontFamily?: FontFamily;
  222. /**
  223. * Set the font weight, ignore fontFamily and use the iOS system fonts instead
  224. * #### (iOS specific)
  225. */
  226. fontWeight?: FontWeight;
  227. /**
  228. * Set subtitle alignment
  229. */
  230. alignment?: 'center';
  231. }
  232. export interface OptionsTopBarBackButton {
  233. /**
  234. * Image to show as the back button
  235. */
  236. icon?: ImageRequireSource;
  237. /**
  238. * Weither the back button is visible or not
  239. * @default true
  240. */
  241. visible?: boolean;
  242. /**
  243. * Set the back button title
  244. * #### (iOS specific)
  245. */
  246. title?: string;
  247. /**
  248. * Show title or just the icon
  249. * #### (iOS specific)
  250. */
  251. showTitle?: boolean;
  252. /**
  253. * Back button icon and text color
  254. */
  255. color?: Color;
  256. /**
  257. * Set subtitle font size
  258. */
  259. fontSize?: number;
  260. /**
  261. * Set subtitle font family
  262. */
  263. fontFamily?: FontFamily;
  264. /**
  265. * Set testID for reference in E2E tests
  266. */
  267. testID?: string;
  268. }
  269. export interface OptionsTopBarBackground {
  270. /**
  271. * Background color of the top bar
  272. */
  273. color?: Color;
  274. /**
  275. * Clip the top bar background to bounds if set to true.
  276. * #### (iOS specific)
  277. */
  278. clipToBounds?: boolean;
  279. /**
  280. * Set a custom component for the Top Bar background
  281. */
  282. component?: {
  283. name?: string;
  284. /**
  285. * Properties to pass down to the component
  286. */
  287. passProps?: object;
  288. };
  289. /**
  290. * Allows the NavBar to be translucent (blurred)
  291. * #### (iOS specific)
  292. */
  293. translucent?: boolean;
  294. /**
  295. * Enable background blur
  296. * #### (iOS specific)
  297. */
  298. blur?: boolean;
  299. }
  300. export interface OptionsTopBarButton {
  301. /**
  302. * Button id for reference press event
  303. */
  304. id: string;
  305. /**
  306. * Set the button icon
  307. */
  308. icon?: ImageRequireSource;
  309. /**
  310. * Set the button icon insets
  311. */
  312. iconInsets?: IconInsets;
  313. /**
  314. * Set the button as a custom component
  315. */
  316. component?: {
  317. /**
  318. * Component reference id, Auto generated if empty
  319. */
  320. id?: string;
  321. /**
  322. * Name of your component
  323. */
  324. name: string;
  325. /**
  326. * Properties to pass down to the component
  327. */
  328. passProps?: object;
  329. /**
  330. * (Android only) component width
  331. */
  332. width?: number;
  333. /**
  334. * (Android only) component height
  335. */
  336. height?: number;
  337. };
  338. /**
  339. * (iOS only) Set the button as an iOS system icon
  340. */
  341. systemItem?: SystemItemIcon;
  342. /**
  343. * Set the button text
  344. */
  345. text?: string;
  346. /**
  347. * Overrides the text that's read by the screen reader when the user interacts with the element
  348. */
  349. accessibilityLabel?: string;
  350. /**
  351. * Set the button font family
  352. */
  353. fontFamily?: string;
  354. /**
  355. * Set the font weight, ignore fontFamily and use the iOS system fonts instead
  356. * #### (iOS specific)
  357. */
  358. fontWeight?: FontWeight;
  359. /**
  360. * Set the button enabled or disabled
  361. * @default true
  362. */
  363. enabled?: boolean;
  364. /**
  365. * Disable icon tinting
  366. */
  367. disableIconTint?: boolean;
  368. /**
  369. * Set text color
  370. */
  371. color?: Color;
  372. /**
  373. * Set text color in disabled state
  374. */
  375. disabledColor?: Color;
  376. /**
  377. * Set testID for reference in E2E tests
  378. */
  379. testID?: string;
  380. /**
  381. * (Android only) Set showAsAction value
  382. * @see {@link https://developer.android.com/guide/topics/resources/menu-resource|Android developer guide: Menu resource}
  383. */
  384. showAsAction?: 'ifRoom' | 'withText' | 'always' | 'never';
  385. }
  386. export interface OptionsTopBar {
  387. /**
  388. * Show or hide the top bar
  389. */
  390. visible?: boolean;
  391. /**
  392. * Controls whether TopBar visibility changes should be animated
  393. */
  394. animate?: boolean;
  395. /**
  396. * Top bar will hide and show based on users scroll direction
  397. */
  398. hideOnScroll?: boolean;
  399. /**
  400. * Change button colors in the top bar
  401. */
  402. leftButtonColor?: Color;
  403. rightButtonColor?: Color;
  404. leftButtonDisabledColor?: Color;
  405. rightButtonDisabledColor?: Color;
  406. /**
  407. * Draw behind the navbar
  408. */
  409. drawBehind?: boolean;
  410. /**
  411. * Can be used to reference the top bar in E2E tests
  412. */
  413. testID?: string;
  414. /**
  415. * Title configuration
  416. */
  417. title?: OptionsTopBarTitle;
  418. /**
  419. * Subtitle configuration
  420. */
  421. subtitle?: OptionsTopBarSubtitle;
  422. /**
  423. * Back button configuration
  424. */
  425. backButton?: OptionsTopBarBackButton;
  426. /**
  427. * List of buttons to the left
  428. */
  429. leftButtons?: OptionsTopBarButton[];
  430. /**
  431. * List of buttons to the right
  432. */
  433. rightButtons?: OptionsTopBarButton[];
  434. /**
  435. * Background configuration
  436. */
  437. background?: OptionsTopBarBackground;
  438. /**
  439. * Control the NavBar blur style
  440. * #### (iOS specific)
  441. * @requires translucent: true
  442. * @default 'default'
  443. */
  444. barStyle?: 'default' | 'black';
  445. /**
  446. * Disable the border on bottom of the navbar
  447. * #### (iOS specific)
  448. * @default false
  449. */
  450. noBorder?: boolean;
  451. /**
  452. * Show a UISearchBar in the Top Bar
  453. * #### (iOS 11+ specific)
  454. */
  455. searchBar?: boolean;
  456. /**
  457. * Hides the UISearchBar when scrolling
  458. * #### (iOS 11+ specific)
  459. */
  460. searchBarHiddenWhenScrolling?: boolean;
  461. /**
  462. * The placeholder value in the UISearchBar
  463. * #### (iOS 11+ specific)
  464. */
  465. searchBarPlaceholder?: string;
  466. /**
  467. * Controls Hiding NavBar on focus UISearchBar
  468. * #### (iOS 11+ specific)
  469. */
  470. hideNavBarOnFocusSearchBar?: boolean;
  471. /**
  472. * Control the Large Title configuration
  473. * #### (iOS 11+ specific)
  474. */
  475. largeTitle?: OptionsTopBarLargeTitle;
  476. /**
  477. * Set the height of the navbar in dp
  478. * #### (Android specific)
  479. */
  480. height?: AndroidDensityNumber;
  481. /**
  482. * Change the navbar border color
  483. * #### (Android specific)
  484. */
  485. borderColor?: Color;
  486. /**
  487. * Set the border height of the navbar in dp
  488. * #### (Android specific)
  489. */
  490. borderHeight?: AndroidDensityNumber;
  491. /**
  492. * Set the elevation of the navbar in dp
  493. * #### (Android specific)
  494. */
  495. elevation?: AndroidDensityNumber;
  496. /**
  497. * Layout top margin
  498. * #### (Android specific)
  499. */
  500. topMargin?: number;
  501. }
  502. export interface SharedElementTransition {
  503. fromId: string;
  504. toId: string;
  505. duration?: number;
  506. interpolation: Interpolation;
  507. }
  508. export interface ElementTransition {
  509. id: string;
  510. alpha?: AppearingElementAnimation | DisappearingElementAnimation;
  511. translationX?: AppearingElementAnimation | DisappearingElementAnimation;
  512. translationY?: AppearingElementAnimation | DisappearingElementAnimation;
  513. scaleX?: AppearingElementAnimation | DisappearingElementAnimation;
  514. scaleY?: AppearingElementAnimation | DisappearingElementAnimation;
  515. rotationX?: AppearingElementAnimation | DisappearingElementAnimation;
  516. rotationY?: AppearingElementAnimation | DisappearingElementAnimation;
  517. x?: AppearingElementAnimation | DisappearingElementAnimation;
  518. y?: AppearingElementAnimation | DisappearingElementAnimation;
  519. }
  520. export interface AppearingElementAnimation extends ElementAnimation {
  521. from: number;
  522. }
  523. export interface DisappearingElementAnimation extends ElementAnimation {
  524. to: number;
  525. }
  526. export interface ElementAnimation {
  527. duration: number;
  528. startDelay?: number;
  529. interpolation: Interpolation;
  530. }
  531. export interface OptionsFab {
  532. id: string;
  533. backgroundColor?: Color;
  534. clickColor?: Color;
  535. rippleColor?: Color;
  536. visible?: boolean;
  537. icon?: ImageRequireSource;
  538. iconColor?: Color;
  539. alignHorizontally?: 'left' | 'right';
  540. alignVertically?: 'top' | 'bottom';
  541. hideOnScroll?: boolean;
  542. size?: number;
  543. actions?: OptionsFab[];
  544. }
  545. export interface OptionsBottomTabs {
  546. /**
  547. * Show or hide the bottom tabs
  548. */
  549. visible?: boolean;
  550. /**
  551. * Enable animations when toggling visibility
  552. */
  553. animate?: boolean;
  554. /**
  555. * Use large icons when possible, even when three tabs without titles are displayed
  556. * #### (android specific)
  557. * @default false
  558. */
  559. preferLargeIcons?: boolean;
  560. /**
  561. * Switch to another screen within the bottom tabs via index (starting from 0)
  562. */
  563. currentTabIndex?: number;
  564. /**
  565. * Switch to another screen within the bottom tabs via screen name
  566. */
  567. currentTabId?: string;
  568. /**
  569. * Set a testID to reference the bottom tabs
  570. */
  571. testID?: string;
  572. /**
  573. * Draw screen component under the tab bar
  574. */
  575. drawBehind?: boolean;
  576. /**
  577. * Set a background color for the bottom tabs
  578. */
  579. backgroundColor?: Color;
  580. /**
  581. * Set when tabs are attached to hierarchy consequently when the
  582. * RootView's constructor is called.
  583. */
  584. tabsAttachMode?: 'together' | 'afterInitialTab' | 'onSwitchToTab';
  585. /**
  586. * Control the Bottom Tabs blur style
  587. * #### (iOS specific)
  588. * @requires translucent: true
  589. * @default 'default'
  590. */
  591. barStyle?: 'default' | 'black';
  592. /**
  593. * Allows the Bottom Tabs to be translucent (blurred)
  594. * #### (iOS specific)
  595. */
  596. translucent?: boolean;
  597. /**
  598. * Hide the top line of the Tab Bar
  599. * #### (iOS specific)
  600. */
  601. hideShadow?: boolean;
  602. /**
  603. * Control the text display mode below the tab icon
  604. * #### (Android specific)
  605. */
  606. titleDisplayMode?:
  607. | 'alwaysShow'
  608. | 'showWhenActive'
  609. | 'alwaysHide'
  610. | 'showWhenActiveForce';
  611. /**
  612. * Set the elevation of the Bottom Tabs in dp
  613. * #### (Android specific)
  614. */
  615. elevation?: AndroidDensityNumber;
  616. }
  617. export interface DotIndicatorOptions {
  618. // default red
  619. color?: Color;
  620. // default 6
  621. size?: number;
  622. // default false
  623. visible?: boolean;
  624. }
  625. export type ImageResource = string;
  626. export interface OptionsBottomTab {
  627. dotIndicator?: DotIndicatorOptions;
  628. /**
  629. * Set the text to display below the icon
  630. */
  631. text?: string;
  632. /**
  633. * Set the text in a badge that is overlayed over the component
  634. */
  635. badge?: string;
  636. /**
  637. * Set the background color of the badge that is overlayed over the component
  638. */
  639. badgeColor?: string;
  640. /**
  641. * Set a testID to reference the tab in E2E tests
  642. */
  643. testID?: string;
  644. /**
  645. * Set the tab icon
  646. */
  647. icon?: ImageRequireSource | ImageResource;
  648. /**
  649. * Set the icon tint
  650. */
  651. iconColor?: Color;
  652. /**
  653. * Set the text color
  654. */
  655. textColor?: Color;
  656. /**
  657. * Set the selected icon tint
  658. */
  659. selectedIconColor?: Color;
  660. /**
  661. * Set the selected text color
  662. */
  663. selectedTextColor?: Color;
  664. /**
  665. * Set the text font family
  666. */
  667. fontFamily?: FontFamily;
  668. /**
  669. * Set the font weight, ignore fontFamily and use the iOS system fonts instead
  670. * #### (iOS specific)
  671. */
  672. fontWeight?: FontWeight;
  673. /**
  674. * Set the text font size
  675. */
  676. fontSize?: number;
  677. /**
  678. * Set the insets of the icon
  679. * #### (iOS specific)
  680. */
  681. iconInsets?: Insets;
  682. /**
  683. * Set selected icon image
  684. * #### (iOS specific)
  685. */
  686. selectedIcon?: ImageRequireSource;
  687. /**
  688. * Set true if you want to disable the icon tinting
  689. * #### (iOS specific)
  690. */
  691. disableIconTint?: boolean;
  692. /**
  693. * Set true if you want to disable the text tinting
  694. * #### (iOS specific)
  695. */
  696. disableSelectedIconTint?: boolean;
  697. /**
  698. * Set the font size for selected tabs
  699. * #### (Android specific)
  700. */
  701. selectedFontSize?: number;
  702. /**
  703. * If it's set to false, pressing a tab won't select the tab
  704. * instead it will emit a bottomTabPressedEvent
  705. */
  706. selectTabOnPress?: boolean;
  707. }
  708. export interface SideMenuSide {
  709. /**
  710. * Show or hide the side menu
  711. */
  712. visible?: boolean;
  713. /**
  714. * Enable or disable the side menu
  715. */
  716. enabled?: boolean;
  717. /**
  718. * Set the width of the side menu
  719. */
  720. width?: number;
  721. /**
  722. * Set the height of the side menu
  723. */
  724. height?: number;
  725. /**
  726. * Stretch sideMenu contents when opened past the width
  727. * #### (iOS specific)
  728. * @default true
  729. */
  730. shouldStretchDrawer?: boolean;
  731. }
  732. export interface OptionsSideMenu {
  733. /**
  734. * Configure the left side menu
  735. */
  736. left?: SideMenuSide;
  737. /**
  738. * Configure the right side menu
  739. */
  740. right?: SideMenuSide;
  741. /**
  742. * Configure how a user is allowed to open a drawer using gestures
  743. * #### (iOS specific)
  744. * @default 'entireScreen'
  745. */
  746. openGestureMode?: 'entireScreen' | 'bezel';
  747. }
  748. export interface OverlayOptions {
  749. /**
  750. * Capture touches outside of the Component View
  751. */
  752. interceptTouchOutside?: boolean;
  753. /**
  754. * Control wether this Overlay should handle Keyboard events.
  755. * Set this to true if your Overlay contains a TextInput.
  756. */
  757. handleKeyboardEvents?: boolean;
  758. }
  759. export interface ModalOptions {
  760. /**
  761. * Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle = 'pageSheet'
  762. * #### (iOS specific)
  763. */
  764. swipeToDismiss?: boolean;
  765. }
  766. export interface OptionsPreviewAction {
  767. /**
  768. * Reference ID to get callbacks from
  769. */
  770. id: string;
  771. /**
  772. * Action text
  773. */
  774. title: string;
  775. /**
  776. * Action style
  777. */
  778. style?: 'default' | 'selected' | 'destructive';
  779. /**
  780. * Subactions that will be shown when this action is pressed.
  781. */
  782. actions?: OptionsPreviewAction[];
  783. }
  784. export interface OptionsPreview {
  785. /**
  786. * Pass a react node tag to mark a SourceRect for a specific
  787. * peek and pop preview element.
  788. */
  789. reactTag?: number;
  790. /**
  791. * You can set this property specify the width of the preview.
  792. * If the width is greater than the device width, it will be zoomed in.
  793. */
  794. width?: number;
  795. /**
  796. * Height of the preview
  797. */
  798. height?: 100;
  799. /**
  800. * You can control if the users gesture will result in pushing
  801. * the preview screen into the stack.
  802. */
  803. commit?: boolean;
  804. /**
  805. * List of actions that will appear underneath the preview window.
  806. * They can be nested for sub actions.
  807. */
  808. actions?: OptionsPreviewAction[];
  809. }
  810. export interface OptionsAnimationPropertyConfig {
  811. /**
  812. * Animate from this value, ex. 0
  813. */
  814. from?: number;
  815. /**
  816. * Animate to this value, ex. 1
  817. */
  818. to?: number;
  819. /**
  820. * Animation duration
  821. * @default 300
  822. */
  823. duration?: number;
  824. /**
  825. * Animation delay
  826. * @default 0
  827. */
  828. startDelay?: number;
  829. /**
  830. * Animation interplation
  831. */
  832. interpolation?: 'accelerate' | 'decelerate';
  833. }
  834. /**
  835. * Used to animate the actual content added to the hierarchy.
  836. * Content can be a React component (component) or any other layout (Stack, BottomTabs etc)
  837. */
  838. export interface ScreenAnimationOptions {
  839. /**
  840. * Animate the element over x value
  841. */
  842. x?: OptionsAnimationPropertyConfig;
  843. /**
  844. * Animate the element over y value
  845. */
  846. y?: OptionsAnimationPropertyConfig;
  847. /**
  848. * Animate the element over translateX
  849. */
  850. translationX?: OptionsAnimationPropertyConfig;
  851. /**
  852. * Animate the element over translateY
  853. */
  854. translationY?: OptionsAnimationPropertyConfig;
  855. /**
  856. * Animate the element over opacity
  857. */
  858. alpha?: OptionsAnimationPropertyConfig;
  859. /**
  860. * Animate the element over scaleX
  861. */
  862. scaleX?: OptionsAnimationPropertyConfig;
  863. /**
  864. * Animate the element over scaleY
  865. */
  866. scaleY?: OptionsAnimationPropertyConfig;
  867. /**
  868. * Animate the element over rotationX
  869. */
  870. rotationX?: OptionsAnimationPropertyConfig;
  871. /**
  872. * Animate the element over rotationY
  873. */
  874. rotationY?: OptionsAnimationPropertyConfig;
  875. /**
  876. * Animate the element over rotation
  877. */
  878. rotation?: OptionsAnimationPropertyConfig;
  879. /**
  880. * Wait for the root view to render before start animation
  881. */
  882. waitForRender?: boolean;
  883. /**
  884. * Enable or disable the animation
  885. * @default true
  886. */
  887. enabled?: boolean;
  888. }
  889. export interface IconInsets {
  890. /**
  891. * Configure top inset
  892. */
  893. top?: number;
  894. /**
  895. * Configure left inset
  896. */
  897. left?: number;
  898. /**
  899. * Configure bottom inset
  900. */
  901. bottom?: number;
  902. /**
  903. * Configure right inset
  904. */
  905. right?: number;
  906. }
  907. export interface ViewAnimationOptions extends ScreenAnimationOptions {
  908. /**
  909. * ID of the Top Bar we want to animate
  910. */
  911. id?: string;
  912. }
  913. /**
  914. * Used for describing stack commands animations.
  915. */
  916. export interface StackAnimationOptions {
  917. /**
  918. * Wait for the View to render before start animation
  919. */
  920. waitForRender?: boolean;
  921. /**
  922. * Enable or disable the animation
  923. * @default true
  924. */
  925. enabled?: boolean;
  926. /**
  927. * Configure animations for the top bar
  928. */
  929. topBar?: ViewAnimationOptions;
  930. /**
  931. * Configure animations for the bottom tabs
  932. */
  933. bottomTabs?: ViewAnimationOptions;
  934. /**
  935. * Configure animations for the content (Screen)
  936. */
  937. content?: ViewAnimationOptions;
  938. /**
  939. * Animations to be applied on elements which are shared between the appearing and disappearing screens
  940. */
  941. sharedElementTransitions?: SharedElementTransition[];
  942. /**
  943. * Animations to be applied on views in the appearing or disappearing screens
  944. */
  945. elementTransitions?: ElementTransition[];
  946. }
  947. /**
  948. * Used for configuring command animations
  949. */
  950. export interface AnimationOptions {
  951. /**
  952. * Configure the setStackRoot animation
  953. */
  954. setStackRoot?: ViewAnimationOptions;
  955. /**
  956. * Configure the setRoot animation
  957. */
  958. setRoot?: ViewAnimationOptions;
  959. /**
  960. * Configure what animates when a screen is pushed
  961. */
  962. push?: StackAnimationOptions;
  963. /**
  964. * Configure what animates when a screen is popped
  965. */
  966. pop?: StackAnimationOptions;
  967. /**
  968. * Configure what animates when modal is shown
  969. */
  970. showModal?: ViewAnimationOptions;
  971. /**
  972. * Configure what animates when modal is dismissed
  973. */
  974. dismissModal?: ViewAnimationOptions;
  975. }
  976. /**
  977. * Configure Android's NavigationBar
  978. */
  979. export interface NavigationBarOptions {
  980. backgroundColor?: Color;
  981. visible?: boolean;
  982. }
  983. export interface Options {
  984. /**
  985. * Configure the status bar
  986. */
  987. statusBar?: OptionsStatusBar;
  988. /**
  989. * Configure the layout
  990. */
  991. layout?: OptionsLayout;
  992. /**
  993. * Configure the presentation style of the modal
  994. */
  995. modalPresentationStyle?: OptionsModalPresentationStyle;
  996. /**
  997. * Configure the transition style of the modal
  998. *
  999. * #### (Android specific)
  1000. */
  1001. modalTransitionStyle?: OptionsModalTransitionStyle;
  1002. /**
  1003. * Configure the top bar
  1004. */
  1005. topBar?: OptionsTopBar;
  1006. fab?: OptionsFab;
  1007. /**
  1008. * Configure the bottom tabs
  1009. */
  1010. bottomTabs?: OptionsBottomTabs;
  1011. /**
  1012. * Configure the bottom tab associated to the screen
  1013. */
  1014. bottomTab?: OptionsBottomTab;
  1015. /**
  1016. * Configure the side menu
  1017. */
  1018. sideMenu?: OptionsSideMenu;
  1019. /**
  1020. * Configure the splitView controller
  1021. */
  1022. splitView?: OptionsSplitView;
  1023. /**
  1024. * Configure the overlay
  1025. */
  1026. overlay?: OverlayOptions;
  1027. /**
  1028. * Configure the modal
  1029. */
  1030. modal?: ModalOptions;
  1031. /**
  1032. * Animation used for navigation commands that modify the layout
  1033. * hierarchy can be controlled in options.
  1034. *
  1035. * Animations can be modified per command and it's also possible
  1036. * to change the default animation for each command.
  1037. *
  1038. * Example:
  1039. ```js
  1040. setRoot: {
  1041. y: {
  1042. from: 1000,
  1043. to: 0,
  1044. duration: 500,
  1045. interpolation: 'accelerate',
  1046. },
  1047. alpha: {
  1048. from: 0,
  1049. to: 1,
  1050. duration: 400,
  1051. startDelay: 100,
  1052. interpolation: 'accelerate'
  1053. }
  1054. }
  1055. ```
  1056. */
  1057. animations?: AnimationOptions;
  1058. /**
  1059. * Configure Android's NavigationBar
  1060. */
  1061. navigationBar?: NavigationBarOptions;
  1062. /**
  1063. * Preview configuration for Peek and Pop
  1064. * #### (iOS specific)
  1065. */
  1066. preview?: OptionsPreview;
  1067. /**
  1068. * Enable or disable swipe back to pop gesture
  1069. * #### (iOS specific)
  1070. * @default true
  1071. */
  1072. popGesture?: boolean;
  1073. /**
  1074. * Background image for the screen
  1075. * #### (iOS specific)
  1076. */
  1077. backgroundImage?: ImageRequireSource;
  1078. /**
  1079. * Background image for the Navigation View
  1080. * #### (iOS specific)
  1081. */
  1082. rootBackgroundImage?: ImageRequireSource;
  1083. /**
  1084. * Enable or disable automatically blurring focused input, dismissing keyboard on unmount
  1085. * #### (Android specific)
  1086. * @default false
  1087. */
  1088. blurOnUnmount?: boolean;
  1089. }