diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.js index 34c05650..575edeec 100644 --- a/src/components/ProgressBar/index.js +++ b/src/components/ProgressBar/index.js @@ -11,7 +11,7 @@ import React, { Component } from 'react'; import { bool, number } from 'prop-types'; class ProgressBar extends Component { - _progressElement = null; + _progressElement: View; static displayName = 'ProgressBar'; @@ -80,10 +80,12 @@ const styles = StyleSheet.create({ track: { height: 5, overflow: 'hidden', - userSelect: 'none' + userSelect: 'none', + zIndex: 0 }, progress: { - height: '100%' + height: '100%', + zIndex: -1 }, animation: { animationDuration: '1s', diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js index c64c6f03..366ff88d 100644 --- a/src/components/Switch/index.js +++ b/src/components/Switch/index.js @@ -19,7 +19,7 @@ const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0 class Switch extends PureComponent { _checkboxElement: HTMLInputElement; - _thumbElement = null; + _thumbElement: View; static displayName = 'Switch'; diff --git a/src/components/View/index.js b/src/components/View/index.js index f3301ef7..02aa0720 100644 --- a/src/components/View/index.js +++ b/src/components/View/index.js @@ -70,7 +70,9 @@ class View extends Component { otherProps.style.unshift(styles.hasHitSlop); } + // avoid HTML validation errors const component = isInAButtonView ? 'span' : 'div'; + return createDOMElement(component, otherProps); } } @@ -95,7 +97,7 @@ const styles = StyleSheet.create({ inline: { display: 'inline-flex' }, - // this zIndex ordering positions the hitSlop above the View but behind + // this zIndex-ordering positions the hitSlop above the View but behind // its children hasHitSlop: { zIndex: 0