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