react-native-custom-alert-box

0.0.0 • Public • Published

react-native-custom-alert-box

Customizable and easy-to-use alert box for React Native.

Screenshots

drawing1 drawing2 drawing3 drawing4

Installation

Install my-project with npm

  npm install react-native-custom-alert-box

Install my-project with yarn

  yarn add react-native-custom-alert-box

Install React Native Vector Icons

 npm install react-native-vector-icons --save

Changes required for Android

To use react-native-vector-icons in Android we need edit android/app/build.gradle (NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

This method will copy fonts from react-native-vector-icons module at build time. If you want to customize the files being copied, add the required icon TTF:

project.ext.vectoricons = [
   iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Usage/Examples

import { View, Text, TouchableOpacity, Dimensions } from 'react-native'
import React, { useState } from 'react'


import ReactNativeAlertBox from "react-native-custom-alert-box"

const App = () => {

  const [showModal, setShowModal] = useState(false)
  const { width, height } = Dimensions.get("screen");

  return (
    <View>
      
      <TouchableOpacity onPress={() => setShowModal(true)}>
        <Text>Open</Text>
      </TouchableOpacity>


      {/* Alert Function */}
      <ReactNativeAlertBox
        showAlertModal={showModal}
        AlertType={"Success"}
        AlertBoxOpacity={0.2}                  //from 0 to 1
        AlertBoxWidthPercent={"95%"}           //Modal Width Percent
        HeadingText={"Hello"}
        BodyText={"This is a Alert Message"}
        ButtonLeftText={"Cancel"}
        ButtonLeftFunction={() => {
          console.log("Left is working");
          setShowModal(false)
        }}
        ButtonRightText={"Ok"}
        ButtonRightFunction={() => {
          console.log("Right is working")
          setShowModal(false)
        }}
                                               // Icons Props Vector Icons 
        IconPackageName={"AntDesign"}
        IconName={"home"}
        IconSize={35}
        IconColor={"white"}
        IconScaling={width * 0.0025}
      />

    </View>
  )
}

export default App

Alert Box Props

Parameter Type Description
showAlertModal boolean Pass the true or false value to show alert box.
AlertType string Pass type - "Success", "Danger", "Primary", "Secondary", "Warning", "Dark".
AlertBoxOpacity decimals Pass background opacity value from 0 to 1.
AlertBoxWidthPercent percentage Pass alert box width in percentage from 0% to 100%.
HeadingText string Pass alert heading in string.
BodyText string Pass alert body text in string.
ButtonLeftText string Pass alert left button text.
ButtonRightText string Pass alert right button text.
ButtonLeftFunction function Pass a callback function for left button functionality.
ButtonRightFunction function Pass a callback function for right button functionality.

Vector Icon SVG Props

Parameter Type Description
IconPackageName string Pass the vector icon package name - "AntDesign", "Entypo", "EvilIcons", etc..
IconName string Pass the icon name.
IconSize numbers Pass the icon size.
IconColor string Pass the icon color.
IconScaling numbers Adjust the scaling value so it scales for different devices.

Authors

Package Sidebar

Install

npm i react-native-custom-alert-box

Weekly Downloads

2

Version

0.0.0

License

ISC

Unpacked Size

14.7 kB

Total Files

3

Last publish

Collaborators

  • aakashthakur23102000