com.facebook.react.uimanager.ViewProps Java Examples

@Test
public void testTextDecorationLineUnderlineLineThroughApplied() {
  UIManagerModule uiManager = getUIManagerModule();

  ReactRootView rootView = createText(
      uiManager,
      JavaOnlyMap.of(ViewProps.TEXT_DECORATION_LINE, "underline line-through"),
      JavaOnlyMap.of(ReactRawTextShadowNode.PROP_TEXT, "test text"));

  UnderlineSpan underlineSpan =
      getSingleSpan((TextView) rootView.getChildAt(0), UnderlineSpan.class);
  StrikethroughSpan strikeThroughSpan =
      getSingleSpan((TextView) rootView.getChildAt(0), StrikethroughSpan.class);
  assertThat(underlineSpan instanceof UnderlineSpan).isTrue();
  assertThat(strikeThroughSpan instanceof StrikethroughSpan).isTrue();
}
 

@ReactPropGroup(
  names = {
    ViewProps.BORDER_WIDTH,
    ViewProps.BORDER_LEFT_WIDTH,
    ViewProps.BORDER_RIGHT_WIDTH,
    ViewProps.BORDER_TOP_WIDTH,
    ViewProps.BORDER_BOTTOM_WIDTH,
    ViewProps.BORDER_START_WIDTH,
    ViewProps.BORDER_END_WIDTH,
  },
  defaultFloat = YogaConstants.UNDEFINED
)
public void setBorderWidth(ReactViewGroup view, int index, float width) {
  if (!YogaConstants.isUndefined(width) && width < 0) {
    width = YogaConstants.UNDEFINED;
  }

  if (!YogaConstants.isUndefined(width)) {
    width = PixelUtil.toPixelFromDIP(width);
  }

  view.setBorderWidth(SPACING_TYPES[index], width);
}
 

@ReactProp(name = ViewProps.TEXT_ALIGN)
public void setTextAlign(@Nullable String textAlign) {
  if (textAlign == null || "auto".equals(textAlign)) {
    mTextAlign = Gravity.NO_GRAVITY;
  } else if ("left".equals(textAlign)) {
    mTextAlign = Gravity.LEFT;
  } else if ("right".equals(textAlign)) {
    mTextAlign = Gravity.RIGHT;
  } else if ("center".equals(textAlign)) {
    mTextAlign = Gravity.CENTER_HORIZONTAL;
  } else if ("justify".equals(textAlign)) {
    // Fallback gracefully for cross-platform compat instead of error
    mTextAlign = Gravity.LEFT;
  } else {
    throw new JSApplicationIllegalArgumentException("Invalid textAlign: " + textAlign);
  }
  markUpdated();
}
 

@ReactPropGroup(
  names = {
    ViewProps.BORDER_COLOR,
    ViewProps.BORDER_LEFT_COLOR,
    ViewProps.BORDER_RIGHT_COLOR,
    ViewProps.BORDER_TOP_COLOR,
    ViewProps.BORDER_BOTTOM_COLOR,
    ViewProps.BORDER_START_COLOR,
    ViewProps.BORDER_END_COLOR
  },
  customType = "Color"
)
public void setBorderColor(ReactViewGroup view, int index, Integer color) {
  float rgbComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int)color & 0x00FFFFFF);
  float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int)color >>> 24);
  view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
}
 

