I am building an app which has a feature to crop images using react-native-image-crop-picker
. I am trying to implement the logic to store the cropped images locally in my react native app. I could successfully implement the logic for iOS, however, I am having trouble with the Android side.
My problem is that when I store the image using reactContext.getFilesDir()
, the image is stored into the /data/user/0/com.myapp/files/
directory. And the images can be accessed via 'Google Photos' app or 'Files' app. I don't want to let the users access these images.
Here is the picture describing my problem.
The things I have tried so far:
1. Use getCurrentActivity()
instead of reactContext
2. Use getReactApplicationContext()
instead of context
Findings:
- After saving the image, it is stored into /data/user/0/com.myapp/files/
, /data/data/0/com.myapp/files/
and storage/emulated/0/Pictures/
.
FileStreamHandler.java
public class FileStreamHandler extends ReactContextBaseJavaModule { private Context context;// private Activity mActivity; @Nonnull @Override public String getName() { return "FileStreamHandler"; } public FileStreamHandler(ReactApplicationContext reactContext) { super(reactContext);// mActivity = reactContext.getCurrentActivity(); this.context = reactContext; } @ReactMethod private void saveImageData(String base64String, Callback callback) { // Generate random image name String fileName = UUID.randomUUID().toString() +".png";// File fileDirectory = mActivity.getFilesDir(); File fileDirectory = context.getFilesDir(); File imageFile = new File(fileDirectory, fileName); String imageFilePath = imageFile.getAbsolutePath(); try { OutputStream stream = new FileOutputStream(imageFile); //decode base64 string to image byte[] decodedBytes = Base64.decode(base64String, Base64.DEFAULT); Bitmap decodedImage = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.length); decodedImage.compress(Bitmap.CompressFormat.PNG,100, stream); stream.flush(); stream.close(); } catch (IOException e) { e.printStackTrace(); } callback.invoke(imageFilePath); }}
The image is stored successfully without any errors. However, it is stored into /data/user/
and can be accessed via other applications such as 'Photos' or 'Files'.
Although I am using exactly the same logic in my pure Android app, I have never had this problem. Therefore, I am suspecting that the react application context is causing the problem.
Any help would be highly appreciated.
Thank you.