Search code examples
androidreact-nativereact-native-ui-components

Example for ReactPropGroup


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?


Solution

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