React-native-custom-alert-box NPM

react-native-custom-alert-box

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

Screenshots

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