π§ SwiftUI-powered Popover Tips for React Native β beautiful, native tooltips using TipKit π¬β‘οΈ
npm install expo-ios-popover-tip

A sleek native iOS popover tooltip component for React Native via Expo Modules
---
- π¬ Supports actionable tooltips with buttons
- π§ Seamless glass morphism with blur and symbol support
- π Custom dismiss & tap handlers for interactive UIs
- π§© Nest React Native children inside your popover tip
- β‘οΈ High performance via Expo Modules Core
---
``bash`
bunx expo install expo-ios-popover-tip
Then:
`bash`
cd ios && pod install
> π‘ Requires Expo SDK 53+ and expo prebuild --platform ios
---
`tsx
import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { SymbolView } from "expo-symbols";
import {
ToolTipView,
resetTips,
configureTips,
isConfigured,
} from "expo-ios-popover-tip";
export const Home = () => {
const [isTipReady, setIsTipReady] = useState
useEffect(() => {
resetTips();
configureTips();
isConfigured().then(() => setIsTipReady(true));
}, []);
return (
id: "onboarding_tip",
title: { text: "Welcome!" },
description: { text: "Tap this to begin." },
actions: [{ id: "start", title: "Letβs go!" }],
}}
isVisible={isTipReady}
>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
button: {
backgroundColor: "#000",
padding: 10,
borderRadius: 18,
alignItems: "center",
gap: 10,
paddingHorizontal: 20,
flexDirection: "row",
},
buttonText: {
color: "#fff",
fontWeight: "600",
},
});
``
---
You can show multiple tips one after another.
- Please check out this example
---
https://github.com/user-attachments/assets/c2b0e8cf-0814-40f2-b36a-66825313a6df
---
Pull requests and feedback are warmly welcome!
Letβs push the limits of native + React Native.
---
MIT Β© rit3zh