react-native-balloon

An UI component to draw balloons.

Install

npm install react-native-balloon

Usage

import Balloon from "react-native-balloon";


<Balloon
  borderColor="#2E86C1"
  backgroundColor="#D6EAF8"
  borderWidth={2}
  borderRadius={20}
  triangleSize={15}
  onPress={() => console.log("press")}
>
  <Text>Hello world</Text>
</Balloon>

Properties

| Prop | Default | Type | Description | |---|---|---| ---| |width| 300 | number|width of balloon| |height| none | number|height of balloon| |borderColor| #CCC | string|color of border| |borderWidth| 1 | number|width of border| |borderRadius| 10 | number|radius of border| |backgroundColor| #FFF | string|color of background| |triangleOffset| 30% | string|specify the offset of triangle position from top or left as percentage. | |triangleDirection| left | string|specify the triangle direction from top/bottom/left/right. | |triangleSize| 10 | number|specify the size of triangle| |containerStyle| none | object|specify the style of balloon container. | |onPress| none | function|triggered on press balloon.| |onLongPress| none | function|triggered on long press balloon.|

License

MIT License.