Calling Native Ui from React component

Question

hi all i am pretty much new to Native UI component in react-native hence for start i created a button on native side in android and exposed it .i am able to import that button in my component but i have been unsuccessful to map button native event onClick to my React side onClick prop.I followed the documentation but no success.so how can i do it?

following is my button props and mapping:

 @ReactProp(name="width")
    public void setWidth(AppCompatButton view, @Nullable Integer width) {
        view.setMinimumWidth(width);
    }

    @ReactProp(name="height")
    public void setHeight(AppCompatButton view, @Nullable Integer height) {
        view.setMinimumHeight(height);

    }

    @ReactProp(name="text")
    public void setText(AppCompatButton view, @Nullable String text) {
        view.setText(text.toString());
        GradientDrawable gd = new GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                new int[] {0xFF3CB043,0xFFAEF3F9});
        gd.setCornerRadius(0f);
        view.setBackgroundDrawable(gd);
    }


    @Override
    public Map getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.builder().put(
                "onClick",
                MapBuilder.of(
                        "phasedRegistrationNames",
                        MapBuilder.of("bubbled", "onClick")
                )
        ).build();
    }

following is my listener to event to my button:

public class ButtonWrapper extends AppCompatButton {
    public ButtonWrapper(Context context) {
        super(context);
    }

    @Override
    public void setOnClickListener(@Nullable OnClickListener l) {
        super.setOnClickListener(view -> {
            final Context context = getContext();
            Log.d("id", String.valueOf(view.getId()));
            if (context instanceof ReactContext) {
                ((ReactContext) context).getJSModule(RCTModernEventEmitter.class)
                        .receiveEvent(getId(), "onClick", null);
            }
        });
    }


}

and following is the code i am calling on react side:

function MyView(){

  function onChange(event){
    console.log("event")
  }

  
  const ref = useRef(null);

  useEffect(() => {
    const viewId = findNodeHandle(ref.current);
    console.log("id",viewId)
    createFragment(viewId);
  }, []);


  return (
    <MyViewManager
      style={{
        // converts dpi to px, provide desired height
        height: 50,
        // converts dpi to px, provide desired width
        width: 100
        
      }}
      ref={ref}
   
      text="click me"
      onClick={onChange}
    />
  );
};

export default MyView

Calling Native Ui from React component

0 Answers0