Instructions for applying Instagram filter photo in React Native

Tram Ho

Hello everyone, this article I will introduce to you how to use Instagram filter for an image in the React Native project.

First we need a basic React Native project and of course the project will include a sample image for the demo. In this example I use a sample image named car.png .

And the package for using those filters is react-native-image-filter-kit

In the App.js file import the sample image as follows

The Emposs component provided by react-native-image-filter-kit library will take the Image as a prop and return a new image with the filter.

However, the library also provides a lot of other filters, so in order to see what those filters look like, we will handle it a little differently. We’ll import a bunch of components and define them as a filter array like this:

Next we need to render a list of filters that are below the original default image and centered when the filter is selected. In App.js :

It should look like the following picture

Once selected, the onExtractImage method will store the extracted image URL after applying the filter by the extractedUri ref variable, which you can use to store on the server.

Above is a little example of using react-native-image-filter-kit filter , hope it helps everyone.

Thanks for reading the article!

Share the news now

Source : Viblo