Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-dialog-view

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-dialog-view

test

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17
decreased by-48.48%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-dialog-view

The react-native-dialog-view is an animated overlay that can help you to display on the screen a pop-up/modal/dialog-view. This is a more straightforward solution to the react-native-modal. This implementation is a simpler solution for a modal that is not using the react-native-modal and it uses the react-native-reanimated for a simple animation and the react-native-portal to be above everything. You can display more DialogView modals over each other. Default animation Slide In.

Installation

npm install react-native-dialog-view

or

yarn add react-native-dialog-view

Packages

PackageVersion
react-native-reanimated^3.2.0
react-native-portal^1.0.14

Setup

Add the DialogViewProvider to your App.ts files

import { DialogViewProvider } from 'react-native-dialog-view';

// ...

<Provider store={store}>
  <DialogViewProvider>
    <NavigationProvider>
      <MainNavigator />
    </NavigationProvider>
  </DialogViewProvider>
</Provider>;

Usage

import { DialogViewView } from 'react-native-dialog-view';

// ...

<DialogViewView
    visible={isVisible}
    animationTime={300} // default
    hideModal={hideModal}
>
    <YourDesignedModal/>
</DialogView>

Props

NameRequiredTypeDescription
visiblerequiredbooleanThis variable is used to display the overview
childrenrequiredReactNode-
animationTimeoptionalnumberThis variable is used to set the speed of the entrance/exit animation of the overlay
hideModaloptionalfunctionThis function is called when the exit animation of the Dialog is finished
backdropColoroptionalstringThis variable is used to change the background color of the overlay
overlayStyleoptionalViewStyleThis prop can be used to change the style of the overlay
activeBackdropoptionalbooleanThis prop can be used to call for hideModal when the user press on the overlay

Example

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

Keywords

FAQs

Package last updated on 12 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc