@uiw/react-native/lib/Tooltip/index.js

UIW for React Native

import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, TouchableOpacity, Modal, Pressable, Animated } from 'react-native';
import Cloud from './Cloud';
import { getLocation, xLocation } from './utils';
export default function Tooltip(props) {
    const { width = 100, height = 20, children, title, toggleAction = 'onPress', backgroundColor = '#000000', borderRadius = 10, fadeAnim = [new Animated.Value(0), new Animated.Value(0)], refCloud = React.createRef(), triangle = 0, isStart = 'flex-start', isDown = false, ...other } = props;
    const refFollow = useRef();
    const [state, setState] = useState({
        modalVisible: false,
        cloudStyle: {
            left: 0,
            top: 0,
        },
        followStyle: {
            width,
            height,
        },
        modalViewStyle: {},
    });
    useEffect(() => {
        Animated.stagger(50, fadeAnim.map((item, index) => Animated.timing(item, {
            toValue: index === 0 ? 0.6 : 1,
            duration: 300,
            useNativeDriver: true,
        }))).start(({ finished }) => {
            props.onOpen && props.onOpen();
        });
    }, [props.onOpen]);
    const onOpen = () => {
        const { fadeAnim } = props;
        setState({ modalVisible: true });
        refFollow.current &&
            refFollow.current.measure((_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) => {
                refCloud.current &&
                    refCloud.current.measure((_X, _Y, _W, _H, _PX, _PY) => {
                        const cloudStyle = getLocation(_width, _height, pageOffsetX, pageOffsetY, _W, _H);
                        let isDown = cloudStyle.isDown;
                        let isStart = cloudStyle.isStart;
                        let triangle = cloudStyle.triangle;
                        setState({
                            modalViewStyle: {
                                width: _width,
                                height: _height,
                                position: 'absolute',
                                zIndex: 9999,
                                left: pageOffsetX,
                                top: pageOffsetY,
                            },
                            cloudStyle: cloudStyle.style,
                        });
                    });
            });
    };
    const onClose = () => {
        Animated.stagger(50, fadeAnim
            .map((item, index) => Animated.timing(item, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true,
        }))
            .reverse()).start(({ finished }) => {
            props.onClose && props.onClose();
        });
        setState({ ...state, modalVisible: false });
    };
    return (<View>
      <Modal testID="RNE__Tooltip__wrap" animationType="fade" // slide  none  fade
     transparent={true} visible={state.modalVisible} {...other}>
        <TouchableOpacity activeOpacity={1} style={styles.position} onPress={onClose}>
          <Animated.View style={[
            styles.position,
            styles.backdrop,
            {
                opacity: fadeAnim[0],
            },
        ]}></Animated.View>
        </TouchableOpacity>
        <View style={[styles.followView, { ...state.modalViewStyle }]}>{children}</View>
        <Animated.View style={[
            styles.containerView,
            {
                opacity: fadeAnim[1],
            },
        ]}>
          <View style={[styles.containerView, { ...state.cloudStyle }]} ref={refCloud}>
            <Cloud title={title} isDown={isDown} isStart={isStart} triangle={triangle} backgroundColor={backgroundColor} borderRadius={borderRadius}/>
          </View>
        </Animated.View>
      </Modal>

      <Pressable testID="RNE__Tooltip__pressable" {...{ [toggleAction]: onOpen }} delayLongPress={250}>
        <View style={[styles.followView, { ...state.followStyle }]} ref={refFollow}>
          {children}
        </View>
      </Pressable>
    </View>);
}
Tooltip.defaultProps = {
    fadeAnim: [new Animated.Value(0), new Animated.Value(0)],
    refFollow: React.createRef(),
    refCloud: React.createRef(),
    isDown: false, // 三角 上下
    isStart: xLocation.start, // 三角 左 中 右
    triangle: 0, // 三角 位置
};
const styles = StyleSheet.create({
    position: {
        position: 'absolute',
        backgroundColor: 'transparent',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9998,
    },
    backdrop: {
        backgroundColor: '#fff',
    },
    containerView: {
        position: 'absolute',
        zIndex: 9999,
    },
    followView: {
        overflow: 'hidden',
    },
});