diff --git a/react/features/base/react/components/AbstractContainer.js b/react/features/base/react/components/AbstractContainer.js index 08309b6a1..932f74d53 100644 --- a/react/features/base/react/components/AbstractContainer.js +++ b/react/features/base/react/components/AbstractContainer.js @@ -2,6 +2,8 @@ import React, { Component } from 'react'; +import { getFixedPlatformStyle } from '../../styles'; + /** * {@code AbstractContainer} component's property types. */ @@ -80,6 +82,7 @@ export default class AbstractContainer extends Component

{ _render(type, props?: P) { const { children, + style, /* eslint-disable no-unused-vars */ @@ -94,7 +97,12 @@ export default class AbstractContainer extends Component

{ ...filteredProps } = props || this.props; + const _style = getFixedPlatformStyle(style); + // $FlowFixMe - return React.createElement(type, filteredProps, children); + return React.createElement(type, { + style: _style, + ...filteredProps + }, children); } } diff --git a/react/features/base/styles/functions.js b/react/features/base/styles/functions.any.js similarity index 100% rename from react/features/base/styles/functions.js rename to react/features/base/styles/functions.any.js diff --git a/react/features/base/styles/functions.native.js b/react/features/base/styles/functions.native.js new file mode 100644 index 000000000..854d13472 --- /dev/null +++ b/react/features/base/styles/functions.native.js @@ -0,0 +1,18 @@ +// @flow + +import { type StyleType } from './functions.any'; + +export * from './functions.any'; + +/** + * Fixes the style prop that is passed to a platform generic component based on platform specific + * format requirements. + * + * @param {StyleType} style - The passed style prop to the component. + * @returns {StyleType} + */ +export function getFixedPlatformStyle(style: StyleType): StyleType { + // There is nothing to do on mobile - yet. + + return style; +} diff --git a/react/features/base/styles/functions.web.js b/react/features/base/styles/functions.web.js new file mode 100644 index 000000000..77de0c9ad --- /dev/null +++ b/react/features/base/styles/functions.web.js @@ -0,0 +1,26 @@ +// @flow + +import { type StyleType } from './functions.any'; + +export * from './functions.any'; + +/** + * Fixes the style prop that is passed to a platform generic component based on platform specific + * format requirements. + * + * @param {StyleType} style - The passed style prop to the component. + * @returns {StyleType} + */ +export function getFixedPlatformStyle(style: StyleType): StyleType { + if (Array.isArray(style)) { + const _style = {}; + + for (const component of style) { + Object.assign(_style, component); + } + + return _style; + } + + return style; +}