[ React Native ] react native light sensor module

카메라 녹화를 할때, 해당 기기에서 lux값을 표기해줘야하는 요구사항이 들어왔다.

 

npm 을 검색해봐도 마땅한 패키지가 없어서, https://developer.android.com/guide/topics/sensors/sensors_overview

센서 개요  |  Android 개발자  |  Android Developers

를 확인하면서 모듈을 만들기로했다.

 

android/app/src/main/java/패키지이름 최종 폴더트리는

 

이다.

 

AmbientLightSensorModule.java

 

import android.hardware.Sensor;

import android.hardware.SensorEvent;

import android.hardware.SensorEventListener;

import android.hardware.SensorManager;

import android.util.Log;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.Arguments;

import com.facebook.react.bridge.Promise;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.bridge.WritableMap;

import com.facebook.react.module.annotations.ReactModule;

import com.facebook.react.modules.core.DeviceEventManagerModule;

import android.widget.Toast;

@ReactModule(name = AmbientLightSensorModule.NAME)

public class AmbientLightSensorModule extends ReactContextBaseJavaModule implements SensorEventListener {

public static final String NAME = "AmbientLightSensor";

private final SensorManager mSensorManager;

private final Sensor mSensorLight;

private final ReactApplicationContext mReactContext;

public AmbientLightSensorModule(ReactApplicationContext reactContext) {

super(reactContext);

mReactContext = reactContext;

mSensorManager = (SensorManager) mReactContext.getSystemService(mReactContext.SENSOR_SERVICE);

mSensorLight = mSensorManager.getDefaultSensor(Sensor.TYPE_LIGHT);

}

@Override

@NonNull

public String getName() {

return NAME;

}

private void sendEvent(@NonNull WritableMap params) {

try {

if (mReactContext != null) {

mReactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("LightSensor", params);

}

} catch (RuntimeException e) {

Log.d("ERROR", "error in sending event");

}

}

@Override

public final void onSensorChanged(SensorEvent sensorEvent) {

WritableMap sensorMap = Arguments.createMap();

float lightSensorValue = sensorEvent.values[0];

sensorMap.putDouble("lightValue", lightSensorValue);

sendEvent(sensorMap);

}

@Override

public final void onAccuracyChanged(Sensor sensor, int accuracy) {

}

@ReactMethod

public void startLightSensor() {

Toast.makeText(getReactApplicationContext(), "startLightSensor 1", Toast.LENGTH_SHORT).show();

if (mSensorLight == null) {

return;

}

Toast.makeText(getReactApplicationContext(), "startLightSensor 2", Toast.LENGTH_SHORT).show();

mSensorManager.registerListener(this, mSensorLight, SensorManager.SENSOR_DELAY_NORMAL);

}

@ReactMethod

public void stopLightSensor() {

Toast.makeText(getReactApplicationContext(), "stopLightSensor 1", Toast.LENGTH_SHORT).show();

if (mSensorLight == null) {

return;

}

Toast.makeText(getReactApplicationContext(), "stopLightSensor 2", Toast.LENGTH_SHORT).show();

mSensorManager.unregisterListener(this);

}

}

LightSensorPackage.java

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

public class LightSensorPackage implements ReactPackage {

@NonNull

@Override

public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new AmbientLightSensorModule(reactContext));

return modules;

}

@NonNull

@Override

public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {

return Collections.emptyList();

}

}

MainApplication.java 에는 

packages.add(new LightSensorPackage());

를 추가해준다.

js 로 돌아와서, 

 

원하는 컴포넌트에서

 

const [result, setResult] = React.useState<number | undefined>();

useEffect(() => {

NativeModules.AmbientLightSensor.startLightSensor();

const subscription = DeviceEventEmitter.addListener(

'LightSensor',

(data: {lightValue: number}) => {

console.log('data.lightValue :::::::::', data.lightValue);

setResult(data.lightValue);

},

);

return () => {

NativeModules.AmbientLightSensor.stopLightSensor();

subscription.remove();

};

}, []);

을 통해서 console 찍히는것 확인했다.

 

RN을 할수록, Native를 잘하면 더 좋은 앱을 만들수있을것 같다는 생각을 많이 한다.