React-native-tooltip-alert NPM

react-native-tooltip-alert

Super Lightweight Component
Add Your own Component To Bottom Sheet
Customize Whatever You Like
Support Drag Down Gesture
Support All Orientations
Support Both Android And iOS
Smooth Animation
Zero Configuration
Zero dependency
Top Search Ranking (react native bottom sheet) at npms.io

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

Props	Type	Description	Default
animationType	string	Background animation ("none", "fade", "slide")	"none"
height	number	Height of Bottom Sheet	260
minClosingHeight	number	Minimum height of Bottom Sheet before close	0
openDuration	number	Open Bottom Sheet animation duration	300 (ms)
closeDuration	number	Close Bottom Sheet animation duration	200 (ms)
closeOnDragDown	boolean	Use gesture drag down to close Bottom Sheet	false
dragFromTopOnly	boolean	Drag only the top area of the draggableIcon to close Bottom Sheet instead of the whole content	false
closeOnPressMask	boolean	Press the area outside to close Bottom Sheet	true
closeOnPressBack	boolean	Press back android to close Bottom Sheet (Android only)	true
onClose	function	Callback function when Bottom Sheet has closed	null
onOpen	function	Callback function when Bottom Sheet has opened	null
customStyles	object	Custom style to Bottom Sheet	{}
keyboardAvoidingViewEnabled	boolean	Enable KeyboardAvoidingView	true (ios)

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

Methods

Method Name	Description
open	Open Bottom Sheet
close	Close Bottom Sheet

Note

If you combind TooltipAlert with react-native-gesture-handler, the components inside TooltipAlert will not fire onPress event on Android #37.
The demo source codes are in example folder.