Description:
expo-ios-popover-tip is a component for React Native that integrates native SwiftUI popover tooltips into your iOS applications. It uses Expo Modules to deliver high-performance, native rendering and animations directly from SwiftUI’s TipKit framework. This allows you to create tooltips that look and feel native to the iOS platform.
This component is useful for building user onboarding flows, highlighting new or hidden functionalities, or providing contextual information for specific UI elements. The tooltips are interactive, supporting actions and custom dismiss handlers. You can also nest other React Native components inside the popover trigger for flexible integration within your existing views.
Features
- 🍎 Renders completely native tooltips and animations using SwiftUI.
- 💬 Creates actionable tooltips with one or more buttons.
- 🧊 Achieves a seamless glass morphism effect with native blur.
- 🔁 Handles custom dismiss and tap events to build interactive user interfaces.
- 🧩 Nests any React Native component as the trigger for the popover tip.
- ⚡️ Delivers high performance by using the Expo Modules Core.
Preview
How to Use It
1. Add the package to your project using the Expo installer.
npx expo install expo-ios-popover-tip2. Navigate to your ios directory and install the necessary Pods. This library requires Expo SDK 53 or newer and a native iOS build.
cd ios && pod install3. Initialize the TipKit framework when your app starts. This involves resetting any previously shown tips from prior sessions and then configuring them for the current session. This setup only needs to run once per application launch, so your root App component is a good place for it.
import React from "react";
import { View } from "react-native";
import { resetTips, configureTips } from "expo-ios-popover-tip";
export default function App() {
const [isReady, setIsReady] = React.useState(false);
React.useEffect(() => {
const setupTips = async () => {
await resetTips();
await configureTips();
// A small delay gives the native system time to register the tips.
setTimeout(() => setIsReady(true), 500);
};
setupTips();
}, []);
if (!isReady) {
return null; // Or a loading indicator
}
return (
// Your main app content
);
}4. To display a tooltip, wrap your trigger component with ToolTipPopoverView. You configure the content and behavior of the tooltip through the tooltip prop. You can also listen for user interactions with the onActionPress and onTipDismiss callbacks.
import React from "react";
import { Text, View, StyleSheet } from "react-native";
import { ToolTipPopoverView, ToolTip } from "expo-ios-popover-tip";
const simpleTip: ToolTip = {
id: "simple_tip_1",
title: { text: "Profile Photo" },
description: { text: "Tap here to update your profile picture." },
actions: [{ id: "update_photo", title: "Update" }],
};
export default function MyComponent() {
return (
<View style={styles.container}>
<ToolTipPopoverView
tooltip={simpleTip}
onActionPress={(action) => console.log(`Action: ${action.actionId}`)}
onTipDismiss={(tip) => console.log(`Dismissed: ${tip.tipId}`)}
>
<Text style={styles.triggerText}>Show Profile Tip</Text>
</ToolTipPopoverView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
triggerText: {
padding: 15,
fontSize: 18,
backgroundColor: '#f0f0f0',
borderRadius: 8,
}
});5. For creating a sequence of tips, such as for an onboarding flow, you can manage a queue of ToolTip objects in your component’s state. After a user dismisses a tip or presses an action, you can advance to the next tip in the queue. Displaying multiple distinct popovers in one session requires iOS 26 and Xcode 26 beta or newer.
FAQs
Q: Does this component work on Android?
A: No, this library is built specifically for iOS and relies on Apple’s native SwiftUI and TipKit frameworks. It is not supported on Android.
Q: What are the minimum iOS and Expo SDK requirements?
A: You need Expo SDK 53 or higher. The component requires iOS 17+ for TipKit support. To display multiple, sequential popover tips in a single app session, iOS 26 with Xcode 26 beta is necessary due to system constraints in earlier versions.
Q: Why do I need to call resetTips and configureTips?
A: These functions interact with the native iOS TipKit framework to manage the state of your tips. Calling them once at app launch ensures that tips are displayed consistently and correctly according to TipKit’s internal rules.
Q: Can I customize the appearance of the tooltip?
A: Yes, the ToolTip object allows you to define the title, description, and action buttons. You can also specify text styles like bolding and add an SF Symbol image to the tooltip content.
