I'm trying to implement a React Native bridge between JS and Google Pay's Android PayButton API, however I've come across a strange issue - I first need to know all React props in order to create the native PayButton View to return from my custom ViewManager.
Here's my MyGooglePayButtonManager.java:
public class MyGooglePayButtonManager extends SimpleViewManager<PayButton> {
public static final String REACT_CLASS = "GooglePayButton";
ReactApplicationContext mCallerContext;
public MyGooglePayButtonManager(ReactApplicationContext reactContext) {
mCallerContext = reactContext;
}
@Override
public String getName() {
return REACT_CLASS;
}
@Override
protected PayButton createViewInstance(@NonNull ThemedReactContext themedReactContext) {
PayButton button = new PayButton(themedReactContext);
button.initialize(
ButtonOptions.newBuilder()
.setButtonTheme(ButtonConstants.ButtonTheme.DARK)
.setButtonType(ButtonConstants.ButtonType.BUY)
.setCornerRadius(100)
.setAllowedPaymentMethods("[]")
.build()
);
return button;
}
@ReactProp(name = "theme")
public void setTheme(PayButton button, @NonNull int theme) {
// button.setTheme(theme); -- DOESN'T WORK as Google doesn't allow changing of initialized PayButton.
// Have to reinitialize the whole button instead. But I cannot know about other passed props unless
// I store them in a local field and rebuild the button each time.
button.initialize(ButtonOptions.newBuilder()
.setButtonTheme(theme)
.setButtonType(ButtonConstants.ButtonType.BUY)
.setCornerRadius(100)
.setAllowedPaymentMethods("[]")
.build());
}
}
The question is - can I somehow get all props of my component in setTheme method and only then initialize the PayButton?
One solution I can think of is passing props not separately but as one object prop, called sth like buttonProps, which would have theme, cornerRadius and other props. But it isn't ideal as usually React components have separate props.
Thanks!
EDIT: This is my current solution to achieve what I want. But I'm not sure if it isn't too expensive to re-initialize the button with each prop passed:
public class MyGooglePayButtonManager extends SimpleViewManager<PayButton> {
public static final String REACT_CLASS = "GooglePayButton";
ReactApplicationContext mCallerContext;
public MyGooglePayButtonManager(ReactApplicationContext reactContext) {
mCallerContext = reactContext;
}
@Override
public String getName() {
return REACT_CLASS;
}
private int theme = ButtonConstants.ButtonTheme.DARK;
private int type = ButtonConstants.ButtonType.BUY;
private int cornerRadius = 20;
@Override
protected PayButton createViewInstance(@NonNull ThemedReactContext themedReactContext) {
PayButton button = new PayButton(themedReactContext);
buildButton(button);
return button;
}
@ReactProp(name = "theme")
public void setTheme(PayButton button, @NonNull int theme) {
this.theme = theme;
buildButton(button);
}
@ReactProp(name = "cornerRadius")
public void setCornerRadius(PayButton button, @NonNull int cornerRadius) {
this.cornerRadius = cornerRadius;
buildButton(button);
}
@ReactProp(name = "type")
public void setType(PayButton button, @NonNull int type) {
this.type = type;
buildButton(button);
}
private void buildButton(PayButton button) {
button.initialize(ButtonOptions.newBuilder()
.setButtonTheme(theme)
.setButtonType(type)
.setCornerRadius(cornerRadius)
.setAllowedPaymentMethods("[]")
.build());
}
}