🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-native-walkthrough-tooltip

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

to
1.1.10

2

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",

# 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 |

@@ -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,

@@ -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;

@@ -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>