DEV Community

ibenge Uforo
ibenge Uforo

Posted on • Edited on

3 2

Entry-3: Display Image with Intent (React-native)

A simple way I came up with to open an image, given a file path linked to the internal storage on mobile (Android)

public void openFileWithIntent(String completeFilePath, String directory) {

                //convert file path to File
        File newFile = new File(String.valueOf(Uri.parse(fileName)));
                // convert create content Uri for sharing with other apps
        Uri contentUri = getUriForFile(reactContext, reactContext.getApplication Context().getPackageName() + ".fileprovider", newFile);

                //create an intent
        Intent intent = new Intent();
                // set the action type 
        intent.setAction(Intent.ACTION_VIEW);
                // set the data and mime type
                String mimeType = ...
        intent.setDataAndType(contentUri, mimeType);
                // Grant temporary access to application opening the file
        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
                // Due to context being outside an activity, we add the flag.
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                // Launch file chooser
        reactContext.startActivity(intent);
 }
Enter fullscreen mode Exit fullscreen mode

Add to your android manifest


<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
    <meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths" />
</provider>
Enter fullscreen mode Exit fullscreen mode

We create a file path.xml for above “******android:resource….”******

<?xml version="1.0"encoding="utf-8"?>
<pathsxmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-pathname="photos"path="photos/"  />
</paths>

Enter fullscreen mode Exit fullscreen mode

And that’s it.

Deep dive.

External Links

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay