universal-tooltip
v1.1.0
Published
react native universal tooltip component.
Downloads
6,723
Maintainers
Readme
Works on all platforms, Example project here.
| 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
.
🤖️ On Android:
- This component is written in Kotlin and wraps the excellent library -
Balloon
.
🌐 On Web:
This component wraps
@radix-ui/react-popover
for mobile use.This component wraps
@radix-ui/react-tooltip
for desktop use.
Please note that the @radix-ui/react-tooltip component from Radix only works on desktop, as per this thread.
Usage
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);
<Tooltip.Root
// For web, I would like to be triggered automatically with the mouse.
{...Platform.select({
web: {},
default: {
open,
onDismiss: () => {
console.log("onDismiss");
setOpen(false);
},
},
})}
>
<Tooltip.Trigger>
<TriggerView
{...Platform.select({
web: {},
default: {
open,
onPress: () => {
setOpen(true);
},
},
})}
>
<Text>Hello!👋</Text>
</TriggerView>
</Tooltip.Trigger>
<Tooltip.Content
sideOffset={3}
containerStyle={{
paddingLeft: 16,
paddingRight: 16,
paddingTop: 8,
paddingBottom: 8,
}}
onTap={() => {
setOpen(false);
console.log("onTap");
}}
dismissDuration={500}
disableTapToDismiss
side="right"
presetAnimation="fadeIn"
backgroundColor="black"
borderRadius={12}
>
<Tooltip.Text text="Some copy..." style={{ color: "#000", fontSize: 16 }} />
</Tooltip.Content>
</Tooltip.Root>;
API
This component's API basically same as the @radix-ui/react-tooltip
component, but there are some differences on native.
Installation
yarn add universal-tooltip
Expo
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. An example configuration might look like this:
[
"expo-build-properties",
{
"android": {
"compileSdkVersion": 32,
"targetSdkVersion": 32,
"minSdkVersion": 23,
"buildToolsVersion": "32.0.0",
"kotlinVersion": "1.6.10"
},
"ios": {
"deploymentTarget": "13.0"
}
}
]
License
MIT