/**
/* This code is duplicated in ReactTextInputManager
/* TODO: Factor into a common place they can both use
*/
@ReactProp(name = ViewProps.FONT_WEIGHT)
public void setFontWeight(@Nullable String fontWeightString) {
  int fontWeightNumeric =
      fontWeightString != null ? parseNumericFontWeight(fontWeightString) : -1;
  int fontWeight = UNSET;
  if (fontWeightNumeric >= 500 || "bold".equals(fontWeightString)) {
    fontWeight = Typeface.BOLD;
  } else if ("normal".equals(fontWeightString)
      || (fontWeightNumeric != -1 && fontWeightNumeric < 500)) {
    fontWeight = Typeface.NORMAL;
  }
  if (fontWeight != mFontWeight) {
    mFontWeight = fontWeight;
    markUpdated();
  }
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_RADIUS,
    ViewProps.BORDER_TOP_LEFT_RADIUS,
    ViewProps.BORDER_TOP_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_LEFT_RADIUS
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderRadius(ReactImageView view, int index, float borderRadius) {
  if (!YogaConstants.isUndefined(borderRadius)) {
    borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
  }

  if (index == 0) {
    view.setBorderRadius(borderRadius);
  } else {
    view.setBorderRadius(borderRadius, index - 1);
  }
}
 

@ReactPropGroup(
  names = {
    ViewProps.BORDER_WIDTH,
    ViewProps.BORDER_LEFT_WIDTH,
    ViewProps.BORDER_RIGHT_WIDTH,
    ViewProps.BORDER_TOP_WIDTH,
    ViewProps.BORDER_BOTTOM_WIDTH,
  },
  defaultFloat = YogaConstants.UNDEFINED
)
public void setBorderWidth(ReactTextView view, int index, float width) {
  if (!YogaConstants.isUndefined(width)) {
    width = PixelUtil.toPixelFromDIP(width);
  }
  view.setBorderWidth(SPACING_TYPES[index], width);
}
 

@ReactProp(name = ViewProps.TEXT_BREAK_STRATEGY)
public void setTextBreakStrategy(@Nullable String textBreakStrategy) {
  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
    return;
  }

  if (textBreakStrategy == null || "highQuality".equals(textBreakStrategy)) {
    mTextBreakStrategy = Layout.BREAK_STRATEGY_HIGH_QUALITY;
  } else if ("simple".equals(textBreakStrategy)) {
    mTextBreakStrategy = Layout.BREAK_STRATEGY_SIMPLE;
  } else if ("balanced".equals(textBreakStrategy)) {
    mTextBreakStrategy = Layout.BREAK_STRATEGY_BALANCED;
  } else {
    throw new JSApplicationIllegalArgumentException(
        "Invalid textBreakStrategy: " + textBreakStrategy);
  }

  markUpdated();
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_RADIUS,
    ViewProps.BORDER_TOP_LEFT_RADIUS,
    ViewProps.BORDER_TOP_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_LEFT_RADIUS
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderRadius(ReactEditText view, int index, float borderRadius) {
  if (!YogaConstants.isUndefined(borderRadius)) {
    borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
  }

  if (index == 0) {
    view.setBorderRadius(borderRadius);
  } else {
    view.setBorderRadius(borderRadius, index - 1);
  }
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_RADIUS,
    ViewProps.BORDER_TOP_LEFT_RADIUS,
    ViewProps.BORDER_TOP_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_LEFT_RADIUS
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderRadius(ReactHorizontalScrollView view, int index, float borderRadius) {
  if (!YogaConstants.isUndefined(borderRadius)) {
    borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
  }

  if (index == 0) {
    view.setBorderRadius(borderRadius);
  } else {
    view.setBorderRadius(borderRadius, index - 1);
  }
}
 

@ReactPropGroup(
  names = {
    ViewProps.BORDER_RADIUS,
    ViewProps.BORDER_TOP_LEFT_RADIUS,
    ViewProps.BORDER_TOP_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_LEFT_RADIUS
  },
  defaultFloat = YogaConstants.UNDEFINED
)
public void setBorderRadius(ReactTextView view, int index, float borderRadius) {
  if (!YogaConstants.isUndefined(borderRadius)) {
    borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
  }

  if (index == 0) {
    view.setBorderRadius(borderRadius);
  } else {
    view.setBorderRadius(borderRadius, index - 1);
  }
}
 

@ReactProp(name = ViewProps.TEXT_ALIGN)
public void setTextAlign(ReactEditText view, @Nullable String textAlign) {
  if (textAlign == null || "auto".equals(textAlign)) {
    view.setGravityHorizontal(Gravity.NO_GRAVITY);
  } else if ("left".equals(textAlign)) {
    view.setGravityHorizontal(Gravity.LEFT);
  } else if ("right".equals(textAlign)) {
    view.setGravityHorizontal(Gravity.RIGHT);
  } else if ("center".equals(textAlign)) {
    view.setGravityHorizontal(Gravity.CENTER_HORIZONTAL);
  } else if ("justify".equals(textAlign)) {
    // Fallback gracefully for cross-platform compat instead of error
    view.setGravityHorizontal(Gravity.LEFT);
  } else {
    throw new JSApplicationIllegalArgumentException("Invalid textAlign: " + textAlign);
  }
}
 

@Test
public void testFontFamilyBoldItalicStyleApplied() {
  UIManagerModule uiManager = getUIManagerModule();

  ReactRootView rootView = createText(
      uiManager,
      JavaOnlyMap.of(
          ViewProps.FONT_FAMILY, "sans-serif",
          ViewProps.FONT_WEIGHT, "500",
          ViewProps.FONT_STYLE, "italic"),
      JavaOnlyMap.of(ReactRawTextShadowNode.PROP_TEXT, "test text"));

  CustomStyleSpan customStyleSpan =
      getSingleSpan((TextView) rootView.getChildAt(0), CustomStyleSpan.class);
  assertThat(customStyleSpan.getFontFamily()).isEqualTo("sans-serif");
  assertThat(customStyleSpan.getStyle() & Typeface.ITALIC).isNotZero();
  assertThat(customStyleSpan.getWeight() & Typeface.BOLD).isNotZero();
}
 

/**
/* This code was taken from the method setFontStyle of the class ReactTextShadowNode
/* TODO: Factor into a common place they can both use
*/
@ReactProp(name = ViewProps.FONT_STYLE)
public void setFontStyle(ReactEditText view, @Nullable String fontStyleString) {
  int fontStyle = UNSET;
  if ("italic".equals(fontStyleString)) {
    fontStyle = Typeface.ITALIC;
  } else if ("normal".equals(fontStyleString)) {
    fontStyle = Typeface.NORMAL;
  }

  Typeface currentTypeface = view.getTypeface();
  if (currentTypeface == null) {
    currentTypeface = Typeface.DEFAULT;
  }
  if (fontStyle != currentTypeface.getStyle()) {
    view.setTypeface(currentTypeface, fontStyle);
  }
}
 

/**
/* This code was taken from the method setFontWeight of the class ReactTextShadowNode
/* TODO: Factor into a common place they can both use
*/
@ReactProp(name = ViewProps.FONT_WEIGHT)
public void setFontWeight(ReactEditText view, @Nullable String fontWeightString) {
  int fontWeightNumeric = fontWeightString != null ?
          parseNumericFontWeight(fontWeightString) : -1;
  int fontWeight = UNSET;
  if (fontWeightNumeric >= 500 || "bold".equals(fontWeightString)) {
    fontWeight = Typeface.BOLD;
  } else if ("normal".equals(fontWeightString) ||
          (fontWeightNumeric != -1 && fontWeightNumeric < 500)) {
    fontWeight = Typeface.NORMAL;
  }
  Typeface currentTypeface = view.getTypeface();
  if (currentTypeface == null) {
    currentTypeface = Typeface.DEFAULT;
  }
  if (fontWeight != currentTypeface.getStyle()) {
    view.setTypeface(currentTypeface, fontWeight);
  }
}
 

@Override
public void draw(Canvas canvas) {
  if (mEndFillColor != Color.TRANSPARENT) {
    final View content = getChildAt(0);
    if (mEndBackground != null && content != null && content.getBottom() < getHeight()) {
      mEndBackground.setBounds(0, content.getBottom(), getWidth(), getHeight());
      mEndBackground.draw(canvas);
    }
  }
  getDrawingRect(mRect);

  switch (mOverflow) {
    case ViewProps.VISIBLE:
      break;
    default:
      canvas.clipRect(mRect);
      break;
  }

  super.draw(canvas);
}
 

@Test
public void testTextDecorationLineUnderlineApplied() {
  UIManagerModule uiManager = getUIManagerModule();

  ReactRootView rootView = createText(
      uiManager,
      JavaOnlyMap.of(ViewProps.TEXT_DECORATION_LINE, "underline"),
      JavaOnlyMap.of(ReactRawTextShadowNode.PROP_TEXT, "test text"));

  TextView textView = (TextView) rootView.getChildAt(0);
  Spanned text = (Spanned) textView.getText();
  UnderlineSpan underlineSpan = getSingleSpan(textView, UnderlineSpan.class);
  StrikethroughSpan[] strikeThroughSpans =
      text.getSpans(0, text.length(), StrikethroughSpan.class);
  assertThat(underlineSpan instanceof UnderlineSpan).isTrue();
  assertThat(strikeThroughSpans).hasSize(0);
}
 

/**
 /* This code was taken from the method setFontStyle of the class ReactTextShadowNode
 /* TODO: Factor into a common place they can both use
 */
@ReactProp(name = ViewProps.FONT_STYLE)
public void setFontStyle(ReactAztecText view, @Nullable String fontStyleString) {
    int fontStyle = UNSET;
    if ("italic".equals(fontStyleString)) {
        fontStyle = Typeface.ITALIC;
    } else if ("normal".equals(fontStyleString)) {
        fontStyle = Typeface.NORMAL;
    }

    Typeface currentTypeface = view.getTypeface();
    if (currentTypeface == null) {
        currentTypeface = Typeface.DEFAULT;
    }
    if (fontStyle != currentTypeface.getStyle()) {
        view.setTypeface(currentTypeface, fontStyle);
    }
}
 

/**
 /* This code was taken from the method setFontWeight of the class ReactTextShadowNode
 /* TODO: Factor into a common place they can both use
 */
@ReactProp(name = ViewProps.FONT_WEIGHT)
public void setFontWeight(ReactAztecText view, @Nullable String fontWeightString) {
    int fontWeightNumeric = fontWeightString != null ?
            parseNumericFontWeight(fontWeightString) : -1;
    int fontWeight = UNSET;
    if (fontWeightNumeric >= 500 || "bold".equals(fontWeightString)) {
        fontWeight = Typeface.BOLD;
    } else if ("normal".equals(fontWeightString) ||
            (fontWeightNumeric != -1 && fontWeightNumeric < 500)) {
        fontWeight = Typeface.NORMAL;
    }
    Typeface currentTypeface = view.getTypeface();
    if (currentTypeface == null) {
        currentTypeface = Typeface.DEFAULT;
    }
    if (fontWeight != currentTypeface.getStyle()) {
        view.setTypeface(currentTypeface, fontWeight);
    }
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_RADIUS,
    ViewProps.BORDER_TOP_LEFT_RADIUS,
    ViewProps.BORDER_TOP_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
    ViewProps.BORDER_BOTTOM_LEFT_RADIUS
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderRadius(ReactScrollView view, int index, float borderRadius) {
  if (!YogaConstants.isUndefined(borderRadius)) {
    borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
  }

  if (index == 0) {
    view.setBorderRadius(borderRadius);
  } else {
    view.setBorderRadius(borderRadius, index - 1);
  }
}
 

@Test
public void testTextDecorationLineLineThroughApplied() {
  UIManagerModule uiManager = getUIManagerModule();

  ReactRootView rootView = createText(
      uiManager,
      JavaOnlyMap.of(ViewProps.TEXT_DECORATION_LINE, "line-through"),
      JavaOnlyMap.of(ReactRawTextShadowNode.PROP_TEXT, "test text"));

  TextView textView = (TextView) rootView.getChildAt(0);
  Spanned text = (Spanned) textView.getText();
  UnderlineSpan[] underlineSpans =
      text.getSpans(0, text.length(), UnderlineSpan.class);
  StrikethroughSpan strikeThroughSpan =
      getSingleSpan(textView, StrikethroughSpan.class);
  assertThat(underlineSpans).hasSize(0);
  assertThat(strikeThroughSpan instanceof StrikethroughSpan).isTrue();
}
 

@ReactProp(name = ViewProps.BACKGROUND_COLOR)
public void setBackgroundColor(Integer color) {
  // Don't apply background color to anchor TextView since it will be applied on the View directly
  if (!isVirtualAnchor()) {
    mIsBackgroundColorSet = (color != null);
    if (mIsBackgroundColorSet) {
      mBackgroundColor = color;
    }
    markUpdated();
  }
}
 

@ReactProp(name = ViewProps.TEXT_DECORATION_LINE)
public void setTextDecorationLine(@Nullable String textDecorationLineString) {
  mIsUnderlineTextDecorationSet = false;
  mIsLineThroughTextDecorationSet = false;
  if (textDecorationLineString != null) {
    for (String textDecorationLineSubString : textDecorationLineString.split(" ")) {
      if ("underline".equals(textDecorationLineSubString)) {
        mIsUnderlineTextDecorationSet = true;
      } else if ("line-through".equals(textDecorationLineSubString)) {
        mIsLineThroughTextDecorationSet = true;
      }
    }
  }
  markUpdated();
}
 

/**
/* This code is duplicated in ReactTextInputManager
/* TODO: Factor into a common place they can both use
*/
@ReactProp(name = ViewProps.FONT_STYLE)
public void setFontStyle(@Nullable String fontStyleString) {
  int fontStyle = UNSET;
  if ("italic".equals(fontStyleString)) {
    fontStyle = Typeface.ITALIC;
  } else if ("normal".equals(fontStyleString)) {
    fontStyle = Typeface.NORMAL;
  }
  if (fontStyle != mFontStyle) {
    mFontStyle = fontStyle;
    markUpdated();
  }
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_WIDTH,
    ViewProps.BORDER_LEFT_WIDTH,
    ViewProps.BORDER_RIGHT_WIDTH,
    ViewProps.BORDER_TOP_WIDTH,
    ViewProps.BORDER_BOTTOM_WIDTH,
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderWidth(ReactHorizontalScrollView view, int index, float width) {
  if (!YogaConstants.isUndefined(width)) {
    width = PixelUtil.toPixelFromDIP(width);
  }
  view.setBorderWidth(SPACING_TYPES[index], width);
}
 

@ReactProp(name = ViewProps.TEXT_ALIGN_VERTICAL)
public void setTextAlignVertical(ReactTextView view, @Nullable String textAlignVertical) {
  if (textAlignVertical == null || "auto".equals(textAlignVertical)) {
    view.setGravityVertical(Gravity.NO_GRAVITY);
  } else if ("top".equals(textAlignVertical)) {
    view.setGravityVertical(Gravity.TOP);
  } else if ("bottom".equals(textAlignVertical)) {
    view.setGravityVertical(Gravity.BOTTOM);
  } else if ("center".equals(textAlignVertical)) {
    view.setGravityVertical(Gravity.CENTER_VERTICAL);
  } else {
    throw new JSApplicationIllegalArgumentException(
        "Invalid textAlignVertical: " + textAlignVertical);
  }
}
 

@ReactProp(name = ViewProps.LINE_HEIGHT, defaultFloat = UNSET)
public void setLineHeight(float lineHeight) {
  mLineHeightInput = lineHeight;
  if (lineHeight == UNSET) {
    mLineHeight = Float.NaN;
  } else {
    mLineHeight =
        mAllowFontScaling
            ? PixelUtil.toPixelFromSP(lineHeight)
            : PixelUtil.toPixelFromDIP(lineHeight);
  }
  markUpdated();
}
 

@ReactProp(name = ViewProps.RESIZE_METHOD)
public void setResizeMethod(ReactImageView view, @Nullable String resizeMethod) {
  if (resizeMethod == null || "auto".equals(resizeMethod)) {
    view.setResizeMethod(ImageResizeMethod.AUTO);
  } else if ("resize".equals(resizeMethod)) {
    view.setResizeMethod(ImageResizeMethod.RESIZE);
  } else if ("scale".equals(resizeMethod)) {
    view.setResizeMethod(ImageResizeMethod.SCALE);
  } else {
    throw new JSApplicationIllegalArgumentException("Invalid resize method: '" + resizeMethod+ "'");
  }
}
 

@Test
public void testPropsApplied() {
  UIManagerModule uiManager = getUIManagerModule();

  ReactRootView rootView = new ReactRootView(RuntimeEnvironment.application);
  rootView.setLayoutParams(new ReactRootView.LayoutParams(100, 100));
  int rootTag = uiManager.addRootView(rootView);
  int textInputTag = rootTag + 1;
  final String hintStr = "placeholder text";

  uiManager.createView(
      textInputTag,
      ReactTextInputManager.REACT_CLASS,
      rootTag,
      JavaOnlyMap.of(
          ViewProps.FONT_SIZE, 13.37, ViewProps.HEIGHT, 20.0, "placeholder", hintStr));

  uiManager.manageChildren(
      rootTag,
      null,
      null,
      JavaOnlyArray.of(textInputTag),
      JavaOnlyArray.of(0),
      null);

  uiManager.onBatchComplete();
  executePendingChoreographerCallbacks();

  EditText editText = (EditText) rootView.getChildAt(0);
  assertThat(editText.getHint()).isEqualTo(hintStr);
  assertThat(editText.getTextSize()).isEqualTo((float) Math.ceil(13.37));
  assertThat(editText.getHeight()).isEqualTo(20);
}
 

@ReactPropGroup(names = {
    ViewProps.BORDER_WIDTH,
    ViewProps.BORDER_LEFT_WIDTH,
    ViewProps.BORDER_RIGHT_WIDTH,
    ViewProps.BORDER_TOP_WIDTH,
    ViewProps.BORDER_BOTTOM_WIDTH,
}, defaultFloat = YogaConstants.UNDEFINED)
public void setBorderWidth(ReactScrollView view, int index, float width) {
  if (!YogaConstants.isUndefined(width)) {
    width = PixelUtil.toPixelFromDIP(width);
  }
  view.setBorderWidth(SPACING_TYPES[index], width);
}