| Showcase iOS | Showcase Android |
|---|---|
npm i react-native-tooltip-alert --save
yarn add react-native-tooltip-alert
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>
);
}
}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>
);
}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 | {} |
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)
}
This project is licensed under the MIT License - see the LICENSE.md file for details
Made by Idanlevi1.