🐛 Fixed warning: 'View has a shadow set but cannot calculate shad…

README.md

@@ -72,6 +72,7 @@ The tooltip wraps an element _in place_ in your React Native rendering. When it
 | closeOnContentInteraction | bool | true | this prop determines if `onClose` should be called when the user interacts with the content element. Default is true (usually means the tooltip will dismiss once the user touches the content element) |
 | content          | function/Element | `<View />`                             | This is the view displayed in the tooltip popover bubble                                                                                                                                                       |
 | 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                                                                                                                                                                                |                                                            |
 | onClose          | function         | null                                   | Callback fired when the user taps the tooltip background overlay                                                                                                                                               |
 | placement        | string           | "top" \| "center"                                  | Where to position the tooltip - options: `top, bottom, left, right, center`. Default is `top` for tooltips rendered with children Default is `center` for tooltips rendered without children. <br><br>NOTE: `center` is only available with a childless placement, and the content will be centered within the bounds defined by the `displayInsets`. |

src/styles.js

@@ -16,6 +16,8 @@ const styles = StyleSheet.create({
   tooltip: {
     backgroundColor: 'transparent',
     position: 'absolute',
+  },
+  shadow: {
     shadowColor: 'black',
     shadowOffset: { width: 0, height: 2 },
     shadowRadius: 2,
@@ -179,12 +181,15 @@ const styleGenerator = styleGeneratorProps => {
           styles.containerVisible,
         topAdjustment !== 0 && {
           top: topAdjustment,
-        }
-      )
+        },
+      ),
     ],
     contentStyle,
     tooltipStyle: [
-      styles.tooltip,
+      StyleSheet.compose(
+        styles.tooltip,
+        ownProps.disableShadow ? {} : styles.shadow,
+      ),
       tooltipPlacementStyles(styleGeneratorProps),
       ownProps.tooltipStyle,
     ],

src/tooltip.d.ts

@@ -65,6 +65,10 @@ declare module 'react-native-walkthrough-tooltip' {
     // The number of pixels to inset the tooltip on the screen
     displayInsets?: TooltipDisplayInsets;
 
+    // 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
     isVisible?: boolean;
 

src/tooltip.js

@@ -61,6 +61,7 @@ class Tooltip extends Component {
     closeOnContentInteraction: true,
     content: <View />,
     displayInsets: {},
+    disableShadow: false,
     isVisible: false,
     onClose: () => {
       console.warn(
@@ -73,7 +74,7 @@ class Tooltip extends Component {
     useInteractionManager: false,
     useReactNativeModal: true,
     topAdjustment: 0,
-    accessible: true
+    accessible: true,
   };
 
   static propTypes = {
@@ -94,6 +95,7 @@ class Tooltip extends Component {
       left: PropTypes.number,
       right: PropTypes.number,
     }),
+    disableShadow: PropTypes.bool,
     isVisible: PropTypes.bool,
     onClose: PropTypes.func,
     placement: PropTypes.oneOf(['top', 'left', 'bottom', 'right', 'center']),
@@ -386,7 +388,10 @@ class Tooltip extends Component {
     };
 
     return (
-      <TouchableWithoutFeedback onPress={this.props.onClose} accessible={this.props.accessible}>
+      <TouchableWithoutFeedback
+        onPress={this.props.onClose}
+        accessible={this.props.accessible}
+      >
         <View style={generatedStyles.containerStyle}>
           <View style={[generatedStyles.backgroundStyle]}>
             <View style={generatedStyles.tooltipStyle}>
@@ -395,7 +400,10 @@ class Tooltip extends Component {
                 onLayout={this.measureContent}
                 style={generatedStyles.contentStyle}
               >
-                <TouchableWithoutFeedback onPress={onPressContent} accessible={this.props.accessible}>
+                <TouchableWithoutFeedback
+                  onPress={onPressContent}
+                  accessible={this.props.accessible}
+                >
                   {this.props.content}
                 </TouchableWithoutFeedback>
               </View>