haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] Simplify hiding Container components 

When a Container is not visible there is no need for it to react to touch
events, thus avoid wrapping it in a touch component.

In addition, simplify the style needed for hiding the component. Moving the view
out of the window boundaries no longer works on RN 0.42 on iOS. Seting the size
to 0 works well on both platforms, but in the future (when we upgrade to RN >=
0.43) we should switch to display: none:
4d69f4b2d1
This commit is contained in:
Saúl Ibarra Corretgé 2017-07-25 17:04:53 +02:00 committed by Lyubo Marinov
parent e8223bbb4a
commit d3c408ae2e
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
react/features/base/react/components/native/Container.js
View File

@ -2,7 +2,6 @@
import React from 'react';
import {
Dimensions,
TouchableHighlight,
TouchableWithoutFeedback,
View
@ -39,41 +38,29 @@ export default class Container extends AbstractContainer {
// visible
// The following property is responsible to hide/show this Container by
// moving it out of site of the screen boundaries. An attempt to use the
// opacity property was made in order to eventually implement a
// fadeIn/fadeOut animation, however a known React Native problem was
// discovered, which allows the view to still capture touch events even
// if hidden.
let visibilityStyle;
// setting its size to 0. This will make the component not visible, but
// it won't be destroyed, all its state is preserved. This is
// intentional.
// TODO: replace with display: 'none', supported in RN >= 0.43.
const hidden = visible === false; // true / undefined
if (typeof visible !== 'undefined' && !visible) {
const windowDimensions = Dimensions.get('window');
visibilityStyle = {
bottom: -windowDimensions.height,
right: -windowDimensions.width
};
}
const renderParent = touchFeedback || onClick;
if (!renderParent && visibilityStyle) {
if (hidden) {
style = {
...style,
...visibilityStyle
height: 0,
width: 0
};
}
// eslint-disable-next-line object-property-newline
let component = super._render(View, { ...props, style });
if (renderParent) {
if (!hidden && (touchFeedback || onClick)) {
const parentType
= touchFeedback ? TouchableHighlight : TouchableWithoutFeedback;
const parentProps = {};
onClick && (parentProps.onPress = onClick);
visibilityStyle && (parentProps.style = visibilityStyle);
component = React.createElement(parentType, parentProps, component);
}