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
@Override
public 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 @Nullable
Object 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);
}
@Override
public 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);
}
@Override
protected 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public void run() {
reactImageView.setImageBitmap(bmp);
}
});
}
@Override
public 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);
}
}