1.0.4 and readme

Author: alimek

Doc/android.gif

@@ -1,18 +1,46 @@
 # react-native-tooltip-menu
 
-Currently works only with `iOS`. `Android` coming soon.
+Currently works only with `iOS` and `Android`.
 
-This component is a clickable button which will show you a tooltip menu with clickable menu.
-You can very easily customize how the component will look like.
+Component for specfied case. Left bottom button with nice looking menu tooltip with animation after click.
 
-![alt text](https://github.com/alimek/react-native-tooltip-menu/raw/master/Doc/screenshoot.gif "React Native ToolTip Menu")
+![alt text](https://github.com/alimek/react-native-tooltip-menu/raw/master/Doc/ios.gif "React Native ToolTip Menu")
+![alt text](https://github.com/alimek/react-native-tooltip-menu/raw/master/Doc/andorid.gif "React Native ToolTip Menu")
 
 
 # How to install
+ 
+Via NPM
 
 ```bash
 npm install react-native-tooltip-menu --save
 ```
+
+or via Yarn
+```bash
+yarn add react-native-tooltip-menu --save
+```
+
+then 
+
+```js
+import ReactNativeMenuTooltip from 'react-native-tooltip-menu';
+```
+
+# Configuration
+
+## ReactNativeTooltipMenu:
+
+| Property | Type | Default | Description |
+|----------------|---------------|-----------|--------------------------------------|
+| buttonComponent | |||
+| items | `Array` | | Items to be rendered in menu. Each of item requires `label` as `string` or `function` if you want to render your own component and `onClick` as `function` to be called when you click item. |
+| componentWrapperStyle | Object | Optional | Style `Object` if you want to overwrite wrapper for your `buttonComponent`
+| overlayStyle | Object | Optional | Style `Object` if you want to overwrite overlay style's.
+| widthType | `auto`, `half` or `full` | `half` | Menu items width. `Auto` = automatically set width to your longest test, `half` = always 50% your screen width, `full` = 100% screen width.
+| onRequestClose | `function` | Optional, default `() => {}` | Modal onRequestClose required function on Android 
+| labelContainerStyle | `Object` | Optional | Style `Object` if you want to change default `TooltipMenuItem` View's style.
+| labelStyle | `Object` | Optional | Style `Object` if you want to change default `TooltipMenuItem` Text's style.
 # Example
 
 ```js
@@ -60,7 +88,4 @@ class Example extends Component {
 
 AppRegistry.registerComponent('Example', () => Example);
 
-```
-
-# License
-
+```

Doc/screenshoot.gif renamed to Doc/ios.gif

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tooltip-menu",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "ReactNative component showing tooltip with menu items.",
   "main": "src/index.js",
   "scripts": {

README.md

@@ -3,6 +3,7 @@ import ReactNative from 'react-native';
 
 const {
   Text,
+  View,
   StyleSheet,
   TouchableOpacity,
 } = ReactNative;
@@ -13,14 +14,15 @@ const StylePropType = React.PropTypes.oneOfType([
 ]);
 
 const TooltipMenuItem = ({ onPress, containerStyle, label, labelStyle }) => (
-  <TouchableOpacity style={[styles.container, containerStyle]} onPress={onPress}>
-    {
-      typeof label === 'string' ?
-        <Text style={[labelStyle]}>{label}</Text> :
-        label()
-    }
-
-  </TouchableOpacity>
+  <View style={[styles.container, containerStyle]}>
+    <TouchableOpacity onPress={onPress}>
+      {
+        typeof label === 'string' ?
+          <Text style={[labelStyle]}>{label}</Text> :
+          label()
+      }
+    </TouchableOpacity>
+  </View>
 );
 
 TooltipMenuItem.propTypes = {

package.json

@@ -91,7 +91,8 @@ class Tooltip extends React.Component {
       labelContainerStyle,
       labelStyle,
     } = this.props;
-    const { isModalOpen, onRequestClose } = this.state;
+    const { isModalOpen } = this.state;
+    const { onRequestClose } = this.props;
     const widthStyle = mapWight(widthType);
 
     return (
@@ -110,7 +111,11 @@ class Tooltip extends React.Component {
           onRequestClose={onRequestClose}
         >
           <View style={[styles.overlay, overlayStyle]}>
-            <TouchableOpacity activeOpacity={1} focusedOpacity={1} style={{ flex: 1 }} onPress={isModalOpen ? this.hideModal : this.openModal}>
+            <TouchableOpacity
+              activeOpacity={1}
+              focusedOpacity={1} style={{ flex: 1 }}
+              onPress={isModalOpen ? this.hideModal : this.openModal}
+            >
               <View style={[styles.component]}>
                 <Animated.View
                   style={[
@@ -139,8 +144,8 @@ class Tooltip extends React.Component {
                       />
                     );
                   })}
-                  <View style={styles.triangle}/>
                 </Animated.View>
+                <Animated.View style={[styles.triangle, { opacity: this.state.opacity }]} />
                 <TouchableOpacity onPress={isModalOpen ? this.hideModal : this.openModal}>
                   {buttonComponent}
                 </TouchableOpacity>
@@ -166,6 +171,8 @@ Tooltip.propTypes = {
   ).isRequired,
   componentWrapperStyle: React.PropTypes.object,
   overlayStyle: React.PropTypes.object,
+  labelContainerStyle: React.PropTypes.object,
+  labelStyle: React.PropTypes.object,
   widthType: React.PropTypes.oneOf([
     'auto',
     'half',
@@ -198,15 +205,14 @@ const styles = StyleSheet.create({
   tooltipContainer: {
     backgroundColor: 'white',
     borderRadius: 10,
-    marginBottom: 10,
     position: 'absolute',
   },
   triangle: {
     position: 'absolute',
-    bottom: -10,
-    marginLeft: 22,
-    width: 0,
-    height: 0,
+    top: -10,
+    left: 22,
+    width: 10,
+    height: 10,
     backgroundColor: 'transparent',
     borderStyle: 'solid',
     borderTopWidth: 10,