Skip to content

🧊 SwiftUI-powered Popover Tips for React Native β€” beautiful, native tooltips using TipKit πŸ’¬βš‘οΈ

Notifications You must be signed in to change notification settings

rit3zh/expo-ios-popover-tip

Repository files navigation

Expo iOS Popover Tip

A sleek native iOS popover tooltip component for React Native via Expo Modules


✨ Features

  • πŸ’¬ 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

πŸš€ Installation

bunx expo install expo-ios-popover-tip

Then:

cd ios && pod install

πŸ’‘ Requires Expo SDK 53+ and expo prebuild --platform ios


πŸ§ͺ Usage

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<boolean>(false);
  useEffect(() => {
    resetTips();
    configureTips();

    isConfigured().then(() => setIsTipReady(true));
  }, []);

  return (
    <View style={styles.container}>
      <ToolTipView
        tooltip={{
          id: "onboarding_tip",
          title: { text: "Welcome!" },
          description: { text: "Tap this to begin." },
          actions: [{ id: "start", title: "Let’s go!" }],
        }}
        isVisible={isTipReady}
      >
        <View style={styles.button}>
          <SymbolView name="info.circle" size={15} tintColor="#fff" />
          <Text style={styles.buttonText}>Home Screen</Text>
        </View>
      </ToolTipView>
    </View>
  );
};

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",
  },
});

🧭 Sequential Tips (Tip Queue)

You can show multiple tips one after another.


πŸŽ₯ Demo

tooltip.mov

❀️ Contributing

Pull requests and feedback are warmly welcome! Let’s push the limits of native + React Native.


πŸ“„ License

MIT Β© rit3zh

About

🧊 SwiftUI-powered Popover Tips for React Native β€” beautiful, native tooltips using TipKit πŸ’¬βš‘οΈ

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •