@vivintsolar-oss/native-vs-modal

2.0.0-0 • Public • Published

@vivintsolar-oss/native-vs-modal

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

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>
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

Readme

Keywords

none

Package Sidebar

Install

npm i @vivintsolar-oss/native-vs-modal

Weekly Downloads

2

Version

2.0.0-0

License

MIT

Unpacked Size

9.73 kB

Total Files

9

Last publish

Collaborators

  • joeqread
  • brax10
  • impulsivejs
  • vslr-user
  • heraclio
  • dncrews
  • fozzylyon
  • zack37
  • devtanc