React native tooltip like never before, using leading packages like react-native-reanimated v2

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
  • 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:

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 (
    <PortalProvider>
      <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>
    </PortalProvider>
  );
};

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

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:

Contributing

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

License

MIT


GitHub

View Github