Generate documentation.

Author: JanidHam

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_STORE
+*.log

README.md

@@ -0,0 +1,67 @@
+# react-native-message-dialog
+
+A simple, dialog message component with callback action like Airbnb. Ideal for showing errors, info and warnings.
+
+![](assets/message-view.gif)
+
+
+## Installation
+
+If using npm:
+
+```
+npm i react-native-message-dialog
+```
+
+## Usage
+
+```
+import Message from 'react-native-message-dialog'
+```
+
+Simply place a `<Message />` inside of any compnent.
+
+```
+<View style={{ flex: 1 }}>
+    <Message visible={true} />
+</View>
+```
+
+### Styling Usage
+Message is fully customizable using the `height, textStatus, textCb,  textMessage, textStatusStyle and textCbStyle` props.
+
+Example usage to change dots color:
+
+```
+const textStatusStyle = {
+    color: 'red',
+};
+
+return (
+    <View style={{flex: 1}}>
+        <Message visible={true} textStatusStyle={textStatusStyle} />
+    </View>
+)
+```
+
+## Documentation
+
+### EllipsisLoading Component
+| Name            | Description                                           | Default           | Type     |
+|-----------------|-------------------------------------------------------|-------------------|----------|
+| visible         | Determinates if message container is visible          | false             | Boolean  |
+| onPress         | Callback to retry an action                           | () => ({})        | Function |
+| textStatus      | Left text of the message container                    | Error             | String   |
+| textCb          | Right text of the message container (Callback action) | Retry             | String   |
+| textMessage     | Center text of the message container                  | Please try again. | String   |
+| textStatusStyle | Style to apply to textMessage                         | Object            | Object   |
+| textCbStyle     | Style to apply to textCb                              | Object            | Object   |
+
+## Contributing
+Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
+
+## Author
+Janid Ham | [https://janidham.com](https://janidham.com)
+
+## License
+[MIT](./LICENSE)

assets/message-view.gif

@@ -0,0 +1,3 @@
+import Message from './src/Message'
+
+export default Message

index.js

@@ -0,0 +1,41 @@
+{
+  "name": "react-native-message-dialog",
+  "version": "1.0.0",
+  "description": "A simple, dialog message component with callback action like Airbnb. Ideal for showing errors, info and warnings.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JanidHam/react-native-message-dialog.git"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "react-native-component",
+    "react",
+    "react native",
+    "mobile",
+    "ios",
+    "android",
+    "ui",
+    "message",
+    "message-component",
+    "react-native-message-dialog",
+    "dialog",
+    "show message",
+    "error message",
+    "info message",
+    "warning message"
+  ],
+  "author": "Janid Ham <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JanidHam/react-native-message-dialog/issues"
+  },
+  "homepage": "https://github.com/JanidHam/react-native-message-dialog#readme",
+  "devDependencies": {
+    "metro-react-native-babel-preset": "^0.56.0"
+  }
+}

package.json

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Animated,
+  TouchableOpacity,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native'
+
+const COLOR_UNDER_LINE = '#d6d7da'
+const COLOR_TEXT_STATUS = '#f37d9e'
+const COLOR_TEXT_MESSAGE = '#565354'
+const COLOR_CB = '#69cddd'
+const DEFAULT_MESSAGE = 'Please try again.'
+const DEFAULT_TEXT_STATUS = 'Error'
+const DEFAULT_CB_TEXT_STATUS = 'Retry'
+const DEFAULT_HEIGHT = 60
+
+const style = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    width: '100%',
+    paddingHorizontal: 15,
+    shadowOpacity: 0.8,
+    shadowRadius: 3,
+    shadowColor: COLOR_UNDER_LINE,
+    shadowOffset: { height: 0, width: 0 },
+    elevation: 10,
+    backgroundColor: 'white',
+  },
+  textStatusContainer: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 50,
+  },
+  textStatusStyle: {
+    color: COLOR_TEXT_STATUS,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  textMessageContainer: {
+    flex: 2,
+    alignItems: 'flex-start',
+  },
+  textMessage: {
+    color: COLOR_TEXT_MESSAGE,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  cbText: {
+    color: COLOR_CB,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})
+
+const Message = props => {
+  const [animationState] = useState({
+    height: new Animated.Value(0),
+  })
+  const {
+    visible = false,
+    onPress = () => ({}),
+    textStatus = DEFAULT_TEXT_STATUS,
+    textCb = DEFAULT_CB_TEXT_STATUS,
+    textMessage = DEFAULT_MESSAGE,
+    textStatusStyle,
+    textCbStyle,
+  } = props
+
+  useEffect(() => {
+    Animated.timing(animationState.height, {
+      toValue: visible ? DEFAULT_HEIGHT : 0,
+      duration: 150,
+    }).start()
+  })
+
+  return (
+    <Animated.View style={[{ height: animationState.height }, style.container]}>
+      <View style={style.textStatusContainer}>
+        <Text style={[style.textStatusStyle, textStatusStyle]}>
+          {textStatus}
+        </Text>
+      </View>
+      <View style={style.textMessageContainer}>
+        <Text style={style.textMessage}>{textMessage}</Text>
+      </View>
+      <View>
+        <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
+          <Text style={[style.cbText, textCbStyle]}>{textCb}</Text>
+        </TouchableOpacity>
+      </View>
+    </Animated.View>
+  )
+}
+
+export default Message