React Native Tooltiplize - Fully Customizable Tooltip Component

react-native-tooltiplize

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

Preview

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:

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

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';

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

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

Download Details:

Author: Stringsaeed

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Stringsaeed/react-native-tooltiplize

License: MIT

#react #reactjs #react-native