fixed useViewFrame for android

Author: iyegoroff

README.md

@@ -22,13 +22,31 @@ React-Native text gradient component for iOS & Android.
 ## Status
 
 - iOS - component works as drop-in replacement for standard `Text` component, e.g. it is possible to have nested gradients;
-- Android - WIP, currently only basic 'wrapper'-like behavior without nesting is supported.
-- React-Native - supported versions 0.50 - 0.52 , component is not usable with 0.53.0 because of this rn [bug](https://github.com/facebook/react-native/issues/17933)
+- Android - WIP, currently only basic 'wrapper'-like behavior without nesting is supported;
+- React-Native - supported version >0.50, except of 0.53.0.
 
 ## Usage
 
 ### LinearTextGradient
-Interface is similar to https://github.com/react-native-community/react-native-linear-gradient#examples
+Interface is similar to `Text` & [LinearGradient](https://github.com/react-native-community/react-native-linear-gradient)
+
+#### colors
+An array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.
+  
+#### start
+An optional object of the following type: `{ x: number, y: number }`. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: `{ x: 0.1, y: 0.1 }` means that the gradient will start 10% from the top and 10% from the left.
+ 
+#### end
+Same as start, but for the end of the gradient.
+ 
+#### locations
+An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in `colors` prop. Example: `[0.1, 0.75, 1]` means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.
+
+#### useViewFrame
+Optional. If true gradient will be calculated for text view background frame rather than text frame.
+
+<img src="img/useViewFrame.png" width="300">
+
 ```javascript
 import { LinearTextGradient } from 'react-native-text-gradient';
 
@@ -45,7 +63,7 @@ import { LinearTextGradient } from 'react-native-text-gradient';
 
 iOS                                            |  Android
 :---------------------------------------------:|:---------------------------------------------:
-<img src="ios.png" align="left" height="275">  |  <img src="android.jpg" align="right" height="275">
+<img src="img/ios.png" align="left" height="275">  |  <img src="img/android.jpg" align="right" height="275">
 
 
 ## Caveats

android/src/main/java/iyegoroff/RNTextGradient/Linear/RNLinearTextGradientSpan.java

@@ -22,7 +22,9 @@ public class RNLinearTextGradientSpan extends CharacterStyle implements UpdateAp
   private float[] mLocations;
   private float[] mStart;
   private float[] mEnd;
+  private boolean mUseViewFrame;
   private int mMaxWidth;
+  private int mMaxHeight;
   private int mTextStart;
   private int mTextEnd;
   private String mText;
@@ -32,7 +34,9 @@ public RNLinearTextGradientSpan(
     int[] colors,
     float[] start,
     float[] end,
+    boolean useViewFrame,
     float maxWidth,
+    float maxHeight,
     int textStart,
     int textEnd,
     String text
@@ -41,7 +45,9 @@ public RNLinearTextGradientSpan(
     mColors = colors;
     mStart = start;
     mEnd = end;
+    mUseViewFrame = useViewFrame;
     mMaxWidth = (int)maxWidth;
+    mMaxHeight = (int)maxHeight;
     mTextStart = textStart;
     mTextEnd = textEnd;
     mText = text;
@@ -73,16 +79,22 @@ public void updateDrawState(TextPaint paint) {
 
       Rect rect = isMultiline(paint) ? multiLineTextBounds(paint) : singleLineTextBounds(paint);
 
-      Log.d(ReactConstants.TAG, mText.substring(mTextStart, mTextEnd) + ": "
-      + String.valueOf(rect) + " "
-      + String.valueOf(rect.width()) + " "
-      + String.valueOf(rect.height()));
+      // Log.d(ReactConstants.TAG, mText.substring(mTextStart, mTextEnd) + ": "
+      // + String.valueOf(rect) + " "
+      // + String.valueOf(rect.width()) + " "
+      // + String.valueOf(rect.height()));
+
+      // Log.d(ReactConstants.TAG, "MaxW " + String.valueOf(mMaxWidth) + " width " + String.valueOf(rect.width()));
+      // Log.d(ReactConstants.TAG, "MaxH " + String.valueOf(mMaxHeight) + " height " + String.valueOf(rect.height()));
+
+      int width = mUseViewFrame ? mMaxWidth : rect.width();
+      int height = mUseViewFrame ? mMaxHeight : rect.height();
 
       LinearGradient gradient = new LinearGradient(
-        rect.left + mStart[0] * rect.width(),
-        rect.top + mStart[1] * rect.height(),
-        rect.left + mEnd[0] * rect.width(),
-        rect.top + mEnd[1] * rect.height(),
+        rect.left + mStart[0] * width,
+        rect.top + mStart[1] * height,
+        rect.left + mEnd[0] * width,
+        rect.top + mEnd[1] * height,
         mColors,
         mLocations,
         Shader.TileMode.CLAMP

android/src/main/java/iyegoroff/RNTextGradient/Linear/RNShadowLinearTextGradient.java

@@ -48,14 +48,17 @@ protected RNSetGradientSpanOperation createSpan(
     SpannableStringBuilder builder,
     int start,
     int end,
-    float maxWidth
+    float maxWidth,
+    float maxHeight
   ) {
     RNLinearTextGradientSpan span = new RNLinearTextGradientSpan(
       mLocations,
       mColors,
       mStart,
       mEnd,
+      mUseViewFrame,
       maxWidth,
+      maxHeight,
       start,
       end,
       builder.toString()

android/src/main/java/iyegoroff/RNTextGradient/RNShadowTextGradient.java

@@ -24,6 +24,7 @@ public abstract class RNShadowTextGradient extends ReactTextShadowNode {
 
   protected float[] mLocations;
   protected int[] mColors;
+  protected boolean mUseViewFrame;
 
   @ReactProp(name = "locations")
   public void setLocations(ReadableArray locations) {
@@ -41,7 +42,6 @@ public void setLocations(ReadableArray locations) {
 
   @ReactProp(name = "colors")
   public void setColors(ReadableArray colors) {
-    Log.d(ReactConstants.TAG, String.valueOf(colors));
     if (colors != null) {
       int[] _colors = new int[colors.size()];
 
@@ -54,6 +54,13 @@ public void setColors(ReadableArray colors) {
     }
   }
 
+  @ReactProp(name = "useViewFrame")
+  public void setUseViewFrame(boolean useViewFrame) {
+    mUseViewFrame = useViewFrame;
+
+    markUpdated();
+  }
+
   @Override
   public boolean dispatchUpdates(
     float absoluteX,
@@ -92,7 +99,8 @@ private void updateGradient() {
         spannableWithGradient(
           (Spannable) getParentFieldValue(this, fieldName),
           this,
-          getLayoutWidth()
+          getLayoutWidth(),
+          getLayoutHeight()
         )
       );  
     }
@@ -102,17 +110,19 @@ protected abstract RNSetGradientSpanOperation createSpan(
     SpannableStringBuilder builder,
     int start,
     int end,
-    float maxWidth
+    float maxWidth,
+    float maxHeight
   );
 
   protected static Spannable spannableWithGradient(
     Spannable spannable,
     RNShadowTextGradient textCSSNode,
-    float maxWidth
+    float maxWidth,
+    float maxHeight
   ) {
     List<RNSetGradientSpanOperation> ops = new ArrayList<>();
     SpannableStringBuilder gradientBuilder = new SpannableStringBuilder();
-    buildSpannedGradientFromTextCSSNode(textCSSNode, gradientBuilder, ops, maxWidth);
+    buildSpannedGradientFromTextCSSNode(textCSSNode, gradientBuilder, ops, maxWidth, maxHeight);
 
     for (int i = ops.size() - 1; i >= 0; i--) {
     //for (int i = 0; i < ops.size(); i++) {
@@ -126,7 +136,8 @@ protected static void buildSpannedGradientFromTextCSSNode(
     ReactTextShadowNode textGradientShadowNode,
     SpannableStringBuilder builder,
     List<RNSetGradientSpanOperation> ops,
-    float maxWidth
+    float maxWidth,
+    float maxHeight
   ) {
     int start = builder.length();
 
@@ -137,7 +148,13 @@ protected static void buildSpannedGradientFromTextCSSNode(
         builder.append(((ReactRawTextShadowNode) child).getText());
 
       } else if (child instanceof ReactTextShadowNode) {
-        buildSpannedGradientFromTextCSSNode((ReactTextShadowNode) child, builder, ops, maxWidth);
+        buildSpannedGradientFromTextCSSNode(
+          (ReactTextShadowNode) child,
+          builder,
+          ops,
+          maxWidth,
+          maxHeight
+        );
 
       } else if (child instanceof ReactTextInlineImageShadowNode) {
         builder.append(
@@ -151,9 +168,10 @@ protected static void buildSpannedGradientFromTextCSSNode(
     int end = builder.length();
 
     if (end >= start && textGradientShadowNode instanceof RNShadowTextGradient) {
-      ops.add(
-        ((RNShadowTextGradient) textGradientShadowNode).createSpan(builder, start, end, maxWidth)
-      );
+      RNSetGradientSpanOperation spanOp = ((RNShadowTextGradient) textGradientShadowNode)
+        .createSpan(builder, start, end, maxWidth, maxHeight);
+
+      ops.add(spanOp);
     }
   }
 

android/src/main/java/iyegoroff/RNTextGradient/Radial/RNShadowRadialTextGradient.java

@@ -36,7 +36,8 @@ protected RNSetGradientSpanOperation createSpan(
     SpannableStringBuilder builder,
     int start,
     int end,
-    float maxWidth
+    float maxWidth,
+    float maxHeight
   ) {
     return null;
   }

android.jpg renamed to img/android.jpg

@@ -33,8 +33,6 @@ const createTextGradientClass = (
   const defaultPropAttributes = Object.keys(defaultProps)
     .reduce((acc, key) => { acc[key] = true; return acc; }, {});
 
-  const defaultStyle = { color: 'gray' };
-
   const viewConfig = {
     validAttributes: mergeFast(ReactNativeViewAttributes.UIView, {
       isHighlighted: true,
@@ -56,58 +54,6 @@ const createTextGradientClass = (
     uiViewClassName,
   };
 
-  /**
-   * A React component for displaying text.
-   *
-   * `Text` supports nesting, styling, and touch handling.
-   *
-   * In the following example, the nested title and body text will inherit the `fontFamily` from
-   *`styles.baseText`, but the title provides its own additional styles.  The title and body will
-  * stack on top of each other on account of the literal newlines:
-  *
-  * ```ReactNativeWebPlayer
-  * import React, { Component } from 'react';
-  * import { AppRegistry, Text, StyleSheet } from 'react-native';
-  *
-  * export default class TextInANest extends Component {
-  *   constructor(props) {
-  *     super(props);
-  *     this.state = {
-  *       titleText: "Bird's Nest",
-  *       bodyText: 'This is not really a bird nest.'
-  *     };
-  *   }
-  *
-  *   render() {
-  *     return (
-  *       <Text style={styles.baseText}>
-  *         <Text style={styles.titleText} onPress={this.onPressTitle}>
-  *           {this.state.titleText}{'\n'}{'\n'}
-  *         </Text>
-  *         <Text numberOfLines={5}>
-  *           {this.state.bodyText}
-  *         </Text>
-  *       </Text>
-  *     );
-  *   }
-  * }
-  *
-  * const styles = StyleSheet.create({
-  *   baseText: {
-  *     fontFamily: 'Cochin',
-  *   },
-  *   titleText: {
-  *     fontSize: 20,
-  *     fontWeight: 'bold',
-  *   },
-  * });
-  *
-  * // skip this line if using Create React Native App
-  * AppRegistry.registerComponent('TextInANest', () => TextInANest);
-  * ```
-  */
-
-  // $FlowFixMe(>=0.41.0)
   const TextGradient = createReactClass({
     displayName: 'TextGradient',
     propTypes: {
@@ -192,7 +138,6 @@ const createTextGradientClass = (
       testID: PropTypes.string,
       /**
        * Used to locate this view from native code.
-       * @platform android
        */
       nativeID: PropTypes.string,
       /**
@@ -231,7 +176,6 @@ const createTextGradientClass = (
         accessible: true,
         allowFontScaling: true,
         ellipsizeMode: 'tail',
-        disabled: false,
       };
     },
     getInitialState: function () {
@@ -242,9 +186,7 @@ const createTextGradientClass = (
     mixins: [NativeMethodsMixin],
     viewConfig: viewConfig,
     getChildContext() {
-      return {
-        isInAParentText: true
-      };
+      return { isInAParentText: true };
     },
     childContextTypes: {
       isInAParentText: PropTypes.bool
@@ -319,44 +261,33 @@ const createTextGradientClass = (
                   return this.props.pressRetentionOffset || PRESS_RECT_OFFSET;
                 };
               }
-              // $FlowFixMe(>=0.41.0)
               return setResponder;
             },
             onResponderGrant: function (e, dispatchID) {
-              // $FlowFixMe(>=0.41.0)
               this.touchableHandleResponderGrant(e, dispatchID);
               this.props.onResponderGrant &&
-                // $FlowFixMe(>=0.41.0)
                 this.props.onResponderGrant.apply(this, arguments);
             }.bind(this),
             onResponderMove: function (e) {
-              // $FlowFixMe(>=0.41.0)
               this.touchableHandleResponderMove(e);
               this.props.onResponderMove &&
-                // $FlowFixMe(>=0.41.0)
                 this.props.onResponderMove.apply(this, arguments);
             }.bind(this),
             onResponderRelease: function (e) {
-              // $FlowFixMe(>=0.41.0)
               this.touchableHandleResponderRelease(e);
               this.props.onResponderRelease &&
-                // $FlowFixMe(>=0.41.0)
                 this.props.onResponderRelease.apply(this, arguments);
             }.bind(this),
             onResponderTerminate: function (e) {
-              // $FlowFixMe(>=0.41.0)
               this.touchableHandleResponderTerminate(e);
               this.props.onResponderTerminate &&
-                // $FlowFixMe(>=0.41.0)
                 this.props.onResponderTerminate.apply(this, arguments);
             }.bind(this),
             onResponderTerminationRequest: function () {
               // Allow touchable or props.onResponderTerminationRequest to deny
               // the request
-              // $FlowFixMe(>=0.41.0)
               var allowTermination = this.touchableHandleResponderTerminationRequest();
               if (allowTermination && this.props.onResponderTerminationRequest) {
-                // $FlowFixMe(>=0.41.0)
                 allowTermination = this.props.onResponderTerminationRequest.apply(this, arguments);
               }
               return allowTermination;
@@ -370,6 +301,11 @@ const createTextGradientClass = (
         };
       }
 
+      newProps = {
+        ...newProps,
+        style: [{ color: 'gray' }, newProps.style],
+      };
+
       newProps.style = [
         { color: 'gray' },
         newProps.style
@@ -390,9 +326,7 @@ const createTextGradientClass = (
       if (Touchable.TOUCH_TARGET_DEBUG && newProps.onPress) {
         newProps = {
           ...newProps,
-          style: [this.props.style, {
-            color: 'magenta'
-          }],
+          style: [this.props.style, { color: 'magenta' }],
         };
       }
       if (this.context.isInAParentText) {