rn-simple-balloon

Install

from yarn

yarn add rn-simple-balloon

from npm

npm i rn-simple-balloon

Usage

import RNBalloon, { Balloon } from 'rn-simple-balloon'

export const archivesTabBalloon = createRef<Balloon>() //export it if you want to open/close it in other component

...

<RNBalloon //put this inside an element you want to show the balloon
    position={'top'}
    ref={archivesTabBalloon}
    autoHide
    duration={3000}
    styles={{
      padding: 8,
      borderRadius: 4
    }}>
      <Image source={Images.heart} style={{ width: 20, height: 20 }} />
      <Text style={{ textAlign: 'center' }}>Tuan Chan with love :3</Text>
</RNBalloon>

...

import { balloonRef } from '../RootContainer'

 <TouchableOpacity
    ...
    onPress={() => {
    archivesTabBalloon?.current?.open()
    }}
    ...
  />

Properties

| Prop | Default | Type | Description | | --------------- | ------- | ---------- | ---------------------------------------------------------- | | styles | none | object | Specify the style of balloon container | | position | "top" | string | Position of the balloon ("top", "bottom", "left", "right") | | onOpen | none | function | Callback function called when the balloon opened | | onDismiss | none | function | Callback function called when the balloon closed | | duration | 1000 | number | The balloon's open time |

License

MIT License.