2094b15432
In another installment of "how on earth?!", using a 1px border instead of a 0.2px border fixes view clipping on a device where it didn't work before (Moto X Play). Observations: - When nothing was rendered, rotating the device made the buttons show up, this makes me think the Surface is not properly composited with the toolbar view for some reason. Why this happens in some devices and not in others remains a mistery. Other approaches attempted: - Setting View.collapsed to false so it will remain in the view hierarchy. It made no effect. - Setting View.needsOffscreenAlphaCompositing to true. It made no effect. Just like before, I came up with this workaround by accident, but couldn't find another way, so here we go again.
97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
/* @flow */
|
|
|
|
import { Platform } from '../react';
|
|
|
|
import { ColorPalette } from './components';
|
|
|
|
declare type StyleSheet = Object;
|
|
|
|
/**
|
|
* The list of the well-known style properties which may not be numbers on Web
|
|
* but must be numbers on React Native.
|
|
*
|
|
* @private
|
|
*/
|
|
const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
|
|
|
|
/* eslint-disable flowtype/space-before-type-colon */
|
|
|
|
/**
|
|
* Create a style sheet using the provided style definitions.
|
|
*
|
|
* @param {StyleSheet} styles - A dictionary of named style definitions.
|
|
* @param {StyleSheet} [overrides={}] - Optional set of additional (often
|
|
* platform-dependent/specific) style definitions that will override the base
|
|
* (often platform-independent) styles.
|
|
* @returns {StyleSheet}
|
|
*/
|
|
export function createStyleSheet(styles: StyleSheet, overrides: StyleSheet = {})
|
|
: StyleSheet {
|
|
|
|
/* eslint-enable flowtype/space-before-type-colon */
|
|
|
|
const combinedStyles = {};
|
|
|
|
for (const k of Object.keys(styles)) {
|
|
combinedStyles[k]
|
|
= _shimStyles({
|
|
...styles[k],
|
|
...overrides[k]
|
|
});
|
|
}
|
|
|
|
return combinedStyles;
|
|
}
|
|
|
|
/**
|
|
* Works around a bug in react-native or react-native-webrtc on Android which
|
|
* causes Views overlaying RTCView to be clipped. Even though we (may) display
|
|
* multiple RTCViews, it is enough to apply the fix only to a View with a
|
|
* bounding rectangle containing all RTCviews and their overlaying Views.
|
|
*
|
|
* @param {StyleSheet} styles - An object which represents a stylesheet.
|
|
* @public
|
|
* @returns {StyleSheet}
|
|
*/
|
|
export function fixAndroidViewClipping<T: StyleSheet>(styles: T): T {
|
|
if (Platform.OS === 'android') {
|
|
styles.borderColor = ColorPalette.appBackground;
|
|
styles.borderWidth = 1;
|
|
}
|
|
|
|
return styles;
|
|
}
|
|
|
|
/**
|
|
* Shims style properties to work correctly on native. Allows us to minimize the
|
|
* number of style declarations that need to be set or overridden for specific
|
|
* platforms.
|
|
*
|
|
* @param {StyleSheet} styles - An object which represents a stylesheet.
|
|
* @private
|
|
* @returns {StyleSheet}
|
|
*/
|
|
function _shimStyles<T: StyleSheet>(styles: T): T {
|
|
// Certain style properties may not be numbers on Web but must be numbers on
|
|
// React Native. For example, height and width may be expressed in percent
|
|
// on Web but React Native will not understand them and we will get errors
|
|
// (at least during development). Convert such well-known properties to
|
|
// numbers if possible; otherwise, remove them to avoid runtime errors.
|
|
for (const k of _WELL_KNOWN_NUMBER_PROPERTIES) {
|
|
const v = styles[k];
|
|
const typeofV = typeof v;
|
|
|
|
if (typeofV !== 'undefined' && typeofV !== 'number') {
|
|
const numberV = Number(v);
|
|
|
|
if (Number.isNaN(numberV)) {
|
|
delete styles[k];
|
|
} else {
|
|
styles[k] = numberV;
|
|
}
|
|
}
|
|
}
|
|
|
|
return styles;
|
|
}
|