@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'
  }
});