allow using react component passed on props (then ignores message)

Author: ivnnv

lib/Toast.js

@@ -14,12 +14,7 @@ class Toast extends Component {
     static durations = durations;
 
     static show = (message, options = {position: positions.BOTTOM, duration: durations.SHORT}) => {
-        return new RootSiblings(<ToastContainer
-            {...options}
-            visible={true}
-        >
-            {message}
-        </ToastContainer>);
+        return new RootSiblings(<ToastContainer message={message} {...options} visible={true} />);
     };
 
     static hide = toast => {

lib/ToastContainer.js

@@ -64,6 +64,8 @@ class ToastContainer extends Component {
     static propTypes = {
         ...ViewPropTypes,
         containerStyle: ViewPropTypes.style,
+        message: PropTypes.string,
+        component: PropTypes.element,
         duration: PropTypes.number,
         visible: PropTypes.bool,
         position: PropTypes.number,
@@ -236,24 +238,26 @@ class ToastContainer extends Component {
                     style={[
                         styles.containerStyle,
                         { marginHorizontal: windowWidth * ((1 - TOAST_MAX_WIDTH) / 2) },
-                        props.containerStyle,
                         props.backgroundColor && {backgroundColor: props.backgroundColor},
-                        {
-                            opacity: this.state.opacity
-                        },
+                        props.containerStyle,
+                        { opacity: this.state.opacity },
                         props.shadow && styles.shadowStyle,
                         props.shadowColor && {shadowColor: props.shadowColor}
                     ]}
                     pointerEvents="none"
                     ref={ele => this._root = ele}
                 >
-                    <Text style={[
-                        styles.textStyle,
-                        props.textStyle,
-                        props.textColor && {color: props.textColor}
-                    ]}>
-                        {this.props.children}
-                    </Text>
+                    {this.props.component ? (
+                        this.props.component
+                    ) : (
+                        <Text style={[
+                            styles.textStyle,
+                            props.textStyle,
+                            props.textColor && {color: props.textColor}
+                            ]}>
+                            {this.props.message}
+                        </Text>
+                    )}
                 </Animated.View>
             </TouchableWithoutFeedback>
         </View> : null;