Merge branch 'master' of https://github.com/testshallpass/react-native-dropdownalert

Author: testshallpass

DropdownAlert.js

@@ -50,6 +50,8 @@ export default class DropdownAlert extends Component {
     updateStatusBar: PropTypes.bool,
     elevation: PropTypes.number,
     sensitivity: PropTypes.number,
+    defaultContainer: ViewPropTypes.style,
+    defaultTextContainer: ViewPropTypes.style,
   };
   static defaultProps = {
     onClose: null,
@@ -99,6 +101,15 @@ export default class DropdownAlert extends Component {
       height: DEFAULT_IMAGE_DIMENSIONS,
       alignSelf: 'center',
     },
+    defaultContainer: {
+      padding: 8,
+      paddingTop: IS_ANDROID ? 0 : 20,
+      flexDirection: 'row',
+    },
+    defaultTextContainer: {
+      flex: 1,
+      padding: 8,
+    },
     translucent: false,
     activeStatusBarStyle: 'light-content',
     activeStatusBarBackgroundColor: StatusBarDefaultBackgroundColor,
@@ -321,17 +332,18 @@ export default class DropdownAlert extends Component {
     }
   }
   getStyleForType(type) {
+    const { defaultContainer } = this.props;
     switch (type) {
       case 'info':
-        return [styles.defaultContainer, { backgroundColor: this.props.infoColor }];
+        return [StyleSheet.flatten(defaultContainer), { backgroundColor: this.props.infoColor }];
       case 'warn':
-        return [styles.defaultContainer, { backgroundColor: this.props.warnColor }];
+        return [StyleSheet.flatten(defaultContainer), { backgroundColor: this.props.warnColor }];
       case 'error':
-        return [styles.defaultContainer, { backgroundColor: this.props.errorColor }];
+        return [StyleSheet.flatten(defaultContainer), { backgroundColor: this.props.errorColor }];
       case 'success':
-        return [styles.defaultContainer, { backgroundColor: this.props.successColor }];
+        return [StyleSheet.flatten(defaultContainer), { backgroundColor: this.props.successColor }];
       default:
-        return [styles.defaultContainer, StyleSheet.flatten(this.props.containerStyle)];
+        return [StyleSheet.flatten(defaultContainer), StyleSheet.flatten(this.props.containerStyle)];
     }
   }
   getSourceForType(type) {
@@ -413,7 +425,7 @@ export default class DropdownAlert extends Component {
           >
             <View style={style}>
               <ImageView style={StyleSheet.flatten(this.props.imageStyle)} source={source} />
-              <View style={styles.textContainer}>
+              <View style={StyleSheet.flatten(this.props.defaultTextContainer)}>
                 <Label style={StyleSheet.flatten(this.props.titleStyle)} numberOfLines={this.props.titleNumOfLines} text={this.state.title} />
                 <Label style={StyleSheet.flatten(this.props.messageStyle)} numberOfLines={this.props.messageNumOfLines} text={this.state.message} />
               </View>
@@ -436,15 +448,3 @@ export default class DropdownAlert extends Component {
     return null;
   }
 }
-
-var styles = StyleSheet.create({
-  defaultContainer: {
-    padding: 8,
-    paddingTop: IS_ANDROID ? 0 : 20,
-    flexDirection: 'row',
-  },
-  textContainer: {
-    flex: 1,
-    padding: 8,
-  },
-});

README.md

@@ -6,7 +6,16 @@
 [![Build Status](https://travis-ci.org/testshallpass/react-native-dropdownalert.svg?branch=master)](https://travis-ci.org/testshallpass/react-native-dropdownalert)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)
 
-A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be dismissed by onPress, cancel onPress, automatically with `closeInterval` prop, pan responder up gesture or programmatically. 
+![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/info.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/warning.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/error.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/success.png)
+
+### Table of contents
+1. [News](#news)
+2. [Installation](#installation)
+3. [Demo](#demo)
+4. [Usage](#usage)
+5. [Props](#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. 
 
 ### News
 > v2.13.0 supports ViewPropTypes introduced in react-native **0.44.0**. If you support an earlier react-native version, please use v2.12.0 or earlier.
@@ -21,39 +30,31 @@ npm i react-native-dropdownalert --save
 
 ### Usage
 ```javascript
-
-import DropdownAlert from 'react-native-dropdownalert'
-// ...
-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>
-  )
-}
-// ...
-handleRequestCallback(err, response) {
-  if (err != null) {
-    this.dropdown.alertWithType('error', 'Error', err)
+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>
+    );
   }
 }
-// ...
-onClose(data) {
-  // data = {type, title, message, action}
-  // action means how the alert was dismissed. returns: automatic, programmatic, tap, pan or cancel
-}
-// ...
 ```
 
-### Predefined Types
-
-| info | warn | error | success |
-| :---: | :---: | :---: | :---: |
-|![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/info.png) |![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/warning.png) |![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/error.png)|![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/success.png)
-
 ### Props
 | Name | Type | Description | Default |
 | ---- | :---: | --- | --- |
@@ -76,7 +77,7 @@ onClose(data) {
 | ```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``` | View.propTypes.style  | styles for container for custom type only | ```{ padding: 16, flexDirection: 'row' }```
+| ```containerStyle``` | ViewPropTypes.style  | styles for container for custom type only | ```{ padding: 16, flexDirection: 'row' }```
 | ```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' }```
@@ -87,5 +88,7 @@ onClose(data) {
 | ```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](https://github.com/cwRichardKim/RKDropdownAlert)