[v2] Typings for styling options and layouts (#3626)

* Added all styling options and WIP comments

* Completed screen options and layout types

* Added typings to the main entrypoint

* Added buttons too

lib/src/Navigation.ts

@@ -13,6 +13,8 @@ import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentType } from 'react';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
+import { LayoutRoot, Layout } from './interfaces/Layout';
+import { Options } from './interfaces/Options';
 import { TouchablePreview, Props as TouchablePreviewProps } from './adapters/TouchablePreview';
 
 export class Navigation {
@@ -67,28 +69,28 @@ export class Navigation {
   /**
    * Reset the app to a new layout
    */
-  public setRoot(layout): Promise<any> {
+  public setRoot(layout: LayoutRoot): Promise<any> {
     return this.commands.setRoot(layout);
   }
 
   /**
    * Set default options to all screens. Useful for declaring a consistent style across the app.
    */
-  public setDefaultOptions(options): void {
+  public setDefaultOptions(options: Options): void {
     this.commands.setDefaultOptions(options);
   }
 
   /**
    * Change a component's navigation options
    */
-  public mergeOptions(componentId: string, options): void {
+  public mergeOptions(componentId: string, options: Options): void {
     this.commands.mergeOptions(componentId, options);
   }
 
   /**
    * Show a screen as a modal.
    */
-  public showModal(layout): Promise<any> {
+  public showModal(layout: Layout): Promise<any> {
     return this.commands.showModal(layout);
   }
 
@@ -109,7 +111,7 @@ export class Navigation {
   /**
    * Push a new layout into this screen's navigation stack.
    */
-  public push(componentId: string, layout): Promise<any> {
+  public push(componentId: string, layout: Layout): Promise<any> {
     return this.commands.push(componentId, layout);
   }
 
@@ -137,14 +139,14 @@ export class Navigation {
   /**
    * Sets new root component to stack.
    */
-  public setStackRoot(componentId: string, layout): Promise<any> {
+  public setStackRoot(componentId: string, layout: Layout): Promise<any> {
     return this.commands.setStackRoot(componentId, layout);
   }
 
   /**
    * Show overlay on top of the entire app
    */
-  public showOverlay(layout): Promise<any> {
+  public showOverlay(layout: Layout): Promise<any> {
     return this.commands.showOverlay(layout);
   }
 

lib/src/commands/Commands.test.ts

@@ -54,7 +54,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.setRoot({ root: { component: { name: 'bla', inner: obj } } });
+      uut.setRoot({ root: { component: { name: 'bla', inner: obj } as any } });
       expect(mockCommandsSender.setRoot.mock.calls[0][1].root.data.inner).not.toBe(obj);
     });
 
@@ -137,12 +137,12 @@ describe('Commands', () => {
   describe('mergeOptions', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = { title: 'test' };
-      uut.mergeOptions('theComponentId', obj);
+      uut.mergeOptions('theComponentId', obj as any);
       expect(mockCommandsSender.mergeOptions.mock.calls[0][1]).not.toBe(obj);
     });
 
     it('passes options for component', () => {
-      uut.mergeOptions('theComponentId', { title: '1' });
+      uut.mergeOptions('theComponentId', { title: '1' } as any);
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledWith('theComponentId', { title: '1' });
     });
@@ -151,7 +151,7 @@ describe('Commands', () => {
   describe('setDefaultOptions', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = { title: 'test' };
-      uut.setDefaultOptions(obj);
+      uut.setDefaultOptions(obj as any);
       expect(mockCommandsSender.setDefaultOptions.mock.calls[0][0]).not.toBe(obj);
     });
   });
@@ -177,7 +177,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showModal({ component: { name: 'name', inner: obj } });
+      uut.showModal({ component: { name: 'name', inner: obj } as any });
       expect(mockCommandsSender.showModal.mock.calls[0][1].data.inner).not.toBe(obj);
     });
 
@@ -271,7 +271,7 @@ describe('Commands', () => {
           duration: 0.8
         }
       };
-      uut.pop('theComponentId', options);
+      uut.pop('theComponentId', options as any);
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.pop).toHaveBeenCalledWith('pop+UNIQUE_ID', 'theComponentId', options);
     });
@@ -348,7 +348,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showOverlay({ component: { name: 'name', inner: obj } });
+      uut.showOverlay({ component: { name: 'name', inner: obj } as any });
       expect(mockCommandsSender.showOverlay.mock.calls[0][1].data.inner).not.toBe(obj);
     });
 

lib/src/commands/Commands.ts

@@ -2,6 +2,8 @@ import * as _ from 'lodash';
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { Options } from '../interfaces/Options';
+import { Layout, LayoutRoot } from '../interfaces/Layout';
 
 export class Commands {
   constructor(
@@ -12,7 +14,7 @@ export class Commands {
     private readonly uniqueIdProvider: UniqueIdProvider) {
   }
 
-  public setRoot(simpleApi) {
+  public setRoot(simpleApi: LayoutRoot) {
     const input = _.cloneDeep(simpleApi);
     const root = this.layoutTreeParser.parse(input.root);
     this.layoutTreeCrawler.crawl(root);
@@ -35,7 +37,7 @@ export class Commands {
     return result;
   }
 
-  public setDefaultOptions(options) {
+  public setDefaultOptions(options: Options) {
     const input = _.cloneDeep(options);
     this.layoutTreeCrawler.processOptions(input);
 
@@ -43,7 +45,7 @@ export class Commands {
     this.commandsObserver.notify('setDefaultOptions', { options });
   }
 
-  public mergeOptions(componentId, options) {
+  public mergeOptions(componentId: string, options: Options) {
     const input = _.cloneDeep(options);
     this.layoutTreeCrawler.processOptions(input);
 
@@ -51,7 +53,7 @@ export class Commands {
     this.commandsObserver.notify('mergeOptions', { componentId, options });
   }
 
-  public showModal(simpleApi) {
+  public showModal(simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
@@ -62,7 +64,7 @@ export class Commands {
     return result;
   }
 
-  public dismissModal(componentId) {
+  public dismissModal(componentId: string) {
     const commandId = this.uniqueIdProvider.generate('dismissModal');
     const result = this.nativeCommandsSender.dismissModal(commandId, componentId);
     this.commandsObserver.notify('dismissModal', { commandId, componentId });
@@ -76,7 +78,7 @@ export class Commands {
     return result;
   }
 
-  public push(componentId, simpleApi) {
+  public push(componentId: string, simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -88,28 +90,28 @@ export class Commands {
     return result;
   }
 
-  public pop(componentId, options) {
+  public pop(componentId: string, options: Options) {
     const commandId = this.uniqueIdProvider.generate('pop');
     const result = this.nativeCommandsSender.pop(commandId, componentId, options);
     this.commandsObserver.notify('pop', { commandId, componentId, options });
     return result;
   }
 
-  public popTo(componentId) {
+  public popTo(componentId: string) {
     const commandId = this.uniqueIdProvider.generate('popTo');
     const result = this.nativeCommandsSender.popTo(commandId, componentId);
     this.commandsObserver.notify('popTo', { commandId, componentId });
     return result;
   }
 
-  public popToRoot(componentId) {
+  public popToRoot(componentId: string) {
     const commandId = this.uniqueIdProvider.generate('popToRoot');
     const result = this.nativeCommandsSender.popToRoot(commandId, componentId);
     this.commandsObserver.notify('popToRoot', { commandId, componentId });
     return result;
   }
 
-  public setStackRoot(componentId, simpleApi) {
+  public setStackRoot(componentId: string, simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -121,7 +123,7 @@ export class Commands {
     return result;
   }
 
-  public showOverlay(simpleApi) {
+  public showOverlay(simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -133,7 +135,7 @@ export class Commands {
     return result;
   }
 
-  public dismissOverlay(componentId) {
+  public dismissOverlay(componentId: string) {
     const commandId = this.uniqueIdProvider.generate('dismissOverlay');
     const result = this.nativeCommandsSender.dismissOverlay(commandId, componentId);
     this.commandsObserver.notify('dismissOverlay', { commandId, componentId });

lib/src/interfaces/Layout.ts

@@ -0,0 +1,142 @@
+import { Options, OptionsSplitView } from './Options';
+
+export interface LayoutComponent {
+  /**
+   * Component reference id, Auto generated if empty
+   */
+  id?: string;
+  /**
+   * Name of your component
+   */
+  name: string;
+  /**
+   * Styling options
+   */
+  options?: Options;
+  /**
+   * Properties to pass down to the component
+   */
+  passProps?: object;
+}
+
+export interface LayoutStackChildren {
+  /**
+   * Set component
+   */
+  component?: LayoutComponent;
+}
+
+export interface LayoutStack {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set children screens
+   */
+  children?: LayoutStackChildren[];
+  /**
+   * Set options
+   */
+  options?: Options;
+}
+
+export interface LayoutBottomTabsChildren {
+  /**
+   * Set stack
+   */
+  stack?: LayoutStack;
+  /**
+   * Set component
+   */
+  component?: LayoutComponent;
+}
+
+export interface LayoutBottomTabs {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set the children screens
+   */
+  children?: LayoutBottomTabsChildren[];
+  /**
+   * Set the bottom tabs options
+   */
+  options?: Options;
+}
+
+export interface LayoutSideMenu {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set the left side bar
+   */
+  left?: LayoutStackChildren;
+  /**
+   * Set the center view
+   */
+  center?: Layout;
+  /**
+   * Set the right side bar
+   */
+  right?: LayoutStackChildren;
+}
+
+export interface LayoutSplitView {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set master layout (the smaller screen, sidebar)
+   */
+  master: Layout;
+  /**
+   * Set detail layout (the larger screen, flexes)
+   */
+  detail: Layout;
+  /**
+   * Configure split view
+   */
+  options?: OptionsSplitView;
+}
+
+export interface LayoutRoot {
+  /**
+   * Set the root
+   */
+  root: Layout;
+  modals?: any;
+  overlays?: any;
+}
+
+export interface Layout {
+  /**
+   * Set the component
+   */
+  component?: LayoutComponent;
+  /**
+   * Set the stack
+   */
+  stack?: LayoutStack;
+  /**
+   * Set the bottom tabs
+   */
+  bottomTabs?: LayoutBottomTabs;
+  /**
+   * Set the side menu
+   */
+  sideMenu?: LayoutSideMenu;
+  /**
+   * Set the split view
+   */
+  splitView?: LayoutSplitView;
+}

lib/src/interfaces/Options.ts

@@ -0,0 +1,740 @@
+// tslint:disable jsdoc-format
+import { ImageRequireSource, Insets } from 'react-native';
+
+type Color = string;
+type FontFamily = string;
+type LayoutOrientation = 'portrait' | 'landscape';
+type AndroidDensityNumber = number;
+
+export interface OptionsSplitView {
+  /**
+   * Master view display mode
+   * @default 'auto'
+   */
+  displayMode: 'auto' | 'visible' | 'hidden' | 'overlay';
+  /**
+   * Master view side. Leading is left. Trailing is right.
+   * @default 'leading'
+   */
+  primaryEdge: 'leading' | 'trailing';
+  /**
+   * Set the minimum width of master view
+   */
+  minWidth: number;
+  /**
+   * Set the maximum width of master view
+   */
+  maxWidth: number;
+}
+
+export interface OptionsStatusBar {
+  /**
+   * Set the status bar visibility
+   * @default true
+   */
+  visible?: boolean;
+  /**
+   * Set the text color of the status bar
+   * @default 'light'
+   */
+  style?: 'light' | 'dark';
+  /**
+   * Set the background color of the status bar
+   * #### (Android specific)
+   */
+  backgroundColor: Color;
+  /**
+   * Draw screen behind the status bar
+   * #### (Android specific)
+   */
+  drawBehind: boolean;
+}
+
+export interface OptionsLayout {
+  /**
+   * Set the screen background color
+   */
+  backgroundColor?: Color;
+  /**
+   * Set the allowed orientations
+   */
+  orientation?: LayoutOrientation[];
+  /**
+   * Layout top margin
+   * #### (Android specific)
+   */
+  topMargin: number;
+}
+
+export enum OptionsModalPresentationStyle {
+  'formSheet',
+  'pageSheet',
+  'overFullScreen',
+  'overCurrentContext',
+  'currentContext',
+  'popOver',
+  'fullScreen',
+  'none',
+}
+
+export interface OptionsTopBarLargeTitle {
+  /**
+   * Enable large titles
+   */
+  visible?: boolean;
+  /**
+   * Set the font size of large title's text
+   */
+  fontSize?: number;
+  /**
+   * Set the color of large title's text
+   */
+  color?: Color;
+  /**
+   * Set the font family of large title's text
+   */
+  fontFamily?: FontFamily;
+}
+
+export interface OptionsTopBarTitle {
+  /**
+   * Text to display in the title area
+   */
+  text?: string;
+  /**
+   * Font size
+   */
+  fontSize?: number;
+  /**
+   * Text color
+   */
+  color?: Color;
+  /**
+   * Title font family
+   *
+   * Make sure that the font is available
+   */
+  fontFamily?: FontFamily;
+  /**
+   * Custom component as the title view
+   */
+  component?: {
+    name: string;
+    alignment?: 'center' | 'fill';
+  };
+  /**
+   * Top Bar title height in densitiy pixels
+   * #### (Android specific)
+   */
+  height: number;
+}
+
+export interface OptionsTopBarSubtitle {
+  /**
+   * Set subtitle text
+   */
+  text?: string;
+  /**
+   * Set subtitle font size
+   */
+  fontSize?: number;
+  /**
+   * Set subtitle color
+   */
+  color?: Color;
+  /**
+   * Set subtitle font family
+   */
+  fontFamily?: FontFamily;
+  /**
+   * Set subtitle alignment
+   */
+  alignment?: 'center';
+}
+
+export interface OptionsTopBarBackButton {
+  /**
+   * Image to show as the back button
+   */
+  icon: ImageRequireSource;
+  /**
+   * Weither the back button is visible or not
+   * @default true
+   */
+  visible: boolean;
+  /**
+   * Set the back button title
+   * #### (iOS specific)
+   */
+  title: string;
+  /**
+   * Show title or just the icon
+   * #### (iOS specific)
+   */
+  showTitle: boolean;
+  /**
+   * Back button icon or text color
+   * #### (Android specific)
+   */
+  color?: Color;
+}
+
+export interface  OptionsTopBarBackground {
+  /**
+   * Background color of the top bar
+   */
+  color?: Color;
+  /**
+   * Set a custom component for the Top Bar background
+   */
+  component?: {
+    name?: string;
+  };
+}
+
+export interface OptionsTopBarButton {
+  /**
+   * Button id for reference press event
+   */
+  id: string;
+  /**
+   * Set the button icon
+   */
+  icon?: ImageRequireSource;
+  /**
+   * Set the button as a custom component
+   */
+  component?: {
+    name: string;
+  };
+  /**
+   * Set the button text
+   */
+  text?: string;
+  /**
+   * Set the button enabled or disabled
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Disable icon tinting
+   */
+  disableIconTint?: boolean;
+  /**
+   * Set text color
+   */
+  color?: Color;
+  /**
+   * Set text color in disabled state
+   */
+  disabledColor?: Color;
+  /**
+   * Set testID for reference in E2E tests
+   */
+  testID: string;
+}
+
+export interface OptionsTopBar {
+  /**
+   * Show or hide the top bar
+   */
+  visible?: boolean;
+  /**
+   * Controls whether TopBar visibility changes should be animated
+   */
+  animate?: boolean;
+  /**
+   * Top bar will hide and show based on users scroll direction
+   */
+  hideOnScroll?: boolean;
+  /**
+   * Change button colors in the top bar
+   */
+  buttonColor?: Color;
+  /**
+   * Draw behind the navbar
+   */
+  drawBehind?: boolean;
+  /**
+   * Can be used to reference the top bar in E2E tests
+   */
+  testID?: string;
+  /**
+   * Title configuration
+   */
+  title?: OptionsTopBarTitle;
+  /**
+   * Subtitle configuration
+   */
+  subtitle?: OptionsTopBarSubtitle;
+  /**
+   * Back button configuration
+   */
+  backButton?: OptionsTopBarBackButton;
+  /**
+   * List of buttons to the left
+   */
+  leftButtons?: OptionsTopBarButton[];
+  /**
+   * List of buttons to the right
+   */
+  rightButtons?: OptionsTopBarButton[];
+  /**
+   * Background configuration
+   */
+  background?: OptionsTopBarBackground;
+  /**
+   * Control the NavBar blur style
+   * #### (iOS specific)
+   * @requires translucent: true
+   * @default 'default'
+   */
+  barStyle: 'default' | 'black';
+  /**
+   * Allows the NavBar to be translucent (blurred)
+   * #### (iOS specific)
+   * @requires transparent: false
+   */
+  translucent: boolean;
+  /**
+   * Allows the NavBar to be transparent
+   * #### (iOS specific)
+   */
+  transparent: boolean;
+  /**
+   * Disable the border on bottom of the navbar
+   * #### (iOS specific)
+   * @default false
+   */
+  noBorder: boolean;
+  /**
+   * Enable background blur
+   * #### (iOS specific)
+   */
+  blur: boolean;
+  /**
+   * Show a UISearchBar in the Top Bar
+   * #### (iOS 11+ specific)
+   */
+  searchBar?: boolean;
+  /**
+   * Hides the UISearchBar when scrolling
+   * #### (iOS 11+ specific)
+   */
+  searchBarHiddenWhenScrolling?: boolean;
+  /**
+   * The placeholder value in the UISearchBar
+   * #### (iOS 11+ specific)
+   */
+  searchBarPlaceholder?: string;
+  /**
+   * Control the Large Title configuration
+   * #### (iOS 11+ specific)
+   */
+  largeTitle?: OptionsTopBarLargeTitle;
+  /**
+   * Set the height of the navbar in dp
+   * #### (Android specific)
+   */
+  height?: AndroidDensityNumber;
+  /**
+   * Change the navbar border color
+   * #### (Android specific)
+   */
+  borderColor?: Color;
+  /**
+   * Set the border height of the navbar in dp
+   * #### (Android specific)
+   */
+  borderHeight?: AndroidDensityNumber;
+  /**
+   * Set the elevation of the navbar in dp
+   * #### (Android specific)
+   */
+  elevation?: AndroidDensityNumber;
+}
+
+export interface OptionsBottomTabs {
+  /**
+   * Show or hide the bottom tabs
+   */
+  visible?: boolean;
+  /**
+   * Enable animations when toggling visibility
+   */
+  animate?: boolean;
+  /**
+   * Switch to another screen within the bottom tabs via index (starting from 0)
+   */
+  currentTabIndex?: number;
+  /**
+   * Switch to another screen within the bottom tabs via screen name
+   */
+  currentTabId?: string;
+  /**
+   * Set a testID to reference the bottom tabs
+   */
+  testID?: string;
+  /**
+   * Draw screen component under the tab bar
+   */
+  drawBehind?: boolean;
+  /**
+   * Set a background color for the bottom tabs
+   */
+  backgroundColor?: Color;
+  /**
+   * Control the Bottom Tabs blur style
+   * #### (iOS specific)
+   * @requires translucent: true
+   * @default 'default'
+   */
+  barStyle?: 'default' | 'black';
+  /**
+   * Allows the Bottom Tabs to be translucent (blurred)
+   * #### (iOS specific)
+   * @requires transparent: false
+   */
+  translucent?: boolean;
+  /**
+   * Hide the top line of the Tab Bar
+   * #### (iOS specific)
+   */
+  hideShadow?: boolean;
+  /**
+   * Control the text display mode below the tab icon
+   * #### (Android specific)
+   */
+  titleDisplayMode?: 'alwaysShow' | 'showWhenActive' | 'alwaysHide';
+}
+
+export interface OptionsBottomTab {
+  /**
+   * Set the text to display below the icon
+   */
+  text?: string;
+  /**
+   * Set the text in a badge that is overlayed over the component
+   */
+  badge?: string;
+  /**
+   * Set a testID to reference the tab in E2E tests
+   */
+  testID?: string;
+  /**
+   * Set the tab icon
+   */
+  icon?: ImageRequireSource;
+  /**
+   * Set the icon tint
+   */
+  iconColor?: Color;
+  /**
+   * Set the text color
+   */
+  textColor?: Color;
+  /**
+   * Set the selected icon tint
+   */
+  selectedIconColor?: Color;
+  /**
+   * Set the selected text color
+   */
+  selectedTextColor?: Color;
+  /**
+   * Set the text font family
+   */
+  fontFamily?: FontFamily;
+  /**
+   * Set the text font size
+   */
+  fontSize?: number;
+  /**
+   * Set the insets of the icon
+   * #### (iOS specific)
+   */
+  iconInsets?: Insets;
+  /**
+   * Set selected icon image
+   * #### (iOS specific)
+   */
+  selectedIcon?: ImageRequireSource;
+  /**
+   * Set true if you want to disable the icon tinting
+   * #### (iOS specific)
+   */
+  disableIconTint?: boolean;
+  /**
+   * Set true if you want to disable the text tinting
+   * #### (iOS specific)
+   */
+  disableSelectedIconTint?: boolean;
+  /**
+   * Set the font size for selected tabs
+   * #### (Android specific)
+   */
+  selectedFontSize?: number;
+}
+
+export interface SideMenuSide {
+  /**
+   * Show or hide the side menu
+   */
+  visible?: boolean;
+  /**
+   * Enable or disable the side menu
+   */
+  enabled?: boolean;
+}
+
+export interface OptionsSideMenu {
+  /**
+   * Configure the left side menu
+   */
+  left?: SideMenuSide;
+  /**
+   * Configure the right side menu
+   */
+  right?: SideMenuSide;
+}
+
+export interface OptionsOverlay {
+  /**
+   * Capture touches outside of the Component View
+   */
+  interceptTouchOutside?: boolean;
+}
+
+export interface OptionsPreviewAction {
+  /**
+   * Reference ID to get callbacks from
+   */
+  id: string;
+  /**
+   * Action text
+   */
+  title: string;
+  /**
+   * Action style
+   */
+  style?: 'default' | 'selected' | 'destructive';
+  /**
+   * Subactions that will be shown when this action is pressed.
+   */
+  actions?: OptionsPreviewAction[];
+}
+
+export interface OptionsPreview {
+  /**
+   * Pass a react node tag to mark a SourceRect for a specific
+   * peek and pop preview element.
+   */
+  reactTag?: number;
+  /**
+   * You can set this property specify the width of the preview.
+   * If the width is greater than the device width, it will be zoomed in.
+   */
+  width?: number;
+  /**
+   * Height of the preview
+   */
+  height?: 100;
+  /**
+   * You can control if the users gesture will result in pushing
+   * the preview screen into the stack.
+   */
+  commit?: boolean;
+  /**
+   * List of actions that will appear underneath the preview window.
+   * They can be nested for sub actions.
+   */
+  actions?: OptionsPreviewAction[];
+}
+
+export interface OptionsAnimationPropertyConfig {
+  /**
+   * Animate from this value, ex. 0
+   */
+  from: number;
+  /**
+   * Animate to this value, ex. 1
+   */
+  to: number;
+  /**
+   * Animation duration
+   * @default 300
+   */
+  duration?: number;
+  /**
+   * Animation delay
+   * @default 0
+   */
+  startDelay?: number;
+  /**
+   * Animation interplation
+   */
+  interpolation?: 'accelerate' | 'decelerate';
+}
+
+export interface OptionsAnimationProperties {
+  /**
+   * Animate the element over translateX
+   */
+  x?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over translateY
+   */
+  y?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over opacity
+   */
+  alpha?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over scaleX
+   */
+  scaleX?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over scaleY
+   */
+  scaleY?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over rotationX
+   */
+  rotationX?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over rotationY
+   */
+  rotationY?: OptionsAnimationPropertyConfig;
+  /**
+   * Animate the element over rotation
+   */
+  rotation?: OptionsAnimationPropertyConfig;
+}
+
+export interface OptionsAnimationPropertiesId extends OptionsAnimationProperties {
+  /**
+   * ID of the Top Bar we want to animate
+   */
+  id?: string;
+}
+
+export interface OptionsAnimationSeparate {
+  /**
+   * Configure animations for the top bar
+   */
+  topBar?: OptionsAnimationPropertiesId;
+  /**
+   * Configure animations for the bottom tabs
+   */
+  bottomTabs?: OptionsAnimationPropertiesId;
+  /**
+   * Configure animations for the content (Screen)
+   */
+  content?: OptionsAnimationPropertiesId;
+}
+
+export interface OptionsAnimations {
+  /**
+   * Configure the start app animation
+   */
+  startApp?: OptionsAnimationProperties;
+  /**
+   * Configure what animates when a screen is pushed
+   */
+  push?: OptionsAnimationSeparate;
+  /**
+   * Configure what animates when a screen is popped
+   */
+  pop?: OptionsAnimationSeparate;
+  /**
+   * Configure what animates when modal is shown
+   */
+  showModal?: OptionsAnimationProperties;
+  /**
+   * Configure what animates when modal is dismissed
+   */
+  dismissModal?: OptionsAnimationProperties;
+}
+
+export interface Options {
+  /**
+   * Configure the status bar
+   */
+  statusBar?: OptionsStatusBar;
+  /**
+   * Configure the layout
+   */
+  layout?: OptionsLayout;
+  /**
+   * Configure the presentation style of the modal
+   */
+  modalPresentationStyle?: OptionsModalPresentationStyle;
+  /**
+   * Configure the top bar
+   */
+  topBar?: OptionsTopBar;
+  /**
+   * Configure the bottom tabs
+   */
+  bottomTabs?: OptionsBottomTabs;
+  /**
+   * Configure the bottom tab associated to the screen
+   */
+  bottomTab?: OptionsBottomTab;
+  /**
+   * Configure the side menu
+   */
+  sideMenu?: OptionsSideMenu;
+  /**
+   * Configure the overlay
+   */
+  overlay?: OptionsOverlay;
+  /**
+   * Animation used for navigation commands that modify the layout
+   * hierarchy can be controlled in options.
+   *
+   * Animations can be modified per command and it's also possible
+   * to change the default animation for each command.
+   *
+   * Example:
+```js
+startApp: {
+  y: {
+    from: 1000,
+    to: 0,
+    duration: 500,
+    interpolation: 'accelerate',
+  },
+  alpha: {
+    from: 0,
+    to: 1,
+    duration: 400,
+    startDelay: 100,
+    interpolation: 'accelerate'
+  }
+}
+```
+   */
+  animations?: OptionsAnimations;
+  /**
+   * Preview configuration for Peek and Pop
+   * #### (iOS specific)
+   */
+  preview?: OptionsPreview;
+  /**
+   * Enable or disable swipe back to pop gesture
+   * #### (iOS specific)
+   * @default true
+   */
+  popGesture?: boolean;
+  /**
+   * Background image for the screen
+   * #### (iOS specific)
+   */
+  backgroundImage?: ImageRequireSource;
+  /**
+   * Background image for the Navigation View
+   * #### (iOS specific)
+   */
+  rootBackgroundImage?: ImageRequireSource;
+}