diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js
--- a/native/tooltip/nux-tips-overlay.react.js
+++ b/native/tooltip/nux-tips-overlay.react.js
@@ -92,6 +92,7 @@
   +tipVerticalBelow: Node,
   +tipHorizontal: Node,
   +tipScale: Node,
+  +tipContainerStyle: AnimatedViewStyle,
 };
 
 const tipHeight: number = 30;
@@ -126,46 +127,6 @@
       );
     }
 
-    get tipContainerStyle(): AnimatedViewStyle {
-      const {
-        dimensions,
-        route,
-        tipContainerOpacity,
-        tipVerticalBelow,
-        tipHorizontal,
-        tipScale,
-      } = this.props;
-      const { initialCoordinates, verticalBounds } = route.params;
-      const { x, y, width, height } = initialCoordinates;
-
-      const style: WritableAnimatedStyleObj = {};
-      style.position = 'absolute';
-      style.alignItems = 'center';
-      style.opacity = tipContainerOpacity;
-
-      const transform: Array<ReanimatedTransform> = [];
-
-      transform.push({ translateX: tipHorizontal });
-
-      const extraLeftSpace = x;
-      const extraRightSpace = dimensions.width - width - x;
-      if (extraLeftSpace < extraRightSpace) {
-        style.left = 0;
-        style.minWidth = width + 2 * extraLeftSpace;
-      } else {
-        style.right = 0;
-        style.minWidth = width + 2 * extraRightSpace;
-      }
-
-      style.top =
-        Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
-      transform.push({ translateY: tipVerticalBelow });
-      transform.push({ scale: tipScale });
-      style.transform = transform;
-
-      return style;
-    }
-
     render(): React.Node {
       const {
         dimensions,
@@ -181,6 +142,7 @@
         tipVerticalBelow,
         tipHorizontal,
         tipScale,
+        tipContainerStyle,
         ...navAndRouteForFlow
       } = this.props;
 
@@ -213,7 +175,7 @@
 
       tip = (
         <AnimatedView
-          style={this.tipContainerStyle}
+          style={tipContainerStyle}
           onLayout={this.props.onTipContainerLayout}
         >
           {triangleUp}
@@ -342,6 +304,46 @@
       [position],
     );
 
+    const tipContainerStyle = React.useMemo(() => {
+      const { route } = props;
+      const { initialCoordinates, verticalBounds } = route.params;
+      const { x, y, width, height } = initialCoordinates;
+
+      const style: WritableAnimatedStyleObj = {};
+      style.position = 'absolute';
+      style.alignItems = 'center';
+      style.opacity = tipContainerOpacity;
+
+      const transform: Array<ReanimatedTransform> = [];
+
+      transform.push({ translateX: tipHorizontal });
+
+      const extraLeftSpace = x;
+      const extraRightSpace = dimensions.width - width - x;
+      if (extraLeftSpace < extraRightSpace) {
+        style.left = 0;
+        style.minWidth = width + 2 * extraLeftSpace;
+      } else {
+        style.right = 0;
+        style.minWidth = width + 2 * extraRightSpace;
+      }
+
+      style.top =
+        Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
+      transform.push({ translateY: tipVerticalBelow });
+      transform.push({ scale: tipScale });
+      style.transform = transform;
+
+      return style;
+    }, [
+      dimensions.width,
+      props,
+      tipContainerOpacity,
+      tipHorizontal,
+      tipScale,
+      tipVerticalBelow,
+    ]);
+
     return (
       <NUXTipsOverlay
         {...props}
@@ -358,6 +360,7 @@
         tipVerticalBelow={tipVerticalBelow}
         tipHorizontal={tipHorizontal}
         tipScale={tipScale}
+        tipContainerStyle={tipContainerStyle}
       />
     );
   }