diff --git a/DropdownAlert.js b/DropdownAlert.js
index ce5be81b..518f6f97 100644
--- a/DropdownAlert.js
+++ b/DropdownAlert.js
@@ -167,7 +167,7 @@ export default class DropdownAlert extends Component {
     },
     defaultTextContainer: {
       flex: 1,
-      paddingHorizontal: 8,
+      padding: 8,
     },
     translucent: false,
     activeStatusBarStyle: 'light-content',
@@ -194,7 +194,6 @@ export default class DropdownAlert extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      animationValue: new Animated.Value(0),
       isOpen: false,
       topValue: 0,
       height: 0,
@@ -209,6 +208,7 @@ export default class DropdownAlert extends Component {
     };
     this.panResponder = this.getPanResponder();
     this.queue = new Queue();
+    this.animationValue = new Animated.Value(0);
   }
   componentWillUnmount() {
     if (this.state.isOpen) {
@@ -386,7 +386,7 @@ export default class DropdownAlert extends Component {
   };
   animate = (toValue, duration = 450, onComplete = () => {}) => {
     const {useNativeDriver, isInteraction} = this.props;
-    Animated.spring(this.state.animationValue, {
+    Animated.spring(this.animationValue, {
       toValue: toValue,
       duration: duration,
       friction: 9,
@@ -512,31 +512,37 @@ export default class DropdownAlert extends Component {
     const src = isRemote ? {uri: source} : source;
     return <Image style={style} source={src} />;
   };
-  _renderTitle = () => {
+  _renderTitle = (title) => {
     if (this.props.renderTitle) {
       return this.props.renderTitle(this.props, this.alertData);
     }
+    if (!title || title.length === 0) {
+      return null;
+    }
     const {titleTextProps, titleStyle, titleNumOfLines} = this.props;
     return (
       <Text
         {...titleTextProps}
         style={titleStyle}
         numberOfLines={titleNumOfLines}>
-        {this.alertData.title}
+        {title}
       </Text>
     );
   };
-  _renderMessage = () => {
+  _renderMessage = (message) => {
     if (this.props.renderMessage) {
       return this.props.renderMessage(this.props, this.alertData);
     }
+    if (!message || message.length === 0) {
+      return null;
+    }
     const {messageTextProps, messageStyle, messageNumOfLines} = this.props;
     return (
       <Text
         {...messageTextProps}
         style={messageStyle}
         numberOfLines={messageNumOfLines}>
-        {this.alertData.message}
+        {message}
       </Text>
     );
   };
@@ -583,8 +589,8 @@ export default class DropdownAlert extends Component {
       showCancel,
       imageStyle,
     } = this.props;
-    const {animationValue, topValue, height} = this.state;
-    const {type, payload} = this.alertData;
+    const {topValue, height} = this.state;
+    const {type, payload, title, message} = this.alertData;
     let style = this.getStyleForType(type);
     let imageSrc = this.getSourceForType(type);
     // imageSrc is overridden when payload has source property
@@ -605,7 +611,7 @@ export default class DropdownAlert extends Component {
     let wrapperAnimStyle = {
       transform: [
         {
-          translateY: animationValue.interpolate({
+          translateY: this.animationValue.interpolate({
             inputRange: [0, 1],
             outputRange,
           }),
@@ -645,8 +651,8 @@ export default class DropdownAlert extends Component {
             <ContentView style={StyleSheet.flatten(contentContainerStyle)}>
               {this._renderImage(imageSrc, imageStyle)}
               <View style={StyleSheet.flatten(defaultTextContainer)}>
-                {this._renderTitle()}
-                {this._renderMessage()}
+                {this._renderTitle(title)}
+                {this._renderMessage(message)}
               </View>
               {this._renderCancel(showCancel)}
             </ContentView>
diff --git a/Example/App.js b/Example/App.js
index b9be2ccc..df174e43 100644
--- a/Example/App.js
+++ b/Example/App.js
@@ -1,16 +1,56 @@
 import React, {useRef, useState, useEffect} from 'react';
 import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
-import {
-  PURPLE_COLOR,
-  WHITE_COLOR,
-  ITEMS,
-  ReactNativeLogo,
-  InfoIcon,
-} from './constants';
 import List from './List';
 import DropdownAlert from 'react-native-dropdownalert';
+const Color = {
+  info: '#2B73B6',
+  warn: '#cd853f',
+  success: '#32A54A',
+  error: '#cc3232',
+  purple: '#6441A4',
+  white: 'whitesmoke',
+};
+const InfoIcon = require('./assets/info.png');
 
 const App = () => {
+  const items = [
+    {
+      color: Color.info,
+      type: 'info',
+      message:
+        'System maintenance starts at midnight. System will be down for approximately 3 hours.',
+    },
+    {
+      color: Color.warn,
+      type: 'warn',
+      message:
+        'Warning: Low disk space. Please add more at your earliest convenience.',
+    },
+    {
+      color: Color.error,
+      type: 'error',
+      message:
+        'Sorry, we are having some technical difficulties. Please try again.',
+    },
+    {
+      color: Color.success,
+      type: 'success',
+      message: 'Order complete. Please check your email for further details.',
+    },
+    {
+      color: Color.purple,
+      type: 'custom',
+      message: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+    },
+    {type: 'close', title: 'close'},
+    {type: 'show', title: 'enqueue all alerts'},
+    {type: 'clear', title: 'clear queue'},
+  ];
+  const reactNativeLogo = 'https://reactnative.dev/docs/assets/favicon.png';
+
   const [queueSize, setQueueSize] = useState(0);
   let dropDownAlertRef = useRef();
 
@@ -27,6 +67,8 @@ const App = () => {
       throw 'Error fetch data'; // example thrown error
     } catch (error) {
       dropDownAlertRef.alertWithType('error', 'Error', error);
+    } finally {
+      _updateQueueSize();
     }
   };
 
@@ -65,13 +107,13 @@ const App = () => {
         _showAlertQueue();
         break;
       default:
-        const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
+        const inMilliSeconds = Math.floor(Math.random() * 6000 + 1);
         const inSeconds = (inMilliSeconds / 1000).toFixed(2);
         const title = `${item.type} closes in ${inSeconds}s`;
         let payload;
         if (item.type === 'custom') {
           // example using remote image source in payload
-          payload = {source: ReactNativeLogo};
+          payload = {source: reactNativeLogo};
         } else if (item.type === 'info') {
           // example using local image source in payload
           payload = {source: InfoIcon};
@@ -114,7 +156,7 @@ const App = () => {
     <View style={styles.container}>
       <SafeAreaView>
         <Text style={styles.size}>{`Alert queue size: ${queueSize}`}</Text>
-        <List items={ITEMS} onSelect={_onSelect} />
+        <List items={items} onSelect={_onSelect} />
       </SafeAreaView>
       <DropdownAlert
         ref={ref => {
@@ -137,11 +179,11 @@ const App = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: WHITE_COLOR,
+    backgroundColor: Color.white,
     justifyContent: 'center',
   },
   content: {
-    backgroundColor: PURPLE_COLOR,
+    backgroundColor: Color.purple,
   },
   size: {
     textAlign: 'center',
diff --git a/Example/constants.js b/Example/constants.js
deleted file mode 100644
index ccab8d37..00000000
--- a/Example/constants.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export const PURPLE_COLOR = '#6441A4';
-export const WHITE_COLOR = 'whitesmoke';
-export const ITEMS = [
-  {
-    color: '#2B73B6',
-    type: 'info',
-    message:
-      "System is going down at 12 AM tonight for routine maintenance. We'll notify you when the system is back online.",
-  },
-  {
-    color: '#cd853f',
-    type: 'warn',
-    message:
-      'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.',
-  },
-  {
-    color: '#cc3232',
-    type: 'error',
-    message:
-      "Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.",
-  },
-  {
-    color: '#32A54A',
-    type: 'success',
-    message:
-      "Thank you for your order. We will email and charge you when it's on it's way.",
-  },
-  {
-    color: PURPLE_COLOR,
-    type: 'custom',
-    message:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-  },
-  {type: 'close', title: 'close'},
-  {type: 'show', title: 'enqueue all alerts'},
-  {type: 'clear', title: 'clear queue'},
-];
-export const ReactNativeLogo =
-  'https://reactnative.dev/docs/assets/favicon.png';
-export const InfoIcon = require('./assets/info.png');
diff --git a/__tests__/__snapshots__/DropdownAlert-test.js.snap b/__tests__/__snapshots__/DropdownAlert-test.js.snap
index f1c83a3b..05371ded 100644
--- a/__tests__/__snapshots__/DropdownAlert-test.js.snap
+++ b/__tests__/__snapshots__/DropdownAlert-test.js.snap
@@ -65,35 +65,10 @@ exports[`DropdownAlert component Snapshots expect to render 1`] = `
           style={
             Object {
               "flex": 1,
-              "paddingHorizontal": 8,
+              "padding": 8,
             }
           }
-        >
-          <Text
-            numberOfLines={1}
-            style={
-              Object {
-                "backgroundColor": "transparent",
-                "color": "white",
-                "fontSize": 16,
-                "fontWeight": "bold",
-                "textAlign": "left",
-              }
-            }
-          />
-          <Text
-            numberOfLines={3}
-            style={
-              Object {
-                "backgroundColor": "transparent",
-                "color": "white",
-                "fontSize": 14,
-                "fontWeight": "normal",
-                "textAlign": "left",
-              }
-            }
-          />
-        </View>
+        />
       </ForwardRef(SafeAreaView)>
     </View>
   </TouchableOpacity>
diff --git a/docs/PROPS.md b/docs/PROPS.md
index a8e510a6..a049c8bf 100644
--- a/docs/PROPS.md
+++ b/docs/PROPS.md
@@ -63,7 +63,7 @@
 | Name                    |  Type  | Description                                                                                                                                                                     | Default                                                |
 | ----------------------- | :----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
 | `defaultContainer`      | Object | Style for inner view container (**override paddingTop with this**)                                                                                                              | `{ flexDirection: 'row', padding: 8 }`                 |
-| `defaultTextContainer`  | Object | Style for inner text container (holds title and message)                                                                                                                        | `{ flex: 1, paddingHorizontal: 8 }`                    |
+| `defaultTextContainer`  | Object | Style for inner text container (holds title and message)                                                                                                                        | `{ flex: 1, padding: 8 }`                              |
 | `wrapperStyle`          | Object | styles for the view that wraps the container. For [React Native Web](https://github.com/necolas/react-native-web) support you might want to set this to `{ position: 'fixed' }` | `null`                                                 |
 | `containerStyle`        | Object | styles for container for custom type only                                                                                                                                       | `{ flexDirection: 'row', backgroundColor: '#202020' }` |
 | `contentContainerStyle` | Object | styles for ContentView                                                                                                                                                          | `{ flex: 1, flexDirection: 'row' }`                    |