feat: add calloutView and other extension properties

README.md

@@ -19,10 +19,17 @@ npm install react-native-callout
 
 ### Usage example
 ```javascript
-var MJCallout = require('react-native-callout');
+import MJCallout from 'react-native-callout'
+import {Text,View} from 'react-native'
+import React, {Component} from 'react'
 
-var Application = React.createClass({
-  render: function() {
+class Application extends Component{
+
+  constructor(props) {
+      super(props);
+  }
+
+  render() {
     return (
       <View>
         <Text>
@@ -32,17 +39,30 @@ var Application = React.createClass({
           <MJCallout width={200} visibility={1} calloutText={"Sample Callout Text"} arrowDirection={'up'}>
           </MJCallout>
         </View>
+
+        <View style={{position:'absolute', top:300, left:300}}>
+          <MJCallout width={200} visibility={1}
+            backgroundColor={'#fff'}
+            calloutView={<Text style={{height:60,margin: 5}}>my custom calloutView</Text>}
+            arrowDirection={'down'}/>
+        </View>
+
       </View>
     );
   }
-});
+}
 ```
 
 ### Properties
 * `width` (Number) - Width of the Callout (default is 200)
+* `backgroundColor` (String) - Sets the background color of the callout (default is #EF4836)
 * `arrowDirection` (Enum) - Directions for the arrow of the callout, namely: up, down, left & right
 * `visibility` (Number) - Set 0 for hiding the callout and 1 to show the callout
 * `calloutText` (String) - Text to be shown inside the callout,
+* `calloutView` (Component) - Component to be shown inside the callout (takes precedence over `calloutText`),
+* `textStyle` ({}) - Extends the styles of the `calloutText` view
+* `caretStyle`: ({}) - Extends the styles of the caret of the callout
+* `calloutSquareStyle` ({}) - Extends the styles of the container of the callout
 
 ### Live example
 ```sh

index.js

@@ -1,175 +1,194 @@
 import React, { Component } from 'react';
 import {
+  Animated,
   StyleSheet,
   Text,
   View,
-  TextInput,
-  TouchableWithoutFeedback,
-  TouchableHighlight,
-  Animated,
 } from 'react-native';
 
+export default class MJCallout extends Component {
+  static defaultProps = {
+    backgroundColor: 'black',
+    textStyle: {},
+    caretStyle: {},
+    calloutSquareStyle: {},
+  };
+
+  renderCallOutInner = () => {
+    if (this.props.calloutView) {
+      return this.props.calloutView
+    }
 
-class MJCallout extends Component {
-
-  constructor(props) {
-    super(props);
+    return (
+      <Text style={[styles.labelHeader, this.props.textStyle]}>
+        {this.props.calloutText}
+      </Text>
+    )
   }
 
-  render() {
+  renderButton = () => {
+    const { buttonTitle, buttonColor } = this.props;
+
     return (
-      <View>
-      {this.renderCallOutSubviews()}
+      <View style={[styles.button, { backgroundColor: buttonColor }]}>
+        <Text style={styles.buttonTitle}>
+          {`${buttonTitle}`}
+        </Text>
       </View>
     )
   }
 
-  renderCallOutSubviews() {
-    if(this.props.arrowDirection == 'up') {
-      return (
-        <Animated.View style={[styles.container, styles.flexDirectionColumn,
-          {
-            opacity: this.props.visibility,
-            width:this.props.width,
-          }
-        ]}>
-          <View style = {styles.calloutTriangle}>
-          </View>
+  renderCallOutSubviews = () => {
+    const containerStyle = [
+      styles.container,
+      { opacity: this.props.visibility, width: this.props.width },
+    ];
+
+    const triangleStyle = [
+      styles.calloutTriangle,
+      { borderBottomColor: this.props.buttonTitle && this.props.buttonColor && this.props.arrowDirection === 'down' ? this.props.buttonColor : this.props.backgroundColor },
+    ];
+
+    const calloutStyle = [
+      styles.calloutSquare,
+      { backgroundColor: this.props.backgroundColor },
+    ];
+
+    switch (this.props.arrowDirection) {
+      case 'up': {
+        containerStyle.push(styles.flexDirectionColumn);
+        break;
+      }
+
+      case 'down': {
+        containerStyle.push(styles.flexDirectionColumn);
+        triangleStyle.push(styles.transformTriangleDown);
+        break;
+      }
+
+      case 'left': {
+        triangleStyle.push(styles.transformTriangleLeft);
+        break;
+      }
+
+      case 'right': {
+        triangleStyle.push(styles.transformTriangleRight);
+        break;
+      }
+
+      default:
 
-          <View style = {styles.calloutSquare}>
-            <Text style={styles.labelHeader}>
-              {this.props.calloutText}
-            </Text>
-          </View>
-        </Animated.View>
-      );
     }
-    else if(this.props.arrowDirection == 'down') {
-      return (
-        <Animated.View style={[styles.container, styles.flexDirectionColumn,
-          {
-            opacity: this.props.visibility,
-            width:this.props.width,
-          }
-        ]}>
-          <View style = {styles.calloutSquare}>
-            <Text style={styles.labelHeader}>{this.props.calloutText}</Text>
-          </View>
 
-          <View style = {[styles.calloutTriangle, styles.transformTriangleDown]}>
-          </View>
-        </Animated.View>
-      );
-    }
-    else if(this.props.arrowDirection == 'right'){
-      return (
-        <Animated.View style={[styles.container,
-          {
-            opacity: this.props.visibility,
-            width:this.props.width,
-          }
-        ]}>
-          <View style = {[styles.calloutTriangle, styles.transformTriangleRight]}>
-          </View>
+    triangleStyle.push(this.props.caretStyle);
+    calloutStyle.push(this.props.calloutSquareStyle);
 
-          <View style = {styles.calloutSquare}>
-            <Text style={styles.labelHeader}>
-              {this.props.calloutText}
-            </Text>
+    if (['up', 'right'].includes(this.props.arrowDirection)) {
+      return (
+        <Animated.View style={containerStyle}>
+          <View style={triangleStyle}/>
+          <View style={calloutStyle}>
+            {this.renderCallOutInner()}
+            {this.props.buttonTitle && this.renderButton()}
           </View>
         </Animated.View>
       );
-    }
-    else {
+    } else if (['down', 'left'].includes(this.props.arrowDirection)) {
       return (
-        <Animated.View style={[styles.container,
-          {
-            opacity: this.props.visibility,
-            width:this.props.width,
-          }
-        ]}>
-          <View style = {styles.calloutSquare}>
-            <Text style={styles.labelHeader}>{this.props.calloutText}</Text>
-          </View>
-
-          <View style = {[styles.calloutTriangle, styles.transformTriangleLeft]}>
+        <Animated.View style={containerStyle}>
+          <View style={calloutStyle}>
+            {this.renderCallOutInner()}
+            {this.props.buttonTitle && this.renderButton()}
           </View>
+          <View style={triangleStyle}/>
         </Animated.View>
       );
     }
+
+    return null; // arrowDirection prop is incorrect
+  }
+
+  render() {
+    return (
+      <View onLayout={event => {
+          if (this.props.onLayout) {
+            this.props.onLayout(event);
+          }
+        }}>
+        {this.renderCallOutSubviews()}
+      </View>
+    )
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     alignItems: 'flex-start',
     flexDirection: 'row',
   },
-
   flexDirectionColumn: {
-    width:300,
-    marginTop:-18,
+    marginTop: -18,
+    marginHorizontal: 15,
     flexDirection: 'column',
   },
-
   calloutSquare: {
-    backgroundColor: '#EF4836',
-    flex:1,
+    backgroundColor: 'black',
+    flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
     borderRadius: 8,
-    height:40,
   },
-
   calloutTriangle: {
     backgroundColor: 'transparent',
     width: 20,
     height: 20,
 
-    alignSelf:'center',
+    alignSelf: 'center',
     marginLeft: 20,
 
     borderStyle: 'solid',
-    borderBottomColor: '#EF4836',
-    borderBottomWidth:15,
+    borderBottomColor: 'black',
+    borderBottomWidth: 15,
 
-    borderLeftWidth:10,
+    borderLeftWidth: 10,
     borderLeftColor: 'transparent',
 
-    borderRightWidth:10,
+    borderRightWidth: 10,
     borderRightColor: 'transparent',
   },
-
   transformTriangleDown: {
-    transform: [
-      {rotate: '180deg'}
-    ]
+    transform: [{ rotate: '180deg' }],
   },
-
   transformTriangleLeft: {
-    marginLeft:-5,
-    marginRight:-1,
-    alignSelf:'center',
-    transform: [
-      {rotate: '90deg'}
-    ]
+    marginLeft: -5,
+    marginRight: -1,
+    alignSelf: 'center',
+    transform: [{ rotate: '90deg' }],
   },
-
   transformTriangleRight: {
-    marginLeft:-5,
-    marginRight:-1,
-    alignSelf:'center',
-    transform: [
-      {rotate: '270deg'}
-    ]
+    marginLeft: -5,
+    marginRight: -1,
+    alignSelf: 'center',
+    transform: [{ rotate: '270deg' }],
   },
-
   labelHeader : {
     margin: 20,
     color: 'white',
     fontWeight: '500',
   },
+  button: {
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: -10,
+  },
+  buttonTitle: {
+    fontSize: 17,
+    color: 'white',
+    fontWeight: '500',
+  },
 })
 
-MJCallout.propTypes = {arrowDirection: React.PropTypes.oneOf(['up', 'down', 'left', 'right'])};
-module.exports = MJCallout;
+MJCallout.propTypes = {
+  arrowDirection: React.PropTypes.oneOf(['up', 'down', 'left', 'right'])
+};

package.json

@@ -16,7 +16,8 @@
     "react-component",
     "ios",
     "callout",
-    "alert"
+    "alert",
+    "android"
   ],
   "author": {
     "name": "Mayur Joshi",
@@ -28,6 +29,6 @@
   },
   "homepage": "https://github.com/mayuur/react-native-callout",
   "peerDependencies": {
-    "react-native": ">= 0.9.0 || 0.11.0-rc"
+    "react-native": ">= 0.30.0"
   }
 }