Adding custom view to swipeable component

Summary: as title

Reviewed By: fred2028

Differential Revision: D8550184

fbshipit-source-id: 5ba72538fae11d75a82568774dd937b4493e7292

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -11,7 +11,6 @@
 'use strict';
 
 const Image = require('Image');
-const PropTypes = require('prop-types');
 const React = require('React');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
@@ -27,43 +26,37 @@ import type {ImageSource} from 'ImageSource';
  */
 class SwipeableQuickActionButton extends React.Component<{
   accessibilityLabel?: string,
-  imageSource: ImageSource | number,
+  imageSource?: ?(ImageSource | number),
   imageStyle?: ?ViewPropTypes.style,
+  mainView?: ?React.Node,
   onPress?: Function,
   style?: ?ViewPropTypes.style,
   testID?: string,
   text?: ?(string | Object | Array<string | Object>),
   textStyle?: ?ViewPropTypes.style,
 }> {
-  static propTypes = {
-    accessibilityLabel: PropTypes.string,
-    imageSource: Image.propTypes.source.isRequired,
-    imageStyle: Image.propTypes.style,
-    onPress: PropTypes.func,
-    style: ViewPropTypes.style,
-    testID: PropTypes.string,
-    text: PropTypes.string,
-    textStyle: Text.propTypes.style,
-  };
-
   render(): React.Node {
-    if (!this.props.imageSource && !this.props.text) {
+    if (!this.props.imageSource && !this.props.text && !this.props.mainView) {
       return null;
     }
-
+    const mainView = this.props.mainView ? (
+      this.props.mainView
+    ) : (
+      <View style={this.props.style}>
+        <Image
+          accessibilityLabel={this.props.accessibilityLabel}
+          source={this.props.imageSource}
+          style={this.props.imageStyle}
+        />
+        <Text style={this.props.textStyle}>{this.props.text}</Text>
+      </View>
+    );
     return (
       <TouchableHighlight
         onPress={this.props.onPress}
         testID={this.props.testID}
         underlayColor="transparent">
-        <View style={this.props.style}>
+        <View style={this.props.style}>{mainView}</View>
-          <Image
-            accessibilityLabel={this.props.accessibilityLabel}
-            source={this.props.imageSource}
-            style={this.props.imageStyle}
-          />
-          <Text style={this.props.textStyle}>{this.props.text}</Text>
-        </View>
       </TouchableHighlight>
     );
   }