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