Hi friends,
This is essentially a continuation of this post
http://www.coderzheaven.com/2018/08/10/how-to-create-a-custom-native-imageview-in-android-for-reactnative/
Now we will listen to a click event from the image we just created.
For that we have to add the ClickListener to the image in Android.
reactImageView.setOnClickListener(this); // implement the ClickListener to the class. |
Add below methods to the java class
@Overridepublic void onClick(View v) {WritableMap params = Arguments.createMap();params.putInt("ID", v.getId());sendEvent(reactContext, "clickEvent", params);}private void sendEvent(ReactContext reactContext,String eventName,@Nullable WritableMap params) {reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);} |
On the React Native Side
DeviceEventEmitter.addListener("clickEvent", function(e: Event) {alert("Clicked :: " + e.ID);}); |
The whole java class will look like this.
import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Handler;import android.support.annotation.Nullable;import android.util.Log;import android.view.View;import com.facebook.drawee.backends.pipeline.Fresco;import com.facebook.react.bridge.Arguments;import com.facebook.react.bridge.Callback;import com.facebook.react.bridge.ReactContext;import com.facebook.react.bridge.WritableMap;import com.facebook.react.modules.core.DeviceEventManagerModule;import com.facebook.react.uimanager.SimpleViewManager;import com.facebook.react.uimanager.ThemedReactContext;import com.facebook.react.uimanager.annotations.ReactProp;import com.facebook.react.views.image.ReactImageView;import java.net.URL;public class ReactImageManager extends SimpleViewManager<ReactImageView> implements View.OnClickListener {public static final String REACT_CLASS = "RCTImageView1";private final @NullableObject mCallerContext = null;private ImgStartListener imgStartListener;private Callback clickCallback;private ThemedReactContext reactContext;/* Interface Listener to start loading the image if the source is set */private interface ImgStartListener {void startLoading(String imgUrl);}@Overridepublic String getName() {return REACT_CLASS;}/* Method which sets the source from React Native */@ReactProp(name = "src")public void setSrc(ReactImageView view, String uri) {imgStartListener.startLoading(uri);}@Overrideprotected ReactImageView createViewInstance(ThemedReactContext reactContext) {this.reactContext = reactContext;final ReactImageView reactImageView = new ReactImageView(reactContext, Fresco.newDraweeControllerBuilder(), null, mCallerContext);final Handler handler = new Handler();imgStartListener = new ImgStartListener() {@Overridepublic void startLoading(final String imgUrl) {startDownloading(imgUrl, handler, reactImageView);}};reactImageView.setOnClickListener(this);return reactImageView;}private void startDownloading(final String imgUrl, final Handler handler, final ReactImageView reactImageView) {new Thread(new Runnable() {@Overridepublic void run() {try {URL url = new URL(imgUrl);final Bitmap bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());setImage(bmp, handler, reactImageView);} catch (Exception e) {Log.e("ReactImageManager", "Error : " + e.getMessage());}}}).start();}private void setImage(final Bitmap bmp, Handler handler, final ReactImageView reactImageView) {handler.post(new Runnable() {@Overridepublic void run() {reactImageView.setImageBitmap(bmp);}});}@Overridepublic void onClick(View v) {WritableMap params = Arguments.createMap();params.putInt("ID", v.getId());sendEvent(reactContext, "clickEvent", params);}private void sendEvent(ReactContext reactContext,String eventName,@Nullable WritableMap params) {reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);}} |