react-native-tooltiplize

react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal

Preview

With Overlay (iOS)	Without Overlay (iOS)	Without Overlay (Android)	With Overlay (Android)

Features

• iOS, Android, and Web!!!
• Fully customizable
• Simple and Clean API
• Works for all reanimated's v2 versions
• Far away from Modal issues
• 60 FPS
• Less boilerplate
• RTL support by default (no need to worry about it)
• Built for already in production app
• And more...

Installation

yarn add react-native-tooltiplize

Peer Dependencies

This library needs some peer dependencies to work properly. You need to install them in your project.

• for react-native-cli users:

  1. install peer dependencies:

     yarn add react-native-reanimated @gorhom/portal

  2. For iOS:

     cd ios && pod install

• for expo users:

npx expo install react-native-reanimated @gorhom/portal

Usage

you first need to wrap your app with PortalProvider from @gorhom/portal to provide a context for the Portal.

import{PortalProvider}from'@gorhom/portal';constApp=()=>{return(<PortalProvider><App/></PortalProvider>);};

then you can use the Tooltip component

importReactfrom'react';importTooltipfrom'react-native-tooltiplize';import{PortalProvider}from'@gorhom/portal';import{View,TouchableOpacity,StyleSheet,Text}from'react-native';constApp=()=>{const[isVisible,toggle]=React.useReducer((state)=>!state,false);constrenderContent=React.useCallback(()=>{return(<TouchableOpacitystyle={styles.tooltipContainer}onPress={toggle}><Textstyle={styles.tooltipText}>
Welcome to React Native Tooltiplize 🥳
</Text></TouchableOpacity>);},[]);return(<Viewstyle={styles.container}><Tooltipposition="top"offset={8}renderContent={renderContent}isVisible={isVisible}withOverlayonDismiss={toggle}pointerStyle={styles.pointer}pointerColor="green"><TouchableOpacityonPress={toggle}style={styles.newFeature}><Textstyle={styles.newFeatureText}>This is new cool feature</Text></TouchableOpacity></Tooltip></View>);};exportdefaultApp;conststyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},tooltipContainer: {paddingHorizontal: 16,paddingVertical: 8,borderRadius: 8,shadowColor: '#000',shadowOffset: {width: 0,height: 2,},shadowOpacity: 0.1,shadowRadius: 12,elevation: 5,backgroundColor: 'green',},tooltipText: {fontSize: 12,color: 'white',},pointer: {width: 16,height: 8},newFeature: {backgroundColor: 'white',padding: 16,borderRadius: 8,},newFeatureText: {fontSize: 16,},});

Props

?	Name	Type	Default	Description
✅	isVisible	boolean	undefined	Determines whether the tooltip is visible or not.
✅	renderContent	() => ReactNode	undefined	the content of the tooltip
✅	children	ReactNode	undefined	the children component that the tooltip will point to
❌	withOverlay	boolean	undefined	whether or not to render overlay behind the children and the Tooltip
❌	onDismiss	() => void	undefined	a function to be called when the user presses on the overlay
❌	overlayStyle	ViewStyle	undefined	a style object to customize how Overlay looks
❌	offset	number	0	a distance added between the Tooltip and the children, Please note that the Pointer size is calculated separately
❌	pointerStyle	ViewStyle	undefined	a style object to customize Pointer looks, Please note: the only available styles in only width and height
❌	pointerColor	string	"#000000"	The Pointer's color
❌	position	string	top	top, bottom, left, and right, to control the placement of the Tooltip
❌	timingConfig	WithTimingConfig	{ duration: 300 }	the timing config for animating opening and closing of the Tooltip and Overlay, Please note: that is from react-native-reanimated
❌	childrenStyle	ViewStyle	undefined	the style of children
❌	renderPointer	(props: PointerProps) => ReactNode	undefined	a render function for the pointer component takes the pointer props that you pass them as a props

TODO:

• Handle Safe Area and Window dimensions
• Adding Support for more animation types
• Unit Testing
• Adding Cool pointer using react-native-svg with optional dependencies

Big Thanks 🙏

this package is heavily inspired from:

• react-native-portal

• react-native-triangle

• react-native-portalize

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library