https://github.com/brunohkbx/react-native-material-backdrop-modal

Material Design "Backdrop" component for Android and iOS.
https://github.com/brunohkbx/react-native-material-backdrop-modal

expo material-design modal react-native

Last synced: 3 months ago
JSON representation

Material Design "Backdrop" component for Android and iOS.

• Host: GitHub
• URL: https://github.com/brunohkbx/react-native-material-backdrop-modal
• Owner: brunohkbx
• License: mit
• Created: 2019-10-01T03:18:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T04:51:20.000Z (almost 2 years ago)
• Last Synced: 2024-11-04T00:51:58.284Z (3 months ago)
• Topics: expo, material-design, modal, react-native
• Language: JavaScript
• Homepage:
• Size: 4.23 MB
• Stars: 43
• Watchers: 2
• Forks: 5
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-material-backdrop-modal

Material Design "Backdrop" component for Android and iOS.

- [Setup](#setup)

- [Usage](#usage)

- [Props](#props)

## Setup

1. Install:

    - Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-material-backdrop-modal --save`

    - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-material-backdrop-modal`

2. Import it in your JS:

    ```js

    import Backdrop from 'react-native-material-backdrop-modal';

    ```

## Usage

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

![Backdrop](./example/backdrop.png)

See Google's [Material Design guidelines](http://material.io/components/backdrop/) for more info about Backdrops and when to use them.

Check out the example app:

```bash

git clone https://github.com/brunohkbx/react-native-material-backdrop-modal

cd react-native-material-backdrop-modal/example

yarn

yarn start

```

![Example](./example/example.gif)

## Props

| prop                      | default                  | type          | description                                                                                                                                                     |

| ------------------------- | ------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| children                  |                  | node        | Content of `Backdrop     `                                                                                                                                       |

| focused            | true                     | boolean        | Specifies whether `Backdrop` should be focused                                                                                                                                        |

| onFocus           |                      | Function        | The Handler that's emitted every time the user conceals the back layer.                                                                                                                          |

| title         |  | string        | The Subheader title                                                                                                                             |

| icon | | element | Icon to be used on the Subheader

| preset | easeInEaseOut | object | Animation [presets](https://reactnative.dev/docs/layoutanimation#presets) to pass into configureNext

| titleStyle | {} | object | Style for the subheader title

| backdropStyle |{} | object | Style for the backdrop