diff --git a/src/tooltip.d.ts b/src/tooltip.d.ts index 5a7ef59..593a0e9 100644 --- a/src/tooltip.d.ts +++ b/src/tooltip.d.ts @@ -46,7 +46,7 @@ declare module 'react-native-walkthrough-tooltip' { childrenWrapperStyle?: StyleProp; // Styles the view element that wraps the original children - parentWrapperStyle?: StyleProp + parentWrapperStyle?: StyleProp; } export interface TooltipProps extends Partial { @@ -129,6 +129,11 @@ declare module 'react-native-walkthrough-tooltip' { /** Will use given component instead of default react-native Modal component **/ modalComponent?: object; + + /** + *Set this to true to use translucent status bar (cover enire screen on android) + */ + statusBarTranslucent?: boolean; } /** diff --git a/src/tooltip.js b/src/tooltip.js index db612fd..bce6939 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -32,10 +32,10 @@ const DEFAULT_DISPLAY_INSETS = { right: 24, }; -const computeDisplayInsets = insetsFromProps => +const computeDisplayInsets = (insetsFromProps) => Object.assign({}, DEFAULT_DISPLAY_INSETS, insetsFromProps); -const invertPlacement = placement => { +const invertPlacement = (placement) => { switch (placement) { case 'top': return 'bottom'; @@ -75,6 +75,8 @@ class Tooltip extends Component { useReactNativeModal: true, topAdjustment: 0, accessible: true, + statusBarTranslucent: false, + animationType: 'fade', }; static propTypes = { @@ -105,6 +107,8 @@ class Tooltip extends Component { useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, accessible: PropTypes.bool, + statusBarTranslucent: PropTypes.bool, + animationType: PropTypes.oneOf(['none', 'fade', 'slide']), }; constructor(props) { @@ -208,7 +212,7 @@ class Tooltip extends Component { return null; } - updateWindowDims = dims => { + updateWindowDims = (dims) => { this.setState( { windowDims: dims.window, @@ -237,7 +241,7 @@ class Tooltip extends Component { ); }; - measureContent = e => { + measureContent = (e) => { const { width, height } = e.nativeEvent.layout; const contentSize = new Size(width, height); this.setState({ contentSize }, () => { @@ -245,7 +249,7 @@ class Tooltip extends Component { }); }; - onChildMeasurementComplete = rect => { + onChildMeasurementComplete = (rect) => { this.setState( { childRect: rect, @@ -272,7 +276,7 @@ class Tooltip extends Component { (x, y, width, height, pageX, pageY) => { const childRect = new Rect(pageX, pageY, width, height); if ( - Object.values(childRect).every(value => value !== undefined) + Object.values(childRect).every((value) => value !== undefined) ) { this.onChildMeasurementComplete(childRect); } else { @@ -300,13 +304,8 @@ class Tooltip extends Component { computeGeometry = () => { const { arrowSize, childContentSpacing } = this.props; - const { - childRect, - contentSize, - displayInsets, - placement, - windowDims, - } = this.state; + const { childRect, contentSize, displayInsets, placement, windowDims } = + this.state; const options = { displayInsets, @@ -446,6 +445,8 @@ class Tooltip extends Component { isVisible, useReactNativeModal, modalComponent, + statusBarTranslucent, + animationType, } = this.props; const hasChildren = React.Children.count(children) > 0; @@ -456,10 +457,12 @@ class Tooltip extends Component { {useReactNativeModal ? ( {this.renderContentForTooltip()}