How to listen to events from react native?

By | August 14, 2018

Hi friends,

This is essentially a continuation of this post
https://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);
}

}

Leave a Reply

Your email address will not be published. Required fields are marked *