react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal
| With Overlay (iOS) | Without Overlay (iOS) | Without Overlay (Android) | With Overlay (Android) |
|---|---|---|---|
 |  |  |  |
- iOS, Android, and Web!!!
- Fully customizable
- Simple and Clean API
- Works for all
reanimated's v2 versions - Far away from
Modalissues - 60 FPS
- Less boilerplate
- RTL support by default (no need to worry about it)
- Built for already in production app
- And more...
yarn add react-native-tooltiplizeThis library needs some peer dependencies to work properly. You need to install them in your project.
-
for
react-native-cliusers:-
install peer dependencies:
yarn add react-native-reanimated @gorhom/portal
-
For iOS:
cd ios && pod install
-
-
for
expousers:
npx expo install react-native-reanimated @gorhom/portalyou first need to wrap your app with PortalProvider from @gorhom/portal to provide a context for the Portal.
import { PortalProvider } from '@gorhom/portal'; const App = () => { return ( <PortalProvider> <App /> </PortalProvider> ); };then you can use the Tooltip component
import React from 'react'; import Tooltip from 'react-native-tooltiplize'; import { PortalProvider } from '@gorhom/portal'; import { View, TouchableOpacity, StyleSheet, Text } from 'react-native'; const App = () => { const [isVisible, toggle] = React.useReducer((state) => !state, false); const renderContent = React.useCallback(() => { return ( <TouchableOpacity style={styles.tooltipContainer} onPress={toggle}> <Text style={styles.tooltipText}> Welcome to React Native Tooltiplize 🥳 </Text> </TouchableOpacity> ); }, []); return ( <View style={styles.container}> <Tooltip position="top" offset={8} renderContent={renderContent} isVisible={isVisible} withOverlay onDismiss={toggle} pointerStyle={styles.pointer} pointerColor="green" > <TouchableOpacity onPress={toggle} style={styles.newFeature}> <Text style={styles.newFeatureText}>This is new cool feature</Text> </TouchableOpacity> </Tooltip> </View> ); }; export default App; const styles = 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, }, });| ? | 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 |
- Handle Safe Area and Window dimensions
- Adding Support for more animation types
- Unit Testing
- Adding Cool pointer using
react-native-svgwith optional dependencies
this package is heavily inspired from:
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library