https://github.com/alantoa/universal-tooltip

A universal Tooltip component for React Native and Web, powered by expo-modules.
https://github.com/alantoa/universal-tooltip

expo-modules react-native react-native-tooltip

Last synced: about 1 month ago
JSON representation

A universal Tooltip component for React Native and Web, powered by expo-modules.

• Host: GitHub
• URL: https://github.com/alantoa/universal-tooltip
• Owner: alantoa
• Created: 2022-12-22T12:32:18.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-09T09:34:01.000Z (4 months ago)
• Last Synced: 2024-07-24T11:14:46.758Z (about 2 months ago)
• Topics: expo-modules, react-native, react-native-tooltip
• Language: TypeScript
• Homepage:
• Size: 5.7 MB
• Stars: 155
• Watchers: 2
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-universal-react - Universal Tooltip - Cross-platform Tooltip component for React Native, powered by Expo Modules (Libraries / UI Components)

README

        


 

  

[![npm](https://img.shields.io/npm/l/universal-tooltip?style=flat-square)](https://www.npmjs.com/package/universal-tooltip) [![expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)



###### Works on all platforms, Example project [here](https://github.com/alantoa/universal-tooltip/tree/main/example).

| iOS | Android | Web |

| - | - | - |

|  |  |  |

 

## What

This is a pure and simple native tooltip component that supports fadeIn and zoomIn preset animations.

🍎 On iOS:

- This component is written in Swift and wraps [`Popovers`](https://github.com/aheze/Popovers).

🤖️ On Android:

- This component is written in Kotlin and wraps the excellent library - [`Balloon`](https://github.com/skydoves/Balloon).

🌐 On Web:

- This component wraps [`@radix-ui/react-popover`](https://www.radix-ui.com/docs/primitives/components/popover) for mobile use.

- This component wraps [`@radix-ui/react-tooltip`](https://www.radix-ui.com/docs/primitives/components/popover) for desktop use.

> Please note that the @radix-ui/react-tooltip component from Radix only works on desktop, as per [this thread](https://github.com/radix-ui/primitives/issues/955#issuecomment-960610209).

## Usage

```tsx

import { useState } from "react";

import * as Tooltip from "universal-tooltip";

import { Text, View, Pressable, Platform } from "react-native";

// because each platform has different behaviors, but you can replace the components yourself, of course.

const TriggerView = Platform.OS === "web" ? View : Pressable;

const [open, setOpen] = useState(false);

 {

        console.log("onDismiss");

        setOpen(false);

      },

    },

  })}

>

  

     {

            setOpen(true);

          },

        },

      })}

    >

      Hello!👋

    

  

   {

      setOpen(false);

      console.log("onTap");

    }}

    dismissDuration={500}

    disableTapToDismiss

    side="right"

    presetAnimation="fadeIn"

    backgroundColor="black"

    borderRadius={12}

  >

    

  

;

```

## API

This component's API basically same as the [`@radix-ui/react-tooltip`](https://www.radix-ui.com/docs/primitives/components/popover) component, but there are some differences on native.

## Installation

```sh

yarn add universal-tooltip

```

### Expo

```sh

expo install universal-tooltip expo-build-properties

```

To use this component, you need to add the expo-build-properties plugin to your app.json or app.config.js and ensure that your compileSdkVersion >= 32 as required by the [Ballon lib](https://github.com/skydoves/Balloon). An example configuration might look like this:

```json

[

  "expo-build-properties",

  {

    "android": {

      "compileSdkVersion": 32,

      "targetSdkVersion": 32,

      "minSdkVersion": 23,

      "buildToolsVersion": "32.0.0",

      "kotlinVersion": "1.6.10"

    },

    "ios": {

      "deploymentTarget": "13.0"

    }

  }

]

```

## License

MIT