This is a pure and simple tooltip component and support fadeIn and zoomIn preset animations
🍎 On iOS:
- using Swift and forked from
EasyTipView.
🤖️ On Android:
- using Kotlin and warp a great lib -
Balloon.
🌐 On Web:
-
warp
@radix-ui/react-popoveron mobile. -
warp
@radix-ui/react-tooltipon desktop.
Why should I differentiate between mobile and desktop?
because Radix tooltip is only work on desktop and it's by design, you can check this thread.
- support custom view on Android.
- support more props if anyone want it.
import { useState } from "react";
import * as Tooltip from "universal-tooltip";
import { Text, View, Pressable, Platform } from "react-native";
const TriggerView = Platform.OS === "web" ? View : Pressable;
// this is because each platform has different behavior, ofc you can replace components yourself.
const [open, setOpen] = useState(false);
<Tooltip.Root<
8000
/span>
// on web: I want 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"
textSize={16}
backgroundColor="black"
fontWeight="bold"
borderRadius={12}
textColor="#fff"
text="Some copy..."
/>
</Tooltip.Root>;yarn add universal-tooltipexpo install universal-tooltip expo-build-propertiesAdd the expo-build-properties plugin to your app.json/app.config.js, and make sure your compileSdkVersion >= 32 because Ballon lib require this.
just like this:
[
"expo-build-properties",
{
"android": {
"compileSdkVersion": 32,
"targetSdkVersion": 32,
"minSdkVersion": 23,
"buildToolsVersion": "32.0.0",
"kotlinVersion": "1.6.10"
},
"ios": {
"deploymentTarget": "13.0"
}
}
]...
and more docs will coming...