Example for ReactPropGroup

Question

I'm implementing a new native UI component for my project. For some reason, I need to set 2 properties at the same time using one method. By using ReactProp I can set only one property like this:

@ReactProp(name = "mode")
public void setMode(PDFLayoutView view, int mode) {
    view.PDFSetView(mode);
}

But if I want to set for example src and password properties I can't use ReactProp annotation.

@ReactProp(name = "src")
public void setMode(PDFLayoutView view, string src, string password) {
    view.setSrc(src, password);
}

I checked https://facebook.github.io/react-native/docs/native-components-android#imageview-example and found ReactPropGroup annotation might help me. But there is no example of how to use it. Can you provide an example or another solution to solve my problem?

hong developer · Accepted Answer · 2019-08-10T10:37:04.943

3

Usage of using ReactPropGroup.

@ReactPropGroup(names = {"src","password"})
public void setMode(PDFLayoutView view, string src, string password) {
    view.setMode(src, password);
}

Example of using conditional statements for parameters

@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);
  }
}

edited Aug 10 '19 at 10:37

answered Aug 10 '19 at 10:29

hong developer

13,291
4
38
68

Thanks. Can you show me how can I use these props is JS? – hamidfzm Aug 10 '19 at 12:10
Please refer https://facebook.github.io/react-native/docs/native-components-android – hong developer Aug 10 '19 at 13:06
it can't be found – Michael Mao Feb 18 '20 at 08:13
The first example, "public void setMode(PDFLayoutView view, string src, string password) {", does not work for me, since the function should receive an index and a value, not a value in each param. – Anderson Danilo Mar 24 '21 at 19:56
1

Today, the doc is available in https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/annotations/ReactPropGroup.java (as comment) – Anderson Danilo Mar 24 '21 at 20:06

Example for ReactPropGroup

1 Answers1