react-native-walkthrough-tooltip - npm Package Compare versions

Comparing version 1.1.9 to 1.1.10

package.json

 {
   "name": "react-native-walkthrough-tooltip",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "An inline wrapper for calling out React Native components via tooltip",
@@ -5,0 +5,0 @@ "main": "src/tooltip.js",

README.md

 # React Native Walkthrough Tooltip [![npm](https://img.shields.io/npm/v/react-native-walkthrough-tooltip.svg)](https://www.npmjs.com/package/react-native-walkthrough-tooltip) [![npm](https://img.shields.io/npm/dm/react-native-walkthrough-tooltip.svg)](https://www.npmjs.com/package/react-native-walkthrough-tooltip)
 
-
-## Tooltip
-
 React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps.\
 When not visible, the wrapped element is displayed normally.
 
-> 🎉 Now available 🎉 [`react-native-walkthrough`](https://github.com/jasongaare/react-native-walkthrough): a lightweight walkthrough library for React Native using react-native-walkthrough-tooltip
+*Used by* [`react-native-walkthrough`](https://github.com/jasongaare/react-native-walkthrough): a lightweight walkthrough library for React Native using react-native-walkthrough-tooltip
 
-## Breaking Changes in Version 1.0
+### Table of Contents
 
+  - [Installation](#installation)
+  - [Sponsorship](#sponsorship)
+  - [Breaking Changes in Version 1.0](#breaking-changes-in-version-10)
+  - [Example Usage](#example-usage)
+  - [Screenshot](#screenshot)
+  - [How it works](#how-it-works)
+  - [Props](#props)
+  - [Style Props](#style-props)
+  - [Class definitions for props](#class-definitions-for-props)
+  - [TooltipChildrenContext](#tooltipchildrencontext)
+
+### Installation
+
+```
+yarn add react-native-walkthrough-tooltip
+```
+
+### Sponsorship
+
+<a href="https://tracking.gitads.io/?repo=react-native-walkthrough-tooltip">
+ <img src="https://images.gitads.io/react-native-walkthrough-tooltip" alt="GitAds"/>
+</a>
+
+> `react-native-walkthrough-tooltip` is sponsored by the above tool, help us out by checking it out and signing up for a free trial
+
+### Breaking Changes in Version 1.0
+
 For Version 1.0, the library was refactored and simplified. 
@@ -28,10 +52,2 @@
 
- 
-
-### Installation
-
-```
-yarn add react-native-walkthrough-tooltip
-```
-
 ### Example Usage
@@ -76,2 +92,3 @@
 | displayInsets | object | { top: 24, bottom: 24, left: 24, right: 24 } | The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your `content` accordingly |
+| disableShadow | bool | false | When true, tooltips will not appear elevated. Disabling shadows will remove the warning: `RCTView has a shadow set but cannot calculate shadow efficiently` on IOS devices. |
 | isVisible        | bool             | false                                  | When true, tooltip is displayed                                                                                                                                                                                |                                                            |
@@ -78,0 +95,0 @@ | onClose          | function         | null                                   | Callback fired when the user taps the tooltip background overlay                                                                                                                                               |

src/styles.js

@@ -19,2 +19,4 @@ import { StyleSheet } from 'react-native';
     position: 'absolute',
+  },
+  shadow: {
     shadowColor: 'black',
@@ -183,8 +185,11 @@ shadowOffset: { width: 0, height: 2 },
           top: topAdjustment,
-        }
-      )
+        },
+      ),
     ],
     contentStyle,
     tooltipStyle: [
-      styles.tooltip,
+      StyleSheet.compose(
+        styles.tooltip,
+        ownProps.disableShadow ? {} : styles.shadow,
+      ),
       tooltipPlacementStyles(styleGeneratorProps),
@@ -191,0 +196,0 @@ ownProps.tooltipStyle,

src/tooltip.d.ts

@@ -68,2 +68,6 @@ // Type definitions for react-native-walkthrough-tooltip 1.0.0
 
+    // When true, tooltip shadow aren't displayed
+    // Fix: https://github.com/jasongaare/react-native-walkthrough-tooltip/issues/81
+    disableShadow?: boolean;
+
     // When true, tooltip is displayed
@@ -70,0 +74,0 @@ isVisible?: boolean;

src/tooltip.js

@@ -64,2 +64,3 @@ import React, { Component } from 'react';
     displayInsets: {},
+    disableShadow: false,
     isVisible: false,
@@ -77,3 +78,3 @@ onClose: () => {
     topAdjustment: 0,
-    accessible: true
+    accessible: true,
   };
@@ -99,2 +100,3 @@
     }),
+    disableShadow: PropTypes.bool,
     isVisible: PropTypes.bool,
@@ -392,3 +394,6 @@ onClose: PropTypes.func,
     return (
-      <TouchableWithoutFeedback onPress={this.props.onClose} accessible={this.props.accessible}>
+      <TouchableWithoutFeedback
+        onPress={this.props.onClose}
+        accessible={this.props.accessible}
+      >
         <View style={generatedStyles.containerStyle}>
@@ -402,3 +407,6 @@ <View style={[generatedStyles.backgroundStyle]}>
               >
-                <TouchableWithoutFeedback onPress={onPressContent} accessible={this.props.accessible}>
+                <TouchableWithoutFeedback
+                  onPress={onPressContent}
+                  accessible={this.props.accessible}
+                >
                   {this.props.content}
@@ -405,0 +413,0 @@ </TouchableWithoutFeedback>

No alert changes

Improved metrics

Total package byte prevSize

47406

2.9%

Lines of code

1065

1.53%

Number of lines in readme file

134

14.53%

No dependency changes