diff --git a/src/components/devsupport/components/measure/measure.component.tsx b/src/components/devsupport/components/measure/measure.component.tsx
index b4e675edc..b6141e4d4 100644
--- a/src/components/devsupport/components/measure/measure.component.tsx
+++ b/src/components/devsupport/components/measure/measure.component.tsx
@@ -8,17 +8,19 @@ import React from 'react';
import {
findNodeHandle,
UIManager,
+ StatusBar,
} from 'react-native';
import { Frame } from './type';
-
+
export interface MeasureElementProps
{
force?: boolean;
+ shouldUseTopInsets?: boolean;
onMeasure: (frame: Frame) => void;
children: React.ReactElement
;
}
export type MeasuringElement
= React.ReactElement;
-
+
/**
* Measures child element size and it's screen position asynchronously.
* Returns measure result in `onMeasure` callback.
@@ -32,7 +34,9 @@ export type MeasuringElement
= React.ReactElement;
* ...
* };
*
- *
+ *
*
*
* ```
@@ -41,7 +45,7 @@ export type MeasuringElement = React.ReactElement;
* but `force` property may be used to measure any time it's needed.
* DON'T USE THIS FLAG IF THE COMPONENT RENDERS FIRST TIME OR YOU KNOW `onLayout` WILL BE CALLED.
*/
-export const MeasureElement = (props: MeasureElementProps): MeasuringElement => {
+export const MeasureElement: React.FC = (props): MeasuringElement => {
const ref = React.useRef();
@@ -61,7 +65,8 @@ export const MeasureElement = (props: MeasureElementProps): MeasuringElement =>
};
const onUIManagerMeasure = (x: number, y: number, w: number, h: number): void => {
- const frame: Frame = bindToWindow(new Frame(x, y, w, h), Frame.window());
+ const originY = props.shouldUseTopInsets ? y + StatusBar.currentHeight || 0 : y;
+ const frame: Frame = bindToWindow(new Frame(x, originY, w, h), Frame.window());
props.onMeasure(frame);
};
@@ -76,3 +81,7 @@ export const MeasureElement = (props: MeasureElementProps): MeasuringElement =>
return React.cloneElement(props.children, { ref, onLayout: measureSelf });
};
+
+MeasureElement.defaultProps = {
+ shouldUseTopInsets: false,
+}
\ No newline at end of file
diff --git a/src/components/theme/application/applicationProvider.component.tsx b/src/components/theme/application/applicationProvider.component.tsx
index dff878364..c1170a217 100644
--- a/src/components/theme/application/applicationProvider.component.tsx
+++ b/src/components/theme/application/applicationProvider.component.tsx
@@ -1,8 +1,8 @@
/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
import React from 'react';
import merge from 'lodash.merge';
@@ -15,25 +15,25 @@ import {
import { StyleProvider } from '../style/styleProvider.component';
import { ThemeProviderProps } from '../theme/themeProvider.component';
import { ModalPanel } from '../modal/modalPanel.component';
-
+
interface EvaRuntimeProcessingProps {
mapping: SchemaType;
customMapping?: CustomSchemaType;
}
-
+
interface EvaBuildtimeProcessingProps {
styles: ThemeStyleType;
}
-
+
type EvaProcessingProps = EvaRuntimeProcessingProps | EvaBuildtimeProcessingProps;
-
+
export type ApplicationProviderProps = EvaProcessingProps & ThemeProviderProps;
export type ApplicationProviderElement = React.ReactElement;
-
+
interface State {
styles: ThemeStyleType;
}
-
+
/**
* Overall application container.
*
@@ -110,7 +110,7 @@ export class ApplicationProvider extends React.Component {
const customizedMapping: SchemaType = merge({}, mapping, custom);
return this.schemaProcessor.process(customizedMapping);
@@ -127,4 +127,4 @@ export class ApplicationProvider extends React.Component
);
}
-}
+}
\ No newline at end of file
diff --git a/src/components/theme/modal/modal.service.tsx b/src/components/theme/modal/modal.service.tsx
index 943aa058f..c0a814e26 100644
--- a/src/components/theme/modal/modal.service.tsx
+++ b/src/components/theme/modal/modal.service.tsx
@@ -61,6 +61,7 @@ import {
class ModalServiceType {
panel: ModalPresenting | null = null;
+ private shouldUseTopInsets: boolean = false;
public mount(panel: ModalPresenting | null): void {
this.panel = panel;
@@ -87,6 +88,14 @@ class ModalServiceType {
return this.panel.hide(identifier);
}
}
+
+ public set setShouldUseTopInsets(state: boolean) {
+ this.shouldUseTopInsets = state;
+ };
+
+ public get getShouldUseTopInsets(): boolean {
+ return this.shouldUseTopInsets;
+ }
}
export interface ModalPresentingConfig {
diff --git a/src/components/ui/menu/menuGroup.component.tsx b/src/components/ui/menu/menuGroup.component.tsx
index 807f1b2fd..71c769eb6 100644
--- a/src/components/ui/menu/menuGroup.component.tsx
+++ b/src/components/ui/menu/menuGroup.component.tsx
@@ -20,6 +20,7 @@ import {
MenuItemElement,
MenuItemProps,
} from './menuItem.component';
+import { ModalService } from '../../theme';
import { MenuItemDescriptor } from './menu.service';
export interface MenuGroupProps extends MenuItemProps {
@@ -149,7 +150,9 @@ export class MenuGroup extends React.Component {
private renderMeasuringGroupedItems = (evaStyle): MeasuringElement => {
return (
-
+
{this.renderGroupedItems(evaStyle)}
);
diff --git a/src/components/ui/modal/modal.component.tsx b/src/components/ui/modal/modal.component.tsx
index 1d604db83..532d92ea2 100644
--- a/src/components/ui/modal/modal.component.tsx
+++ b/src/components/ui/modal/modal.component.tsx
@@ -149,7 +149,9 @@ export class Modal extends React.PureComponent {
private renderMeasuringContentElement = (): MeasuringElement => {
return (
-
+
{this.renderContentElement()}
);
diff --git a/src/components/ui/popover/popover.component.tsx b/src/components/ui/popover/popover.component.tsx
index ceffa77cc..eff3eff32 100644
--- a/src/components/ui/popover/popover.component.tsx
+++ b/src/components/ui/popover/popover.component.tsx
@@ -218,7 +218,9 @@ export class Popover extends React.Component {
private renderMeasuringPopoverElement = (): MeasuringElement => {
return (
-
+
{this.renderPopoverElement()}
);
@@ -227,6 +229,7 @@ export class Popover extends React.Component {
public render(): React.ReactElement {
return (
{this.props.anchor()}