react-native-tooltip-alert

react-native-tooltip-alert

Showcase iOS	Showcase Android

Installation

npm i react-native-tooltip-alert --save

or

yarn add react-native-tooltip-alert

Example

Class component

import React, { Component } from "react";
import { View } from "react-native";
import TooltipAlert from "react-native-tooltip-alert";

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <TooltipAlert>
          <View>
              <Text>Open Tooltip</Text>
          </View>
        </TooltipAlert>
      </View>
    );
  }
}

Functional component

import React, { useRef } from "react";
import { View } from "react-native";
import TooltipAlert from "react-native-tooltip-alert";

export default function Example() {
  const refTooltipAlert = useRef();
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000"
      }}
    >
      <TooltipAlert>
        <View>
            <Text>Open Tooltip</Text>
        </View>
      </TooltipAlert>
    </View>
  );
}

Props

title, contentText, confirmButtonText, cancelButtonText, color, height

Props	Type	Description	Default
title	string	Tooltip title text	"Title"
contentText	string	Tooltip content text	"Content text"
onConfirm	function	Callback when on confirm clicked (onClose call after)	null
onCancel	function	Callback when on cancel clicked (onClose call after)	null
confirmButtonText	string	Tooltip confirm button text	"Confirm"
confirmButtonText	string	Tooltip cancel button text	"Close"
height	number	Height of tooltip	260
closeOnPressMask	boolean	Press the area outside to close Bottom Sheet	true
closeOnPressBack	boolean	Press back android to close Bottom Sheet (Android only)	true
customStyles	object	Custom style to Bottom Sheet	{}

Available Custom Style

customStyles: {
  wrapper: {...}, // The Root of Component (You can change the `backgroundColor` or any styles)
  container: {...}, // The Container of Bottom Sheet
  draggableIcon: {...} // The Draggable Icon (If you set closeOnDragDown to true)
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Author

Made by Idanlevi1.