fix hint animation (#1363)

* fix hint animation

* fix android error

* Fix android tapping issue + remove hint on animation done

* typing

* lint

* Fix iOS behaviour

* typing

* Fix removal after animation timing

* removed log

* Using now a single toggle to remove Hint component when hidden

Author: mendyEdri

generatedTypes/components/hint/index.d.ts

@@ -107,6 +107,7 @@ export interface HintProps {
 interface HintState {
     targetLayout?: HintTargetFrame;
     targetLayoutInWindow?: HintTargetFrame;
+    animationEnded: boolean;
 }
 /**
  * @description: Hint component for displaying a tooltip over wrapped component
@@ -122,12 +123,16 @@ declare class Hint extends Component<HintProps, HintState> {
     static positions: typeof HintPositions;
     targetRef: ElementRef<typeof RNView> | null;
     hintRef: ElementRef<typeof RNView> | null;
+    animationDuration: number;
     state: {
         targetLayoutInWindow: undefined;
         targetLayout: HintTargetFrame | undefined;
+        animationEnded: boolean;
     };
     visibleAnimated: Animated.Value;
     componentDidUpdate(prevProps: HintProps): void;
+    animateHint: () => void;
+    toggleAnimationEndedToRemoveHint: () => void;
     focusAccessibilityOnHint: () => void;
     setTargetRef: (ref: ElementRef<typeof RNView>) => void;
     setHintRef: (ref: ElementRef<typeof RNView>) => void;

src/components/hint/index.tsx

@@ -146,6 +146,7 @@ export interface HintProps {
 interface HintState {
   targetLayout?: HintTargetFrame;
   targetLayoutInWindow?: HintTargetFrame;
+  hintUnmounted: boolean;
 }
 
 /**
@@ -165,24 +166,34 @@ class Hint extends Component<HintProps, HintState> {
 
   targetRef: ElementRef<typeof RNView> | null = null;
   hintRef: ElementRef<typeof RNView> | null = null;
+  animationDuration = 170;
 
   state = {
     targetLayoutInWindow: undefined,
-    targetLayout: this.props.targetFrame
+    targetLayout: this.props.targetFrame,
+    hintUnmounted: false
   };
 
   visibleAnimated = new Animated.Value(Number(!!this.props.visible));
 
   componentDidUpdate(prevProps: HintProps) {
     if (prevProps.visible !== this.props.visible) {
-      Animated.timing(this.visibleAnimated, {
-        toValue: Number(!!this.props.visible),
-        duration: 170,
-        useNativeDriver: true
-      }).start();
+      this.animateHint();
     }
   }
 
+  animateHint = () => {
+    Animated.timing(this.visibleAnimated, {
+      toValue: Number(!!this.props.visible),
+      duration: this.animationDuration,
+      useNativeDriver: true
+    }).start(this.toggleAnimationEndedToRemoveHint);
+  };
+
+  toggleAnimationEndedToRemoveHint = () => {
+    this.setState({hintUnmounted: !this.props.visible});
+  };
+
   focusAccessibilityOnHint = () => {
     const {message} = this.props;
     const targetRefTag = findNodeHandle(this.targetRef);
@@ -444,13 +455,10 @@ class Hint extends Component<HintProps, HintState> {
   renderHint() {
     const {onPress, testID} = this.props;
     const opacity = onPress ? 0.9 : 1.0;
-    const Container = onPress ? TouchableOpacity : View;
-    
+
     if (this.showHint) {
       return (
-        <Container
-          activeOpacity={opacity}
-          onPress={onPress}
+        <View
           animated
           style={[
             {width: this.containerWidth},
@@ -462,19 +470,23 @@ class Hint extends Component<HintProps, HintState> {
           pointerEvents="box-none"
           testID={testID}
         >
+          <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
+            {this.renderContent()}
+          </TouchableOpacity>
           {this.renderHintTip()}
-          {this.renderContent()}
-        </Container>
+        </View>
       );
     }
   }
 
   renderHintContainer() {
-    const {style, testID, ...others} = this.props;
+    const {style, ...others} = this.props;
     return (
       <View
         {...others}
-        testID={`${testID}.container`}
+        // this view must be collapsable, don't pass testID or backgroundColor etc'. 
+        collapsable
+        testID={undefined}
         style={[styles.container, style, this.getContainerPosition()]}
       >
         {this.renderHint()}
@@ -496,9 +508,8 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   render() {
-    const {visible, onBackgroundPress, testID} = this.props;
-
-    if (!visible) {
+    const {onBackgroundPress, testID} = this.props;
+    if (!this.props.visible && this.state.hintUnmounted) {
       return this.props.children;
     }