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

UIW for React Native

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function Cloud(props) {
    const { title, isDown, isStart, triangle, backgroundColor, borderRadius } = props;
    const style = {
        flexDirection: isDown ? 'column-reverse' : 'column',
        alignItems: isStart,
    };
    const TextContainerStyle = {
        position: triangle ? 'absolute' : 'relative',
        marginVertical: triangle ? 10 : 0,
        backgroundColor,
        borderRadius,
        paddingHorizontal: 10,
        paddingVertical: 10,
    };
    return (<View style={[style]}>
      <View style={[
            styles.cloudFoot,
            {
                transform: [{ rotateX: isDown ? '180deg' : '0deg' }],
                position: triangle ? 'absolute' : 'relative',
                left: triangle,
                zIndex: 9999,
                borderBottomColor: backgroundColor,
            },
        ]}/>
      <View testID="RNE__Tooltip__cloud__view" style={[{ ...TextContainerStyle }]}>
        <Text style={[styles.cloudText]}>{title}</Text>
      </View>
    </View>);
}
const styles = StyleSheet.create({
    cloudFoot: {
        width: 0,
        height: 0,
        marginLeft: 10,
        marginRight: 10,
        borderTopWidth: 0,
        borderTopColor: 'transparent',
        borderRightWidth: 8,
        borderRightColor: 'transparent',
        borderLeftWidth: 8,
        borderLeftColor: 'transparent',
        borderBottomWidth: 12,
        borderBottomColor: '#000',
    },
    cloudText: {
        color: '#fff',
    },
});