React Native Global Modal 2: Easy and Customizable

 

React Native Global Modal

Installation

Add the dependency:

npm i react-native-global-modal-2

Peer dependencies

"react-native-modal": "^13.0.1"

Usage

Import

import GlobalModal, { ModalController } from "react-native-global-modal-2"

Fundamental Usage

In App.tsx or wherever your root is, simply put the GlobalModal to root You can open it with custom ModalData with ModalController

Note: This is just an example of the usage

<NavigationContainer>
  <MainStack/>
  <GlobalModal/>
</NavigationContainer>

Call/control the animated modal with ModalController

import { ModalController, ModalData } from "react-native-global-modal-2"

// Example of ModalData
// You can customize the modal as you want with this format
// **Custom layout** option is also available!
const data: ModalData = {
  title: 'Update available',
  description: 'A new software version is available for download',
  primaryButtonText: 'Update',
  outlineButtonText: 'Not now',
  titleProps: {
    imageSource: require('./assets/cross.png'),
  },
  onPrimaryButtonPress: () => {},
  onOutlineButtonPress: () => {},
};
// Show
ModalController.show(data);
// Hide
ModalController.hide()

Custom Layout Usage

You can completely use your own layout with customLayout

import { ModalController, ModalData } from "react-native-global-modal-2"


const data: ModalData = {
  customLayout: (
    <View
      style={{
        borderRadius: 16,
        paddingTop: 24,
        paddingLeft: 24,
        paddingRight: 24,
        paddingBottom: 16,
        backgroundColor: '#fff',
      }}>
      <Text>Hello</Text>
    </View>
  ),
};
ModalController.show(data);

Customized Example

You can use any props from react-native-modal with prop drilling

<GlobalModal
  animationIn="fadeIn"
  animationOut="fadeOut"
  onBackdropPress={ModalController.hide}
/>

Example Project 😍

You can check out the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

PropertyTypeDefaultDescription
titlestringundefinedchange the title
descriptionstringundefinedchange the descrition
primaryButtonTextstringundefinedchange the primary button's text
onPrimaryButtonPressfunctionundefinedset function when the primary button is pressed
onOutlineButtonPressfunctionundefinedset function when the primary button is pressed

Customization (Optionals)

PropertyTypeDefaultDescription
styleViewStyledefaultset or override the style object for the main container
buttonsContainerStyleViewStyledefaultset or override the style object for the buttons' container style
TouchableComponentcomponentPressableset your own component instead of default Pressable component
buttonPropsButtonPropsdefaultchange button's props (primary button)
outlineButtonPropsOutlineButtonPropsdefaultchange button's props (outline button)

Customization [Button] Component

PropertyTypeDefaultDescription
titlestringundefinedchange the title
onPressfunctionundefinedset your function
styleViewStyledefaultset or override the style object for the main container
textStyleTextStyledefaultset or override the style object for the text style

Customization [OutlineButton] Component

PropertyTypeDefaultDescription
titlestringundefinedchange the title
onPressfunctionundefinedset your function
styleViewStyledefaultset or override the style object for the main container
textStyleTextStyledefaultset or override the style object for the text style

Future Plans

  •  LICENSE
  •  More built-in modal types
    •  Notification Type
    •  One Button
    •  One Outline Button
  •  Custom Layout Feature
  •  More and better screenshots
  •  Write an article about the lib on Medium

Credits

I inspired from Roycechua's global modal example Thank you so much Roycechua 😍

I heavily inspired the design by Patrick Marx Thank you so much sir 🥳

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Global Modal is available under the MIT license. See the LICENSE file for more info.


Download details:

Author: WrathChaos
Source: https://github.com/WrathChaos/react-native-global-modal-2

License: MIT license

#react #reactnative 

React Native Global Modal 2: Easy and Customizable
1.15 GEEK