# @vivintsolar-oss/native-vs-modal

> Modal for VSLR UI kit

Latest version **2.0.0-0** (published 2018-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vivintsolar-oss/native-vs-modal
pnpm add @vivintsolar-oss/native-vs-modal
yarn add @vivintsolar-oss/native-vs-modal
bun add @vivintsolar-oss/native-vs-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-0 |
| Published | 2018-04-19 |
| First published | 2017-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | tcasey |
| Maintainers | devtanc, dncrews, ewbutterfield, fozzylyon, heraclio, stetsmando, tcasey, zack37 |

## Links

- npm: https://www.npmjs.com/package/@vivintsolar-oss/native-vs-modal
- Repository: https://github.com/vivintsolar-oss/react-native-components
- Homepage: https://github.com/vivintsolar-oss/react-native-components#readme
- Issues: https://github.com/vivintsolar-oss/react-native-components/issues
- npm.io page: https://npm.io/package/@vivintsolar-oss/native-vs-modal

## Dependencies (1)

- [@vivintsolar-oss/native-vs-constants](https://npm.io/package/@vivintsolar-oss/native-vs-constants.md) ^1.0.2

## Recent versions

- 2.0.0-0 (latest) — 2018-04-19
- 1.2.6 — 2018-04-17
- 1.2.4 — 2018-04-12
- 1.2.3 — 2018-04-12
- 1.2.2 — 2018-02-21
- 1.2.1 — 2017-11-17
- 1.1.1 — 2017-11-07
- 1.1.0 — 2017-10-23
- 1.0.3 — 2017-10-20
- 1.0.2 — 2017-10-12
- 1.0.1 — 2017-10-12
- 1.0.0 — 2017-10-12

## README

# @vivintsolar-oss/native-vs-modal

``` javascript
yarn add @vivintsolar-oss/native-vs-modal
// or
// npm install @vivintsolar-oss/native-vs-modal
```

## VSModal

A flexible modal component built to our design standards.

## [Demo](https://snack.expo.io/@vslr_oss/vs-modal)

``` javascript
import { ModalBase } from '@vivintsolar-oss/native-vs-modal';

  const nestProps = {
    visible,
    animationType: 'none',
    transparent: true,
    hardwareAccelerated: true,
    actionIcon,
    closeAction,
    mainAction,
    mainActionText: 'Do Stuff',
    secondaryActionText: 'Close',
  };

  <ModalBase { ...nestProps }>
    <View style={ styles.centerPadding }>
      <Image style={ styles.retry } source={ warningIcon } />
      <VSFont.Default style={ styles.normalFont }>Uh oh, looks like there were no thermostats detected.</VSFont.Default>
      <VSFont.Default style={ styles.smallFont }>Add a thermostat device in your Nest account and try again.</VSFont.Default>
      <SubmitButton
        onPress={ this.refetch }
        text={ 'TRY AGAIN' }
      />
    </View>
  </ModalBase>

```

``` javascript
import { ModaPlain } from '@vivintsolar-oss/native-vs-modal';

  const nestProps = {
    visible,
    animationType: 'none',
    transparent: true,
    hardwareAccelerated: true,
  };

  <ModaPlain { ...nestProps }>
    <View style={ styles.centerPadding }>
      <Image style={ styles.retry } source={ warningIcon } />
      <VSFont.Default style={ styles.normalFont }>Uh oh, looks like there were no thermostats detected.</VSFont.Default>
      <VSFont.Default style={ styles.smallFont }>Add a thermostat device in your Nest account and try again.</VSFont.Default>
      <SubmitButton
        onPress={ this.refetch }
        text={ 'TRY AGAIN' }
      />
    </View>
  </ModaPlain>

```

## Props

| Name | Default | Type | Description |
|:----- |:------ |:---- |:----------- |
| visible | false | boolean | Controls visible state of the modal component |
| children |  | any | Children to be rendered in the body of the modal |
| actionIcon |  | func | Render prop used to display the icon on the bottom left of the footer |
| mainAction |  | func | Main action that's used in the footer on the left side |
| closeAction |  | func | Action used in the footer on the right side |
| mainActionText | Settings | string | Text displayed in the footer on the left side |
| secondaryActionText | Close | string | Text displayed in the footer on the right side |
| header |  | object | Can use to render a header for the modal |
| footer |  | object | Props passed down to the footer component  |

---
_Source: https://npm.io/package/@vivintsolar-oss/native-vs-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._