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
Modal
issues - 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-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 |
- Handle Safe Area and Window dimensions
- Adding Support for more animation types
- Unit Testing
- Adding Cool pointer using
react-native-svg
with 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