Git Product home page Git Product logo

react-native-dropdownalert's Introduction

react-native-dropdownalert

Platform npm version npm version Build Status License

screenshot screenshot screenshot screenshot

Table of contents

  1. Support
  2. Installation
  3. Demo
  4. Usage
  5. Props

A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval, pan responder up gesture or programmatically.

Support

react-native version package version reason
0.50.0 >=3.2.0 Added SafeAreaView (iPhone X)
0.44.0 >=2.12.0 Added ViewPropTypes

Installation

npm i react-native-dropdownalert --save

Demo

screenshot

Usage

import DropdownAlert from 'react-native-dropdownalert';
export default class Example extends Component {
  // ...
  onError = error => {
    if (error) {
      this.dropdown.alertWithType('error', 'Error', error);
    }
  };
  // ...
  onClose(data) {
    // data = {type, title, message, action}
    // action means how the alert was closed.
    // returns: automatic, programmatic, tap, pan or cancel
  }
  render() {
    return (
      <View>
        // !!! Make sure it's the last component in your document tree.
        <DropdownAlert ref={ref => this.dropdown = ref} onClose={data => this.onClose(data)} />
      </View>
    );
  }
}

Props

Name Type Description Default
closeInterval Number dismiss alert at a certain time in milliseconds 4000
imageSrc String or Number local or network source null
startDelta Number where the container starts (changes based on container height onLayout) -100
endDelta Number where the container ends 0
onClose Function Invoked when alert is closed Returns: data = {type, title, message, action} null
cancelBtnImageSrc String or Number local or network source require('./assets/cancel.png')
titleNumOfLines Number number of lines 1
messageNumOfLines Number number of lines 3
onCancel Function Cancel button action. Returns: data = {type, title, message, action} null
showCancel Bool whether or not to show cancel button false
tapToCloseEnabled Bool enable/disable close with tap true
panResponderEnabled Bool enable/disable close with pan responder true
replaceEnabled Bool enables the alert to either state change without dismissal or go to next alert with dismissal true
translucent Bool StatusBar prop false
updateStatusBar Bool whether or not to update status bar styles true
activeStatusBarStyle String StatusBar barStyle when alert is open light-content
activeStatusBarBackgroundColor String StatusBar backgroundColor when alert is open It takes on the backgroundColor of alert if predefined else default or provided prop
inactiveStatusBarStyle String StatusBar barStyle when alert dismisses StatusBar._defaultProps.barStyle.value
inactiveStatusBarBackgroundColor String StatusBar backgroundColor when alert dismisses StatusBar._defaultProps.backgroundColor.value
containerStyle ViewPropTypes.style styles for container for custom type only { padding: 16, flexDirection: 'row' }
zIndex Number zIndex attribute on outermost container null
titleStyle Text.propTypes.style styles for title for all types { fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }
messageStyle Text.propTypes.style styles for message for all types { fontSize: 14, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }
imageStyle Image.propTypes.style styles for image for all types { padding: 8, width: 36, height: 36, alignSelf: 'center' }
cancelBtnImageStyle Image.propTypes.style styles for image for all types { padding: 8, width: 36, height: 36, alignSelf: 'center' }
successColor String Default background color of success message #32A54A
infoColor String Default background color of info message #2B73B6
warnColor String Default background color of warn message #cd853f
errorColor String Default background color of error message #cc3232
elevation Number Animated.View elevation 1
sensitivity Number Sensitivity for the pan responder up gesture 20
defaultContainer ViewPropTypes.style Style for inner view container (override paddingTop with this) { padding: 8, paddingTop: IS_ANDROID ? 0 : 20, flexDirection: 'row' }
defaultTextContainer ViewPropTypes.style Style for inner text container (holds title and message) { flex: 1, padding: 8 }

Inspired by: RKDropdownAlert

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.