@paraboly/react-native-generic-modal NPM

Fully customizable Generic Modal via Paraboly for React Native.

Installation

Add the dependency:

npm i @paraboly/react-native-generic-modal

Peer Dependencies

IMPORTANT! You need install them.

"lodash": "^4.17.x",
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-easy-grid": ">= 0.2.1",
"react-native-custom-icon": ">= x.x.x",
"react-native-vector-icons": ">= 6.x.x",
"react-native-dynamic-vector-icons": ">= x.x.x",
"react-native-floating-action-button": ">= x.x.x"

Basic Usage

<GenericModal />

Advanced Usage

<GenericModal
  isOpen={true}
  backdrop
  title="Title"
  ref="testModal"
  refName="testModal"
  context="Test Modal"
  generateButtons={this.getButtons()}
  contextTextStyle={styles.contextTextStyle}
  backgroundColor={colors.theme.light.default}
/>

Configuration - Props

Property	Type	Default	Description
isOpen	boolean	false	use this to open modal directly
coverScreen	boolean	false	use this to set your modal covers the whole screen
refName	string	null	set a reference name for the modal, this is for dynamic usage of the modal
backdrop	boolean	false	use this to add a backdrop for the modal
modalWidth	number	dynamic	use this to set custom modal width
modalHeight	number	dynamic	use this to set custom modal height
modalBottom	number	height * 0.6	use this to change where modal will be appear depends on the bottom
generateButtons	array	null	use this to generate buttons as an example (You must create an array with the format)
modalDesignComponent	component	ModelDesign	set your own modal design as a component
title	string	""	change the title
context	string	""	change the context
rightText	string	""	change the title right side
titleFontFamily	font family	Helvetica	use this to set the font family for the modal
rightTextFontFamily	font family	Helvetica	use this to set the font family for the modal
contextFontFamily	font family	Helvetica	use this to set the font family for the modal
contextHeight	number	55	use this to set context's height
defaultContext	string	""	use this to set a default context value
titleTextStyle	style	style	use this to set your own style for title text
rightTextStyle	style	style	use this to set your own style for right title text
contextTextStyle	style	style	use this to set your own style for context text
backgroundColor	color	#a092d6	use this to set background color for the header part of the modal
customIconComponent	component	null	use this to set your own custom icon component for the generated buttons
onOpened	function	null	use this to set your own onOpened function
onClosed	function	null	use this to set your own onClosed function

Generated Buttons Usage

Okey, we can use Dynamic Vector Icons component as generated buttons but we must follow this format. "generateButtons" prop accepts an array and it must be like this : (You can check the example)

buttons = [
    {
      size: 35,
      name: "cancel",
      icon: "cancel",
      color: "#C60817",
      type: "MaterialIcons",
      onPress: () => {}
    },
    {
      size: 35,
      name: "verify",
      color: "#06CAA6",
      icon: "verified-user",
      type: "MaterialIcons",
      onPress: () => {}
    }
  ];

Generated Buttons Custom Icon Usage

We can use our own custom icon component as well but still we must follow the above format for the generatedButtons but this time we need to send "customIcon: true" data as well. It let the lib knows that a custom icon will be used and also we need to provide "customIconComponent" to let it knows that which component will be implement.

CustomIconComponent should be something like the below. It has to be item.icon, item.size and item.color for the usage of generatedButtons.

 buttons = [
    {
      size: 28,
      name: "map",
      icon: "map",
      color: "#C60817",
      customIcon: true, // Magic is here, DO NOT FORGET this line!
      onPress: () => {}
    },
    {
      size: 28,
      color: "#06CAA6",
      customIcon: true, // Magic is here, DO NOT FORGET this line!
      icon: "announcement",
      name: "announcement",
      onPress: () => {}
    }
  ];

<GenericModal
  isOpen={true}
  backdrop
  title="Title"
  ref="testModal"
  refName="testModal"
  context="Test Modal"
  generateButtons={this.getButtons()}
  contextTextStyle={styles.contextTextStyle}
  backgroundColor={colors.theme.light.default}
  customIconComponent={
      <MyIcon
          name={item.icon}
          size={item.size}
          color={item.color || colors.theme.light.primaryDark}
       />
    }
/>