
Security News
Official Go SDK for MCP in Development, Stable Release Expected in August
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
react-native-tooltiplize
Advanced tools
react native tooltip like never before, using leading packages like `react-native-reanimated` v2, `framer-motion`, and `@gorhom/portal`
react-native-tooltiplize
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) |
---|---|---|---|
![]() | ![]() | ![]() | ![]() |
reanimated
's v2 versionsModal
issuesyarn add react-native-tooltiplize
This library needs some peer dependencies to work properly. You need to install them in your project.
for react-native-cli
users:
install peer dependencies:
yarn add react-native-reanimated @gorhom/portal
For iOS:
cd ios && pod install
for expo
users:
npx expo install react-native-reanimated @gorhom/portal
you 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 |
react-native-svg
with optional dependenciesthis 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
FAQs
react native tooltip like never before, using leading packages like `react-native-reanimated` v2, `framer-motion`, and `@gorhom/portal`
The npm package react-native-tooltiplize receives a total of 45 weekly downloads. As such, react-native-tooltiplize popularity was classified as not popular.
We found that react-native-tooltiplize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
Security News
New research reveals that LLMs often fake understanding, passing benchmarks but failing to apply concepts or stay internally consistent.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.